• Главная  
• Вредные советы  
• Как подключить CSS для Safari, Internet Explorer, Firefox, Safari, Google Chrome

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