11ОктОпределитель (селектор) браузера с помощью CSS

CSS browser selector (определитель браузера с помощью CSS) – это маленькая JS-библиотека, которая определит User-Agent браузера для написания специфических классов CSS для того или иного браузера.

Git: git://github.com/rafaelp/css_browser_selector.git
Либо забирать здесь: http://github.com/rafaelp/css_browser_selector/blob/master/css_browser_selector.js

1. Вставить строку в заголовок страницы, внутри тэга HEAD:


2. Установить атрибуты классов для нужных браузеров и ОС, например:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> без пробелов между .[os] и .[browser]

Коды ОС [os]:
win – Microsoft Windows
linux – Linux (x11 и linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
webtv – WebTV
mobile – J2ME (напр.: Opera mini)

Коды браузеров [browser]:
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
ff3_5 – Firefox 3.5 new
opera – Opera (все версии)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
webkit или safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
chrome – Google Chrome
iron – SRWare Iron

Допольнительный код:
js – доступен, когда java-script включен, так что можно скрывать/отображать нужное

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

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 }
Спонсоры: Продаётся пальто мужское! Пальто - модная мужская классика! Покупайте в Бердске! . Специально для вас раскрутка сайта в Донецке? Обращайтесь! . Долговечная мебель киев доставка по Украине