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