Хаки для браузеров
Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида:
<!–[if IE]><link rel=”stylesheet” href=”css/ie.css” type=”text/css” media=”screen” /><![endif]–>
или для конкретных версий Explorer’а:
<!–[if IE7]><link rel=”stylesheet” href=”css/ie7.css” type=”text/css” media=”screen” /><![endif]–>
<!–[if IE6]><link rel=”stylesheet” href=”css/ie6.css” type=”text/css” media=”screen” /><![endif]–>
И, наконец, третий путь — CSS-хаки.
Самый удобный в плане хаков браузер – Firefox (и относящиеся к его семейству), так как имеет свою группу css-классов, начинающуюся с перфикса @-moz-
Например:
@-moz-document url-prefix() {
.style {background: #F00;}
}
css-rule, x:-moz-any-link{
}
Для Opera:
@media all and (-webkit-min-device-pixel-ratio:10000),
not all and (-webkit-min-device-pixel-ratio:0) {
.style {background: #F00;} /* только для Opera */
}
html:first-child {} /* только для Opera */
html:first-child .style {
background: #F00; /* только для Opera < 9.5 */
}
Также, можно создать специальный файл стилей для Opera и подключить его следующим образом:
<head>
<link rel=”stylesheet” href=”css/opera.css” type=”opera/css” media=”screen” />
</head>
Google Chrome и Safari по способу работы с блочной моделью напоминают Opera и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:
body:last-child:not(:root:root) .style {
background: #F00;
}
Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:
html {
background: #f00; (это понимают все браузеры)
* background: #0f0; (а это только ослики)
}
Напоследок напомню, что практически все хаки влияют на валидность полученного кода, поэтому, если есть возможность – надо обходиться без них. А такая возможность есть почти всегда, и исключение составляет только горячо любимый всеми нами Internet Explorer:-)
Добавить комментарий