Regole ad hoc con CSS Browser Selector

Non so se è una genialata o una delle tante cose che lasciano il tempo che trovano (potrebbe anche essere in effetti un'inutile genialata...).

Parliamo di CSS Browser Selector una piccola libreria Javascript (appena 1kb) che potete scaricare da Github. Cosa fa? Semplice. Visualizzate la pagina ufficiale, date un'occhiata al codice HTML con Firebug, il Web Inspector di Safari/WebKit o altri strumenti simili per IE oppure Opera, in particolare all'elemento html. Noterete la presenza di una serie di classi: sono aggiunte, appunto, dalla libreria e nell'ordine indicano il motore di rendering del browser, il browser stesso, il sistema operativo, il supporto di Javascript. Ecco come si presenta sul mio Safari:

class="webkit safari mac js"

Ed ecco su Firefox:

class="gecko ff3 mac js"

Facile a questo punto capire cosa si può fare nei CSS. Sfruttando i selettori si possono a questo punto creare regole ad hoc per ogni singolo browser tra quelli supportati dalla libreria e anche per sistema operativo. Vogliamo uno sfondo giallo su Opera per Mac? Ecco come si fa:

text message snooping
.mac.opera body {background: yellow}