Хаки для браузеров
Сегодня мне хотелось бы поговорить о так называемых «css-хаках». CSS-хаки используют тогда, когда один конкретный браузер надо заставить отображать некий блок разметки не так, как хотелось бы самому браузеру. Сразу оговорюсь, что использовать хаки нужно только тогда, когда это действительно необходимо. Скажем, всеми нами горячо любимый Internet Explorer (седьмой версии) имеет свои, сугубо специфичные представления о работе со списками. И иногда надо только ему объяснить, что он неправ:-)
Вообще задача раздельных CSS для разных браузеров имеет несколько путей решения. Один из них — встроить в <head></head> php-, или java-скрипт, определяющий тип браузера, и отсылающий конкретный браузер к предназначенной для него стилевой таблице. Второй — если проблемы возникают только с IE — так называемые «условные комментарии». В <head></head> задается конструкция вида:
или для конкретных версий 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-
Например:
.style {background: #F00;}
}
css-rule, x:-moz-any-link{
}
Для Opera:
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 и с высокой долей вероятности можно предполагать, что если ваша верстка нормально выглядит в Опере, то и в Хроме с Сафари с нею тоже все будет нормально. Однако, на всякий случай, хаки:
background: #F00;
}
Ну, и наконец, хак для IE. Почему только один? По опыту решения конкретных задач могу сказать, что все проблемы верстки, с которыми мне приходилось сталкиваться, были одинаковыми у наиболее распространенных версий IE (6,7). Поэтому я пользовался (если пользовался) универсальным хаком, так называемым «holy hack»:
background: #f00; (это понимают все браузеры)
* background: #0f0; (а это только ослики)
}
Напоследок напомню, что практически все хаки влияют на валидность полученного кода, поэтому, если есть возможность – надо обходиться без них. А такая возможность есть почти всегда, и исключение составляет только горячо любимый всеми нами Internet Explorer:-)
В тему:
Хаки под любой браузер и операционную систему
http://divhack.com/node/14
Этот долбаный ИЕ уж слишком стандартизирован и подойти к нему с помощью каких то хаков почти невозможно. По этому нужно писать правыльние страницы и делать правильную верстку веб-сайта.
collaps, February 11, 2012 3:46 pm
collaps, вы перевернули все мои представления о верстке) Если уж какой браузер не соответствует стандартам, так это ie. Для него даже официальные хаки существуют – Conditional comments. Учите матчасть )
sordes, February 11, 2012 9:53 pm
Коллапс, думается мне, просто пиарится. Он много камментов оставил в блоге, но так как они все – более или менее в тему,то я решил не считать их спамом.
Вячеслав Гринин, February 12, 2012 8:55 pm
Решил посмотреть его сайт. Сломался на слове “розповсюджуваним”.
sordes, February 12, 2012 10:53 pm