При использовании семантической верстки каждый разработчик обязательно столкнется с проблемами кроссбраузерности, для решения которых в большинстве случаев приходится использовать так называемые «хаки». Обычно под этим термином подразумевается особый способ написания селекторов или правил, понимаемый только конкретным браузером. Однако совместимость с CSS в большинстве браузеров уже достигла уровня, при котором следует ограничивать использование «хаков».
Как правило, основным источником неприятностей бывает Internet Explorer. Многообразие ошибок в реализации CSS в браузерах Microsoft удивляет даже самых опытных верстальщиков. В связи с этим возникают ситуации, когда необходимо использовать дополнительные или альтернативные правила для IE. Именно в таких случаях рекомендуется применять «хаки». Если же вам вдруг понадобились альтернативные правила, скажем, только для Firefox, то рекомендуется пересмотреть ваш код, и в 99% случаев вы найдете более элегантное решение.
CSS-хаки для браузера Opera
*|html[xmlns*=""] .style {
background: #F00;
}
html:first-child .style {
background: #F00;
}
CSS-хаки для браузера FireFox
@-moz-document url-prefix() {
.style {background: #F00;}
}
CSS-хаки для браузера Internet Explorer 6.0 и ниже
.style {
_background: #F00;
}
* html .style {
background: #F00;
}
CSS-хаки для браузера Internet Explorer 7.0
*+html .style {
background: #F00;
}
html>body .style {
*background: #F00;
}
CSS-хаки для браузера Safari
body:last-child:not(:root:root) .style {
background: #F00;
}
html[xmlns*=""] body:last-child .style {
background: #F00;
}
Для Internet Explorer существует альтернативное решение — conditional comments (условные комментарии). Данная технология поддерживается в Internet Explorer, начиная с пятой версии, тем самым охватывая все интересующие нас браузеры. Ниже приводится пример использования условных комментариев:
<link href="style.css" rel="stylesheet" type="text/css" media="all" /> <!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->
Первой строкой идет обычное подключение CSS-файлов, однако вторую строку, увидят, а следовательно и подгрузят css-файл только браузеры семейства Internet Explorer. Происходит это благодаря условию, заложенному в условном комментарии — if IE. Данное условие означает «если Internet Explorer» и Explorer’ы версии пять и выше прочитают код, находящийся внутри комментария и интерпретируют его.
Таким образом все наши хаки можно вынести в отдельный файл.
И еще раз позволю себе повториться. Время IE6 подходит к концу, и на сегодняшний день практически все современные браузеры отображают валидный код вполне адекватно. Поэтому, в случае возникновения проблем с отображением страницы в каком либо браузере, прежде чем прибегать к хакам, просмотрите заново свой код, поэкспериментируйте, поищите информацию в интернете, и скорей всего ненужных хаков можно будет избежать, добившись таким образом абсолютной валидности вашего кода.
