Published: 07.06.2011

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

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

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

Internet Explorer

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



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

  • 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) {


}

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

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 - грамотная, валидная вёрстка.

Любой, кто занимался 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 хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при или использовать только в самом крайнем случае. А, вообще, рекомендую Вам ознакомиться с , тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.

Как известно, не все браузеры одинаково воспринимают файлы стилей css. В основном, проблемы возникают со старыми версиями мелкософтовского творения Internet Explorer (7 версия и ниже). Кстати, если проблема возникает в современных браузерах (наподобие Opera, Mozilla Firefox, Chrome), то я настоятельно рекомендую пересмотреть вёрстку страницы.

Так вот. Проблема с браузерами есть. И я знаю как минимум три способа решения этой проблемы.

Способ 1й. Самый правильный

Стили для браузеров, которые некорректно понимают ваш css, пишутся в отдельном файле. Обычно этим браузером, как я уже говорил, является Internet Explorer , и файлики такие называются fix-ie.css

... ... ...

Меняем имяТемы на реальное название своей темы - и когда вы откроете Internet Explorer версии 7 и ниже - этот файл будет добавлен в общий набор файлов стилей, и даже закэшируется, если кэширование включено.

За версию браузера, к которой будет подключен файл стилей, отвечает вот эта строка: