Любой, кто занимался Web-дизайном , сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer , особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользова...
Любой, кто занимался Web-дизайном, сталкивался с такой проблемой: когда все браузеры нормально отображают стиль, применённый к странице, и только один "гадёныш" уродует страницу. Чаще всего этим "гадёнышем" становится браузер Internet Explorer, особенно 6-я версия и ниже, которыми пользуются примерно 7-8% пользователей Интернета. Согласитесь, что это весьма много, чтобы просто так на них забить. Хотя и другие браузеры (даже современные) иногда показывают сюрпризы. Поэтому для того, чтобы любой браузер правильно отображал Вашу страницу и были придуманы CSS хаки.
CSS хак - это специальный синтаксис стиля CSS, который понимает только один определённый браузер. Причём CSS хаки даже часто различаются для разных версий одного браузера.
Однако, прежде чем перейти к CSS хакам, хочется рассказать о другом способе разделения стилей, который более предпочтителен: с использованием PHP или JavaScript, в которых мы можем определить тип и версию браузера, и уже, в соответствии с этим, подключать соответствующий файл стилей. Данный способ рассматривать не будем, так как для того чтобы понять его, необходимо иметь минимальный набор знаний по этим языкам.
Ещё один способ связан с тем, что главным "дезертиром", как правило, является IE. Поэтому для него придуман отдельный способ, даже без использования скриптов. Заключается он в условных комментариях в голове документа (внутри тега <head>). Работает он только для браузеров IE, но, как правило, с ними и бывают проблемы, поэтому данный способ можно встретить очень часто. Выглядит он таким образом:
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE, то подключить таблицу стилей из файла css/ie.css".
Если необходимо указать конкретную версию браузера, то вместе с "IE" необходимо поставить ещё и номер версии. Например так:
<!--[if IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6. Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:
<!--[if lt IE 6]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<![endif]-->Данный стиль будет применён для всех версий браузеров IE ниже 6-ой версии. Если бы вместо "lt" поставили "lte", то это бы означало ниже или эквивалентно 6-ой версии.
В большинстве случаев, данных знаний уже достаточно, и надо стараться, чтобы не требовалось большего. Однако, существуют ситуации, когда данные способы не совсем разумны. Например, при ситуации, когда в огромном CSS файле, всего лишь 1-2 стиля нуждаются в особенном виде для отдельных браузеров. Глупо в таком случае создавать отдельный огромный файл, который потом подключать через скрипты или через такие условия. Вот поэтому и были придуманы CSS хаки для браузеров, к которым мы сейчас и переходим. И начнём мы с:
1) Internet Explorer. Данный CSS хак работает для версий IE7 и ниже. Как показывает мой опыт, браузер IE8 уже очень приличный, поэтому с ним у меня ещё проблем не возникало. А вот для браузеров IE7 и ниже показываю хак:
p {
margin-top: 20px; # Для всех браузеров
* 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[xmlns*=""] p {
margin-top: 30px;
}Здесь я думаю, что также всё понятно.
Вот и всё, что хотелось написать в этом материале. Однако, ещё раз напоминаю, что CSS хаки - это плохо, очень часто они не проходят при проверке валидности кода, а это уже не есть хорошо. В общем, старайтесь их не использовать при создании сайта или использовать только в самом крайнем случае. А, вообще, стоит Вам ознакомиться с основами CSS, тогда у Вас будет меньше проблем, связанных с разным представлением стилей у браузеров.
