Ксдыщь!

Дилетантские заметки про XSLT/XPath, HTML/CSS и всякую фигню

Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE

7 декабря 2007 · Комментариев: 14 · HTML/CSS, Рецептарий

CSS-хаки

При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».

Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.

Наиболее популярным хаком на сегодня остается так называемый «star html hack»:

#element {
  position:relative; /* Основное правило  для всеx браузеров */
  }
  * HTML #element {
    position:static; /* Переопределение  правила для IE младше седьмой версии */
    }

В валидных HTML- и XHMTL-документах селектор HTML всегда играет роль корневого элемента, а BODY — потомка первого уровня, но не второго или более высокого уровня. Таким образом, теоретически селектор «* HTML» не должен применяться ни к одному элементу. Но на практике IE пятых и шестых версий из-за ошибки в собственном движке интерпретируют данный селектор как HTML и применяют указываемые правила. Поскольку остальные современные браузеры селектор «* HTML» игнорируют, этот прием можно использовать в корыстных целях. Это полезно, но правильно ли?

Несмотря на то что данный хак корректен с точки зрения стандарта CSS, есть ряд негативных нюансов.

Во-первых, слово «хак» звучит странно, и разработчику уже это должно не понравиться.

Во-вторых, такие хаки для браузера Internet Explorer засоряют код, подгружаемый и всеми остальными браузерами.

В-третьих, в этом хаке игнорируется недавно вышедший Internet Explorer 7.0, где был исправлен целый ряд ошибок в модуле CSS (более подробно об этом вы можете почитать непосредственно в блоге разработчиков IE7 по адресу blogs.msdn.com/ie).

Как же укротить Internet Explorer, не используя хаки?

Альтернатива синице

В недрах Microsoft Developer Network есть решение получше — conditional comments. Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример элегантного использования условных комментариев:

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->

Обычное подключение CSS-файлов, однако увидят вторую строку, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше (включая свежий седьмой) прочитают код, находящийся внутри комментария и интерпретируют его.

Таким образом все наши хаки можно вынести в отдельный файл:

style.css:

#element {
    position:relative; /* Основное правило для всеx браузеров */
    }

ie.css:

#element {
    position:static; /* Переопределение правила для IE всех версий */
    }

Теперь мы не используем хаки в основном листе стилей; добились того, что альтернативное правило было применено ко всем Explorer’ам, включая седьмой; а также избавили пользователей альтернативных браузеров от загрузки лишнего кода. При этом мы сохранили наш (X)HTML и CSS валидным, так как такой условный комментарий не распознается никем иным кроме IE, включая даже валидатор от W3C.

Условные комментарии гибче, чем кажется на одном примере. Вы можете охватить не только все Explorer’ы, но и все его версии ниже или выше определенной или конкретную его версию; а также подгрузить код, который будут интерпретировать все браузеры, кроме Internet Explorer. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

Материалы для изучения:

Укрощаем Internet Explorer или «магические правила»

Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Мы уже рассказали о том, как добавить отдельные правила только для Internet Explorer, но не коснулись того, какие же правила нам смогут помочь. Исправляем это досадное упущение.
Все перечисляемые ниже элементы управляют свойством hasLayout. hasLayout не является частью стандарта CSS и является скорее микрософтовской «заплаткой» для веб-разработчиков. Но и на том спасибо, как говорится.

Мы приводим только названия багов, для исправления которых применяются данные правила. Более подробное описание указываемых багов вы можете найти по адресу positioniseverything.net/explorer.html.

position:relative

  • The IE/Win Disappearing List-Background Bug
  • IE6 Border Chaos

Данное правило также часто применяется для спонтанно пропадающих блоков. Не падающих или неправильно отображающихся, а именно пропадающих. Особенно грешит этим Internet Explorer 5.0.

height:1%

  • The IE6 Three Pixel Text-Jog
  • The IE Escaping Floats Bug
  • IE and italics (будьте осторожны с 5.0, используйте экранирование)
  • IE/Win Unscrollable Content Bug
  • IE/Win Guillotine Bug
  • Quirky Percentages in IE6’s Visual Formatting Model

Применяется также для клиаринга элементов. Задается контейнеру, содержащему float’ы.

display:inline

  • Floats, Margins and IE
  • The IE Doubled Float-Margin Bug

display:inline-block;

  • Quirky Percentages in IE6’s Visual Formatting Model

zoom:1

  • Аналог height:1%; для IE 7.

И еще пара советов:
Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (наиболее часто это касается height:1% и zoom:1).
Во-вторых, столкнувшись с нежелательным поведением Explorer’а, которому нет документированного объяснения (или вам просто лень его искать) — попробуйте последовательно применить к проблемному элементу все правила, влияющие на свойство hasLayout. Шаманство — неотъемлемая часть нашей професии.

Материалы для изучения:

Комментариев: 14 ↓

  • FX Poster

    От себя могу добавить ссылку на русский перевод статьи про hasLayout.

  • oqbo

    Как раз морочился тут с отображением в ИЕ. Этот топик помог.
    Спасибо!

  • Tsvet

    Леха! молодца! будешь брать комиссию за использование материалов в деле обучения молодого персонала знакомой команды? :-)

  • sunnybear

    On having layout был переведен несколько месяцев назад тут
    http://habrahabr.ru/blog/webdev/24553.html
    кривовато, но, в общем, сносно. Пользуйтесь на здоровье :)

  • FX Poster

    sunnybear
    См. первый коммент ;)

  • noname

    Хаки вообще использовать не надо. Для IE надо использовать условные комментарии – через них вставлять отдельный CSS фаил. Спросите почему ? Потому что с выходом новой версии браузера вся верстка сайта может развалится в большей или меньшей степени. Абсолютно все можно верстать по стандартам. Неспособность верстать по стандартам говорит о неквалифицированном версталщике который не ценит свое время.

  • noname

    пока не вышел IE8 который поддерживает display: table-cell; заморачиватся на верстки без таблиц смысла нет. Все можно сделать по стандартам. И не забывайте что елемент float, придуман не для верстки а для обтекания. Не согласны? Посмотрите google, yandex…. как они сделаны? Вы думаете их делали случайные люди ? Если думаете что вы круче их … ну … задумайтесь какой успех у ваших сайтов и какой у google и yandex-a :)

  • admin

    noname, вы сами себе противоречите, более того о-очень невнимательно читаете.

  • Алексей Новиков

    И не забывайте что елемент float, придуман не для верстки а для обтекания. Не согласны? Посмотрите google, yandex…. как они сделаны? Вы думаете их делали случайные люди ? Если думаете что вы круче их … ну … задумайтесь какой успех у ваших сайтов и какой у google и yandex-a

    Успех «Яндекса» и «Гугла» никак не связан с использованием их верстальщиками свойства float.

    Не верите? Покажите мне хоть один из ваших «правильных» сайтов, который приносит 6 миллионов долларов?

    Вот сайт Plenty of Fish ужасен по оформлению и отвратителен по верстке. При этом коммерчески успешен.

    Так что не надо фанатизма. Сама жизнь показывает, что успех проекта и на одну тысячную процента не связан с «правильностью» использования float.

  • Loki

    Скажите, пожалуйста, входят ли условные комментарии в понятие кроссбраузерности? Т.е. грубо говоря, можно ли написать в резюме: “верстаю кроссбраузерно” и при этом использовать услокоммы?

  • Flack

    Не можно, а нужно.

  • Ivan

    У тебя блог в эксплорере перекособочило нафик

  • Amal Samally

    Всегда пользовался хаками. Эта статья помогла найти ещё пару способов утереть нос съезжающей крыше ослика )))

  • YBS

    Хотелось бы отметить вот еще какой момент. Это, правда, не хака, хотя может и она. Вобщем с появлением 8-ой и последующих версий, в ИЕ так и не решилась проблема с исчезновением блоков.
    Особенно сильно шаманством занематься не пришлось, сразу выяснилось, что блоки эти “мерцающие” имеют в себе ссылки. И именно когда на ссылки наводишь, блок исчезает и через несколько мгновений появляется снова.
    Также выяснилось, что эти “нехорошие” блоки как правило являются дочерними к основному.
    В интернете очень мало информации, ещё и потому, что многие пишут об этом в блогах и статьях, но выйти на них сложно, так как никто не может точно сформулировать поисковый запрос. Поэтому, пока найдешь ключевое слово, самому проблему решить можно :))
    Вобщем-то ниодин из хаков для 8-ой версии ИЕ не помог. Такой же результат был и на попытки предварительного загруза в кэш контэнта.
    Я почти опустил руки и хотел идти вешаться. Однако, вспомнив, что позиционирование бывает не только relative, но и absolute, который с другими параметрами (left, top, right и bottom), но можно позиционировать как и relative. Применив absolute, ссылки-картинки и связанные с ними блоки пропадать перестали.

    Если это кому-то поможет, буду очень рад.

    PS. Чувствую, что если у вас более 4 элементов с одним типом позиционирования, то проблема возникнет однозначно.

Оставить комментарий