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