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 }

Свойство border-radius в CSS3 позволяет быстро и удобно создавать закругленные уголки в браузерах, которые его поддерживают, т.е. Firefox, Safari и Chrome. Но по какой-то таинственной причине, данное свойство не поддерживается в IE, поэтому для отображения в нем закругленных уголков приходится использовать другие методы, вроде изображений.
Данный быстрый и простой метод с использованием CSS3 и JavaScript позволит использовать закругленные уголки в любом браузере. Этот метод использует бесплатную библиотеку CurvyCorners. Результат будет выглядеть вот так:

Преимущество этого метода в том, что он использует -webkit-border-radius и -moz-border-radius для Firefox, Safari и Chrome и JavaScript для IE и Opera.

В раздел HEAD страницы нужно встроить библиотеку:

Затем используется CSS-класс:

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;

/* Закругление (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

После этого кода добавить еще такой скрипт:

tl, tr, bl, br соответственно означают верхний левый, верхний правый, нижний левый и нижний правый углы.

Если у вас несколько разных CSS-классов (напр., roundedCorners, roundedCorners_1, roundedCorners_2), их можно использовать, изменяя скрипт соответственно:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

Нужную конструкцию заключить в контейнер

...

Результат будет выглядеть так:

Демо-скрипты можно скачать здесь

Источник: #.