CSS Browser Selector è un progetto di Rafael Lima reperibile su GitHub.

Si tratta di una piccola libreria Javascript (solo 5kb) che si occupa di identificare il browser che sta visualizzando la pagina (utilizzando lo user-agent come discriminante) e caricare o meno determinate sezioni del foglio di stile.

Forse non si tratterà di un approccio elegante, ma è una soluzione semplice da implementare e soprattutto funzionale. 


Nel readme presente sul repository GitHub è presente un breve esempio che  ne spiega il funzionamento:

<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; }
    .chrome .example { background-color: cyan; }
    .example { width: 100px; height: 100px; }
    .no-js, .no_js, .nojs { display: block; }
    .js { display: none; }
</style>

Dichiarando prima della classe .example un prefisso che identifica il tipo di browser, la libreria si occuperà di caricare quella interessata ignorando le altre.

Attualmente CSS Browser Selector riesce ad identificare:
  • browsers: Firefox; IE; Opera; Safari; Chrome, Konqueror, Iron 
  • browser versions: (most importantly: ie6, ie7, ie8, ie9) 
  • rendering engines: Webkit; Mozilla; Gecko 
  • platforms/OSes: Mac; Win: Win8, Win7, Vista, WinXP, Win2k, WinNT; FreeBSD; Linux/x11 
  • devices: Ipod; Ipad; Iphone; WebTV; Blackberry; Android; J2me; RIM Playbook; mobile (generic) 
  • enabled technology: JS (use in conjunction with <html class="no-js"> for even more granular control) 
  • language detection