CSS хаки
Автор: Евгений Рыжков Дата публикации:
Хак — специальная CSS конструкция, которую понимают одни браузеры и игнорируют другие. Использование хаков часто говорит о непрофессиональности верстальщика. Но встречаются случаи, когда хак — единственный способ решения проблемы (например общеизвестные баги браузеров (см «Глюки браузеров»)). Не стоит так же забывать, что в наше время спешка — обычное явление. Посему сроками «на вчера» — никого не удивишь. Вот и нет времени разбираться почему не выходит так как хочется.
Плюс хаков
Это быстрое решение проблемы. Прописали дополнительных строчек и все отлично, верстаем дальше.
Недостатки хаков
- Нет уверенности как поведет себя сайт с выходом новых версий браузеров. Например, написали код с хаком для Firefox, через месяц выходит новая версия Safari и оказывается она тоже воспринимает этот хак! Приходится переделывать.
- Многие хаки не проходят валидацию — опасность этого описана в предыдущем пункте.
По возможности старайтесь избегать использования хаков. Для исправления ошибок IE используйте отдельный CSS-файл, котjрый подключается с помощью условных комментариев.
Хаки для IE
| Проходят валидацию | ||
|---|---|---|
| Синтаксис | Кто понимает | Пример |
| * html | IE6 |
div {
background: #ff0000;
}
* html div {
background: #000;
}
|
| !important | IE6 |
div {
background: #ff0000 !important; /* для всех браузеров */
background: #000; /* для IE6 */
}
|
| *:first-child+html | IE7 |
div {
background: #ff0000;
}
*:first-child+html div {
background: #000;
}
|
| *+html | IE7+ может понять Opera 9 и ниже |
div {
background: #ff0000;
}
*+html div {
background: #000;
}
|
| html>body | поймут все кроме IE6 |
div {
background: #ff0000;
}
html>body div {
background: #000;
}
|
| #ie#fix | поймут все кроме IE8 |
div {
background: #ff0000; /* для ie8 */
}
div, #ie#fix {
background: #000; /* для остальных браузеров */
}
|
| Не проходят валидацию (не рекомендуемые) | ||
| _свойство: значение и -свойство: значение |
IE6 |
div {
background: #ff0000; /* для всех браузеров */
_background: #000; /* для IE6 */
}
|
| *свойство: значение и //свойство: значение |
IE6 IE7 |
div {
background: #ff0000; /* для всех браузеров */
*background: #000; /* для IE6 и IE7 */
}
|
| html* | IE6 IE7 Chrome Safari |
div {
background: #ff0000;
}
html* div {
background: #000;
}
|
| !ie | IE6 IE7 |
div {
background: #ff0000; /* для всех браузеров */
background: #000 !ie; /* для IE6 и IE7 */
}
|
Хаки для Firefox |
||
| Не проходят валидацию (не рекомендуемые) | ||
| FF 1.5+ Opera 9.6 update: - неактуально (понимают новые версии opera, chrome, safari)
|
div {
background: #ff0000;
}
html:root div {
background: #000;
}
|
|
| x:-moz-any-link |
FF 1.5+ IE7 |
div {
background: #ff0000;
}
div, x:-moz-any-link {
background: #000;
}
|
| @-moz-document url-prefix() | FF 1.5+ |
div {
background: #ff0000;
}
@-moz-document url-prefix() {
div {
background: #000;
}}
|
Хаки для Opera |
||
| Проходит валидацию | ||
| html:first-child | Opera 7-9.01 |
div {
background: #ff0000;
}
html:first-child div {
background: #000;
}
|
| Не проходят валидацию (не рекомендуемые) | ||
проходит валидацию CSS3 |
Opera 9-9.6
update - не актуально (понимается новыми версиями ff, chrome, safari)
|
div {
background: #ff0000;
}
@media all and (min-width:0) {
div {
background: #000;
}}
|
| html>/**/body noindex:-o-prefocus, html>/**/body | Opera 9.5-10 |
html>/**/body noindex:-o-prefocus, html>/**/body p {
color:#0f0
}
|
Хаки для Chrome и Safari |
||
| Не проходят валидацию (не рекомендуемые) | ||
|
|
update - не актуально (понимается новыми версиями opera, ff, safari, chrome)
|
div {
background: #ff0000;
}
body:nth-of-type(1) div {
background: #000;
}
|
update - не актуально (понимается новыми версиями opera, ff, safari, chrome) |
div {
background: #ff0000;
}
html:root*div {
background: #000;
}
|
|
| html* |
Safari Chrome IE6 IE7 |
div {
background: #ff0000;
}
html*div {
background: #000;
}
|
Хаки Konqueror |
| Не проходят валидацию (не рекомендуемые) | ||
| html:not(:nth-child(1)) #element |
Konqueror FF 3.5 |
#div {
background: #ff0000;
}
html:not(:nth-child(1)) #div {
background: #000;
}
|
По теме:
- условные комментарии — специальная конструкция, содержимое которой поймет только Internet Explorer
- мета тег X-UA-Compatible — задает режим отображения страниц для IE
- условные СSS