10 г. назад

Как подключить 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 .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
   } 
}