Purtroppo tutti sappiamo che, spesso, i CSS validi per un browser non lo sono per un altro, con il risultato che dobbiamo adottare soluzioni più o meno fantasiose per creare siti che si vedano correttamente sulle diverse piattaforme. Proprio oggi ho dovuto affrontare nuovamente questo problema e, dopo aver girato un po’ su Internet alla ricerca di una soluzione “elegante”, sono incappato nel progetto CSS Browser Selector: si tratta di una piccola funzione Javascript che, una volta aggiunta al proprio sito, consente di creare CSS condizionali utilizzando una sintassi molto semplice. Ad esempio:
<style type="text/css">
.example {
width: 100px;
height: 100px;
}
.ie .example {
background-color: yellow
}
.gecko .example {
background-color: red
}
</style>In questo caso, la classe example definisce le dimensioni 100x100, che sono valide per tutti i browser. Successivamente, con l’indicazione .ie .example, si specifica che, nel caso di Internet Explorer, lo sfondo deve essere giallo, oppure rosso per Firefox (identificato da gecko). Alla pagina http://rafael.adm.br/css_browser_selector/ sono comunque disponibili i codici per tutti i browser supportati.