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

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. К сожалению, это уже тема для отдельной статьи и с этими возможностями читателю следует ознакомится самостоятельно.

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

• раздел в Microsoft Developer Network
• Подробное объяснение синтаксиса и методологии использования
• О валидности синтаксиса условных комментариев не для IE

Укрощаем Internet Explorer или «чудесные правила»

Как уже говорилось выше, больше всего проблем верстальщику доставляют браузеры от Microsoft. Как добавить отдельные правила только для Internet Explorer, вы уже знаете. Теперь рассмотрим, какие правила смогут помочь нам с укрощением IE.

Все перечисляемые ниже элементы управляют свойством 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. Псоледовательный метод перебора очень часто используется в нашей професии.

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

• hasLayout property в MSDN
• On having layout
• Магия для IE
• hasLayout по-русски
• On having layout по-русски //habrahabr.ru/blog/webdev/24553.html

Источник: flack.ru