Пишем кроссбраузерный CSS при помощи JavaScript

Для совместимости стилей в разных браузерах, часто приходится использовать разные хаки, вроде этих:

*width: 200px;
_width: 240px;

Таким образом, я указываю ширину для Internet Explorer (первая строка) и конкретно для IE 6 (вторая строка). Совсем недавно я нашел один замечательный скрипт - CSS Browser Selector, с помощью которого можно писать удобочитаемые хаки практически для всех браузеров и операционных систем. Кроме того, можно также писать стили отдельно для сайтов, где разрешен JavaScript и где он выключен.

Пример:

<style type="text/css">
.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }
</style>

Согласитесь, такие стили гораздо понятней, чем упомянутые мною в первом примере. В общем виде правило выглядит следующим образом:

.[os].[browser] .mylink { font-weight: bold; }

В начале идет класс с названием операционной системы, за ним класс броузера без пробела, а потом уже ваш селектор.

Полный список классов операционных систем:

• win - Microsoft Windows
• linux - Linux
• mac - Mac OS

Полный список поддерживаемых браузеров:

• ie - Internet Explorer (все версии)
• ie8 - Internet Explorer 8.x
• ie7 - Internet Explorer 7.x
• ie6 - Internet Explorer 6.x
• ie5 - Internet Explorer 5.x
• gecko - Mozilla, Firefox (все версии), Camino
• ff2 - Firefox 2
• ff3 - Firefox 3
• opera - Opera (все версии)
• opera8 - Opera 8.x
• opera9 - Opera 9.x
• konqueror - Konqueror
• webkit или safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
• chrome - Google Chrome

Кроме того есть екстра класс .js - для указания отдельных стилей при включенном JavaScript.

Ну и конечно же, чтоб все это заработало, нужно подключить сам скрипт (весит меньше 1 килобайта):

<script src="css_browser_selector.js" type="text/javascript"></script>

Страница проекта