Универсальные CSS-хаки для браузеров

Published: 07.06.2011

Опишу еще раз всем известные и 100500 раз описанные раньше хаки для разных браузеров.

Приведу определение хака с сайта Влада Мержевича htmlbook.ru: «Хаком называется набор приемов, направленных на то, чтобы для одного браузера задать стиль определенного элемента, который бы отличался от стиля для других браузеров.»

Прежде всего меня интересовали актуальные работающие решения, поэтому все примеры я проверял в самых последних, кроме IE, версиях браузеров (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Самый «непохожий» на другие браузер. Причём, каждая версия «непохожа» по-своему. Впрочем, примем действительность, как она есть. А действтиельность такова, что хаков для разных версий IE при вёрстке необходимо достаточное количество, чтобы поместить их в отдельный файл и загружать только для этого семейства браузеров. Для этого в секции <head> HTML-документа напишем комментарий, который умеет распознавать Internet Explorer.

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

В качестве условия можно использовать следующие ключевые слова:

  • IE — любая версия браузера Internet Explorer;
  • IE 7 — Internet Explorer 7;
  • IE 8 — Internet Explorer 8;
  • IE 9 — Internet Explorer 9;
  • lt — номер версии браузера меньше указанной;
  • gt — номер версии больше указанной;
  • lte — номер версии меньше или равен указанной;
  • gte — номер версии браузера больше или равен указанной.

Пожалуй, отдельно отмечу ещё хак для IE 7: звёздочка перед именем селектора. Например:

#example {
  color: green;
  *color: red;
}

Chrome и Safari

Хак для браузеров на основе движка webkit — Chrome и Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #example {
    color: red;
  }
 
}

Firefox

@-moz-document url-prefix() {
  #example {
    color: red;
  }
 
}

Opera

Для Оперы универсальных хаков нет! Да, конечно, в сети можно найти хаки для Оперы, но, увы, эта инфорация немного устарела. Был когда-то хак, да весь вышел:

@media all and (min-width:0px) {

    #example { color: red; }
}

Хм, если для всех браузеров хаки есть, а для Оперы — нет, напрашивается логический вывод: сначала надо верстать под Оперу, а затем шлифовать вёрстку для других браузеров. Как вы на это смотрите?

UPD 09.08.11: Последние сводки с фронтов: на Хабре нашёлся хак для Оперы. Вот такой:

@media all and (-webkit-min-device-pixel-ratio:10000),
not all and ( -webkit-min-device-pixel-ratio : 0 ) {
    #example { color: red; }
}

Однако же, крайне не рекомендую его использовать. Приведу в качестве аргумента комментарий Вадима Макеева (aka Pepelsbey): "Эти хаки основаны на неполной или ошибочной поддержке Media Queries и могут сломаться с любым минорным обновлением браузера, которое исправит или дополнит поддержку. Не стреляйте себе в ногу, не используйте потенциально опасные хаки". Что, собственно, и произошло с первым хаком для Оперы, упомянутом в этой статье.

Исходя из этого, по-прежнему считаем, что самый лучший хак для браузера Opera - грамотная, валидная вёрстка.