Как подключить CSS для Safari, Internet Explorer, Firefox, Safari, Google Chrome
При верстке шаблона, наткнулся на пару неприятных вещей. Не могу добиться кроссбраузерного отображения вида маркированного списка. Благо, интернет — великая вещь, который подарил ответ на данный вопрос.
Итак, как это делать — подключать стили CSS для каждого браузера?
Internet Explorer любой версии
Первое решение — это, конечно, Conditional Comments (Условные комментарии). Об этом хорошо написано на сайте wikipedia.org. Чтобы правило работало, прописываем в конце каждого определения !important.
Приведу пример для наглядности:
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/cssf-ie6.css" type="text/css"></link>
<![endif]--> Второе решение — это хаки. Приведу пример. Оба варианта валидны. И удобнее всего использовать:
* html .box {
height : 300px
} /* Только IE6 */
*+ html .box {
height : 300px
} /* Только IE7 */ Opera >9
Тут тоже два решения. Первое с использованием javascript, второе — снова хаки. Предпочитаю как можно реже использовать javascript, поэтому сам выбираю второй пункт. Прописываешь прямо в CSS. Но, к сожалению, этот хак коснется и Safari.
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.box {
background: #F00
}
}Safari и Google Chrome
@media all and (-webkit-min-device-pixel-ratio:0) {
.box {
color: red; /* для Chrome и Safari */
}
}Firefox
Здесь нечего писать. Так как он для меня и других правильнее всех рендерит HTML, я просто беру его за основу. Делаю верстку для него. А потом уже отталкиваюсь и делаю поправки на другие браузеры.
Но все равно бывают затыки, против которых не попрешь. Например, в лисе проблемы с вертикальным выравниванием в полях ввода текста. Чтобы бороться с ними, прописываем так:
@-moz-document url-prefix() {
.box {
background: #F00
}
} Больше возможностей для подключения стилей для определенных браузеров можно найти на stackoverflow.com
