Xiper

CSS хаки

Автор: Евгений Рыжков Дата публикации:

Хак — специальная CSS конструкция, которую понимают одни браузеры и игнорируют другие. Использование хаков часто говорит о непрофессиональности верстальщика. Но встречаются случаи, когда хак — единственный способ решения проблемы (например общеизвестные баги браузеров (см «Глюки браузеров»)). Не стоит так же забывать, что в наше время спешка — обычное явление. Посему сроками «на вчера» — никого не удивишь. Вот и нет времени разбираться почему не выходит так как хочется.

Плюс хаков

Это быстрое решение проблемы. Прописали дополнительных строчек и все отлично, верстаем дальше.

Недостатки хаков
  1. Нет уверенности как поведет себя сайт с выходом новых версий браузеров. Например, написали код с хаком для Firefox, через месяц выходит новая версия Safari и оказывается она тоже воспринимает этот хак! Приходится переделывать.
  2. Многие хаки не проходят валидацию — опасность этого описана в предыдущем пункте.

По возможности старайтесь избегать использования хаков. Для исправления ошибок 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
Не проходят валидацию (не рекомендуемые)
html:root 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;
}
Не проходят валидацию (не рекомендуемые)
@media all and (min-width: 0)
проходит валидацию 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
Не проходят валидацию (не рекомендуемые)
body:nth-of-type(1)
update - не актуально (понимается новыми версиями opera, ff, safari, chrome)
div {
background: #ff0000;
}
body:nth-of-type(1) div {
background: #000;
}
html:root*
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;
}

По теме: