CSS User Agent: Regole CSS per ogni browser


CSS User Agent è una libreria JavaScript che ti permette di controllare e assegnare stili CSS per ogni tipo di browser, utilizzando questa libreria potrai evitare di usare commenti condizionali per IE, filtri e hack per risolvere problemi e bug oppure utilizzare altri escamotage non del tutto supportati come le media-queries.

Come funziona CSS User Agent?
Dopo aver scaricato e correttamente incorporato la libreria nella pagina web CSS UA creerà delle classi tramite l’attributo class="" all’interno del tag html, ecco un esempio di quelle che crea visitando una pagina web con il browser Safari versione 5:

<html class=" ua-webkit ua-webkit-533 ua-webkit-533-18 ua-webkit-533-18-1 
ua-safari ua-safari-5 ua-safari-5-0 ua-safari-5-0-2 js">
<head></head>
<body></body>
</html>

Le calssi inserite nel tag html sono quelle che permettono di creare regole CSS specifiche, per esempio, se durante lo sviluppo di una pagina web scoprissi che usando il browser Safari versione 5 una o più proprietà CSS presentassero dei bug potrei scrivere una nuova che li risolva usando le classi create da CSS UA:

 
ua-safari-5 { ... proprietà CSS per risolvere il problema ...}

Oppure, ancora, se volessi creare delle proprietà per tutti i browser che usano il motore webkit potrei usare la classe ua-webkit o ua-webkit più il numero della versione.

Così CSS UA crea una serie di classi differenti per ogni tipologia di browser.

Questa libreria è complementare a Modernizr, entrambe hanno lo scopo di risolvere lo stesso problema in maniera differente, se CSSUA usa la tecnica browser sniffing per creare classi CSS Modernizr invece identifica le capacità che ogni browser possiede dando la possibilità di creare delle regole di fallback, quale delle due è meglio uare? a te la scelta, entrambe sono una buona soluzione al problema, sappi solo che Modernizr è molto più pesante in termini di KB.

Info sull' autore:
Nato a Bologna, mi occupo della realizzazione grafica e dello sviluppo front-end di siti web e sono il fondatore di questo blog. Se vuoi segnalare qualche problema o hai qualche richiesta particolare invia una mail tramite il modulo contatti.
Leggi gli altri articoli di

Ancora nessuna risposta per CSS User Agent: Regole CSS per ogni browser

Lascia un commento

Trackbacks