Пишем стили для определенных браузеров

Автор: Cake_Seller

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

var cssFix = function(){
  var u = navigator.userAgent.toLowerCase(),
  addClass = function(el,val){
    if(!el.className) {
      el.className = val;
    } else {
      var newCl = el.className;
      newCl+=(" "+val);
      el.className = newCl;
    }
  },
  is = function(t){return (u.indexOf(t)!=-1)};
  addClass(document.getElementsByTagName('html')[0],[
    (!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)
      :is('firefox/2')?'gecko ff2'
      :is('firefox/3')?'gecko ff3'
      :is('gecko/')?'gecko'
      :is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1
      :is('konqueror')?'konqueror'
      :is('applewebkit/')?'webkit safari'
      :is('mozilla/')?'gecko':'',
    (is('x11')||is('linux'))?' linux'
      :is('mac')?' mac'
      :is('win')?' win':''
  ].join(" "));
}();

Теперь у нас в распоряжении есть дополнительные css селекторы, а именно ОС и браузер. То есть, конструкция будет выглядеть так:

.[ОС].[Браузер] css селектор

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

.win - Windows
.mac - MacOS
.linux - Linux

Селекторы браузеров:

.ie - все версии ИЕ
.ie8 - ИЕ 8.х
.ie7 - ИЕ 7.x
.ie6 - ИЕ 6.x
.ie5 - ИЕ 5.x
.gecko - все версии фаерфокса, и остальные гекко-браузеры
.ff2 - фаерфокс 2
.ff3 - фаерфокс 3
.opera - все версии оперы
.opera8 - опера 8.x
.opera9 - опера 9.x
.konqueror - konqueror
.safari - сафари

Таким образом если мы хотим применить стили только для Opera 8 под Windows, то мы сделаем это вот так: .win.opera8 селектор { /* свойства */}.

Пример работы скрипта

Опубликовано 11.07.2008 в 1:41 пп в рубриках: Верстка.

Отзывов (4) на «Пишем стили для определенных браузеров»

rotor в 15.07.2008 at 7:14 пп

А смысл?
По большему счёту, при верстке требуется только корректировка определенных стилей под особенности разных браузеров.

А что делать если у пользователя отключена поддержка js? Нужен дефолтный стилевой лист, который опять же должен нормально работать везде.

Не вижу смысла в данном подходе, если только вы не хотите подсовывать каждому браузеру новый дизайн сайта…
Cake_Seller в 16.07.2008 at 5:38 пп

2 rotor

По большему счёту, при верстке требуется только корректировка определенных стилей под особенности разных браузеров.

В таком случае мне интересно как вы осуществляете эту корректировку?

Конкретный пример при котором может пригодиться этот скрипт: сталкивался с такой проблемой когда Opera и Firefox по разному позиционируют чекбоксы (разница в расположении всего-то пару пикселей, но все равно в глаза бросается и возникает огромное желание поправить, и увы без яваскриптов тут не обойтись).

А что делать если у пользователя отключена поддержка js?

Таких пользователей единицы. Текущее положение дел такое, что при отключенных яваскриптах большинство крупных сервисов и сайтов не смогут работать полноценно. И человек отключающий JS, мне кажеться, понимает это. Если человек осуществляет навигацию с отлюченными яваскриптами, то это пожалуй его проблемы, а не проблемы разработчиков.
Степан Резников в 18.09.2008 at 12:40 пп

Думаю, для фикса каких-то диких непонятных багов данный подход можно применять, т.е. в самом безвыходном случае, когда другие средства не помогли. Мне хватает фиксов для IE через conditional comments, а для остальных браузеров хаков избегаю.
Zodios в 26.10.2008 at 12:06 пп

Мне кажется этот способ можно использовать в небольших проектах где нету большой нагрузки на сервер. В прочих случаях лишний джава файл создает ненужный трафик.

css-html.org