CSS хаки — продолжение
Когда-то давно мы уже писали про CSS хаки, теперь пришло время обновить свои знания свежей порцией приемов для верстки (не совсем красивых, но иногда все-таки нужных).
В заголовках указаны браузеры, к которым применятся хаки.
Google Chrome и Safari 3.1
body:nth-of-type(1) p {
color: #333333;
}
Safari
html[xmlns*=""] body:last-child p {
color: #D50303;
}
Современные браузеры (не IE 7)
html>/**/body p {
color: #CCC;
}
Safari 3.0 и Opera 9
В Сафари добавлено свойство
device-pixel-ratio
, которое определяет как CSS пиксел относится к пикселу устройства вывода. Например, вот так можно подключить файл CSS только для Сафари:
<link rel="stylesheet" media="screen and min-device-pixel-ratio: 0" href="safari3.css"/>
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {
color: #00ff00;
}
}
А вот такую запись воспримет и Safari 3.0, и Opera 9.
IE под Маком
/**//*/
селектор {
свойство: значение;
}
/**/
Opera < 9.5
@media all and (min-width: 0px) {
html:first-child селектор {
свойство: значение;
}
}
Firefox 1-2
@-moz-document url-prefix() {
свойство: значение;
}
Заключение
Все хаки мы выкладываем для развития кругозора и ни в коем случае не призываем вас их использовать. Старайтесь верстать без них ;-)
Рекомендуем почитать