Хак с применением подчеркивания или дефиса. Хак с применением дочернего селектора

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

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

CSS-хаки для браузера Opera

*|html .style { background: #F00; } html:first-child .style { background: #F00; }

CSS-хаки для браузера FireFox

@-moz-document url-prefix() { .style {background: #F00;} }

CSS-хаки для браузера Internet Explorer 6.0 и ниже

.style { _background: #F00; } * html .style { background: #F00; }

CSS-хаки для браузера Internet Explorer 7.0

*+html .style { background: #F00; } html>body .style { *background: #F00; }

CSS-хаки для браузера Safari

body:last-child:not(:root:root) .style { background: #F00; } html body:last-child .style { background: #F00; }

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

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

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

И еще раз позволю себе повториться. Время IE6 подходит к концу, и на сегодняшний день практически все современные браузеры отображают валидный код вполне адекватно. Поэтому, в случае возникновения проблем с отображением страницы в каком либо браузере, прежде чем прибегать к хакам, просмотрите заново свой код, поэкспериментируйте, поищите информацию в интернете, и скорей всего ненужных хаков можно будет избежать, добившись таким образом абсолютной валидности вашего кода.

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

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

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

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

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

Альтернативный выход

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

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

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

style.css:

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

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

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

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

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

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

display: inline

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

display: inline-block

Quirky Percentages in IE6’s Visual Formatting Model

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

И еще пара советов:

Во-первых, используйте данные правила по-возможности только для IE. Причем для разных версий решение может отличаться (чаще это относится к height: 1% и zoom: 1).

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

На этой странице описаны CSS хаки для IE , используя которые можно назначить HTML-элементу какие-то свойства, понимаемые только этим браузером, но игнорируемые другими.

CSS хаки для IE6

Браузер IE6 имеет больше всего багов и проблем с пониманием стандартов W3C, хотя для своего времени он был очень неплох.

Хак с применением правила CSS !important

Хак с применением селектора * html

Этот CSS хак для IE6 связан с применением универсального селектора , который ассоциируется в CSS сразу со всеми HTML-элементами на странице. Однако если его использовать в создании селектора потомков , где указать перед селектором html , то это будет противоречить всякой логике, хотя синтаксис CSS и не будет нарушен. Ведь получается, что таким объявлением мы говорим браузерам, что на странице присутствуют элементы, которым тег является потомком. Естественно этого не может быть, так как данный тег - это корневой элемент HTML-страницы, и все браузеры это понимают и игнорируют такой селектор, но только не IE6.

Синтаксис:

* html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE6 и универсальный селектор

В IE6 этот текст будет красным, в остальных браузерах - зеленым.

Хак с применением дочернего селектора

Хак с применением подчеркивания или дефиса

Этот CSS хак для IE6, использует особенность данного браузера распознавать свойства CSS, перед которыми ставится знак подчеркивания (_) или дефиса (-).

Синтаксис:

селектор { _свойство : значение; } селектор { -свойство : значение; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и свойства с подчеркиванием или дефисом

В IE6 будет рамка и текст по центру, в остальных браузерах все останется по умолчанию.

CSS хаки для IE6 и IE7

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

Хак с применением CSS expression

Вообще, это не совсем хак, так как CSS expression - это внедренная в браузер технология, которая позволяет использовать скрипты прямо внутри CSS. Эти скрипты указываются вместо значения у свойства и применяются для его динамического расчета. То есть то, что высчитает скрипт, в итоге и становится значением. Таким образом можно заткнуть многие дыры шестого и седьмого IE, но помните, что expression замедляет (иногда серьезно) работу браузера, поэтому лучше подключать его через условные комментарии . Да и вообще вместо хаков лучше использовать условные комментарии.

Синтаксис:

селектор { свойство : expression(скрипт); }

Валидация: нет.

Пример HTML и CSS: CSS expression в IE

1000? "auto": "1000px"); /* для IE6 */ }

Содержимое страницы.

Как вы знаете, IE6 не понимает свойство CSS , поэтому в данном примере скрипт внутри expression высчитывает необходимое значение и подставляет его в свойство .

Хак с применением символов слеша и звездочки

Если перед CSS-свойством поставить слеш (/) или звездочку (*), то поймут его только IE6 и IE7, на чем и основан данный хак.

Синтаксис:

селектор { /свойство : значение; } селектор { *свойство : значение; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и IE7 со слешем и звездочкой

Во всех браузерах будет красный текст, но в IE6 и IE7 он будет еще и курсивным, плюс добавится синий фон.

Хак с применением символа!

Если через пробел после значения свойства CSS поставить восклицательный знак (!), то его не проигнорируют только браузеры IE6 и IE7. Эта особенность и послужила для создания хака.

Синтаксис:

селектор { свойство : значение!; }

Валидация: нет.

Пример HTML и CSS: хак для IE6 и IE7 со знаком!

Во всех браузерах будет зеленый фон, но в IE6 и IE7 к нему добавится белый текст.

CSS хаки для IE7

Здесь поговорим о CSS хаках, которые понимает только IE7.

Хак с применением универсального и соседнего селекторов

Internet Explorer начал поддерживать соседние селекторы с версии 7.0, однако с этой поддержкой в Microsoft немного переборщили. Дело в том, что если для создания соседнего селектора использовать универсальный селектор и селектор тегов html , то он не должен работать, ведь у тега не может быть соседей ( не в счет). Однако в IE7 такое сочетание работает, что и было использовано для очередного хака.

Синтаксис:

* + html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE7 с универсальным и соседним селекторами

В IE7 рамка будет красной, в остальных браузерах - зеленой.

Хак с применением универсального и соседнего селекторов + :first-child

Этот хак похож на предыдущий, только в селектор добавился псевдокласс CSS .

Синтаксис:

*:first-child + html селектор { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE7 с псевдоклассом CSS:first-child и универсальным и сосоедним селекторами

Во всех браузерах шрифт будет жирный, но в IE7 еще и курсивный.

CSS хаки для IE8

IE8 уже довольно хорошо поддерживает стандарты W3C, однако и в нем иногда приходится использовать хаки, чтобы устранить некоторые погрешности.

Хак с применением идентификаторов

Если в таблице стилей поставить рядом (без пробелов) два идентификатора , то согласно синтаксиса CSS это будет означать, что мы хотим применить стили к HTML-элементу, который содержит оба этих идентификатора одновременно. Но синтаксис HTML не предусматривает наличие у одного элемента сразу двух идентификаторов (в отличие от классов), поэтому по логике вещей такое указание браузерам надо игнорировать. И IE8 с этим согласен, то есть он воспринимает такое указание, как ошибку, а вот остальные браузеры - нет.

А теперь о самом хаке. Если в CSS указать нужный селектор, а через запятую от него слитно написать два идентификатора, то IE8 не воспримет подобные стили и пропустит все, что находится в скобках. Таким образом можно создавать CSS, который поймут все браузеры кроме восьмого Эксплорера.

Синтаксис:

селектор, #идентификатор1#идентификатор2 { стили CSS }

Валидация: да.

Пример HTML и CSS: хак для IE8 с идентификаторами

seodon.ru - CSS хаки для IE

В IE8 цвет текста будет оранжевым, а в остальных браузерах - синим.

CSS хаки для IE8 и IE9

Хаки, которые одновременно понимают браузеры IE8 и IE9.

Хак с применением символов \0/

Если в конце значения свойства поставить знаки \0/ , то все браузеры его пропустят, кроме IE8 и IE9.

Синтаксис:

селектор { свойство : значение\0/; }

Валидация: нет.

Пример HTML и CSS: хак для IE8 и IE9 с символами \0/

В IE8 и IE9 рамка будет синей, а в остальных браузерах - оранжевой.

Любой, кто занимался Web-дизайном , сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer , особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки .

CSS хак - это специальный синтаксис стиля , который понимает только один определённый браузер. Причём CSS хаки даже часто различаются для разных версий одного браузера.

Однако, прежде чем перейти к CSS хакам , хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript , в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.

Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE . Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега ). Работает он только для браузеров IE , но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE , то подключить таблицу стилей из файла css/ie.css ".

Если необходимо указать конкретную версию браузера, то вместе с "IE " необходимо поставить ещё и номер версии. Например так:

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6 . Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии . Если бы вместо "lt " поставили "lte ", то это бы означало ниже или эквивалентно 6-ой версии.

В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле , всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:

1) Internet Explorer . Данный CSS хак работает для версий IE7 и ниже . Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:

P {
* margin-top: 30px; # Для браузеров IE7 и ниже.
}

Как видите перед вторым свойством "margin-top " стоит символ "* ". Это и есть CSS хак . То есть если поставить "*" перед именем свойства, то данное свойство будет применено только для браузеров IE7 и ниже . Вывод: для всех браузеров "margin-top " будет в значении "20px ", а для браузеров IE7 и ниже в значении "30px ". Если требуется указать стиль только для IE6 и ниже (это часто бывает, потому что с IE7 гораздо лучше дела обстоят и чаще всего править стиль для этого браузера не требуется), то существует другой CSS хак :

P {
margin-top: 20px; # Для всех браузеров
_margin-top: 30px; # Для браузеров IE6 и ниже.
}

Как не трудно заметить, перед вторым свойством стоит знак "_", который и является CSS хаком для браузеров IE6 и ниже .

2) Mozilla Firefox . Данный CSS хак работает только для браузеров Mozilla Firefox . Вот его пример:

P, x:-moz-any-link {
margin-top: 30px;
}

В данном примере сообщается, что стиль к селектору "p " будет применён только для браузеров Mozilla Firefox , а все остальные браузеры данный стиль проигнорируют.

3) Opera . Этот CSS хак используется для браузеров Opera . Пример его использования:

* |html p {
margin-top: 30px;
}

Здесь я думаю, что также всё понятно.

Вот и всё, что хотелось написать в этой статье. Однако, ещё раз напоминаю, что CSS хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с , тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.