CSS  »  Articoli  »  CSS 3 

Modernizr è una libreria Javascript che sta sempre più attirando l'interesse dei web designer. È una libreria che aiuta nella realizzazione di layout web in base al supporto o meno dei CSS3 e di HTML 5 sul browser con cui naviga l'utente.

In parole meno complicate ci consente di realizzare una sorta di pseudo-codice come il seguente:

if (il browser supporta questa proprietà) {
  //usa questa proprietà
} else {
  //non usare questa proprietà ma una alternativa
}

In pratica, Modernizr verifica il supporto o meno di una determinata caratteristica CSS3 definita nel foglio di stile e, se il browser la supporta, la applica; se invece non la supporta, viene applicata una proprietà alternativa e specifica, sempre definita nel foglio di stile.

Non è quindi una libreria invasiva che realizza bordi arrotondati, opacità o quanto altro, ma semplicemente ci consente di applicare una determinata classe ad un oggetto se il browser supporta una determinata proprietà CSS3 o di applicare una classe alternativa in caso contrario. Quindi si presuppone che per utilizzare tale libreria si abbia solo una conoscenza dell'ultima versione di CSS.

Nel momento in cui scriviamo Modernizr supporta le seguenti proprietà:

• @font-face
• Canvas
• Canvas Text
• HTML5 Audio
• HTML5 Video
• rgba()
• hsla()
• border-image
• border-radius
• box-shadow
• Multiple backgrounds (sfondi multipli)
• opacity
• CSS Animations (animazioni)
• CSS Columns (layout multicolonna)
• CSS Gradients (gradienti)
• CSS Reflections (effetto riflesso)
• CSS 2D Transforms (trasfomazioni bidimensionali)
• CSS 3D Transforms (trasformazioni tridimensionali)
• CSS Transitions (transizioni)
• Geolocation API
• Input Types (nuovi tipi di input per i form definiti in HTML5)

Come lavora Modernizr

Contrariamente a quanto si possa pensare, Modernizr non utilizza la tecnica dello UA Sniffing per determinare il supporto dei browser; la libreria invece si basa su diverse tecniche più affidabili.

1. Esegue dei test per oltre 20 proprietà, il tutto in pochi millesimi di secondo;
2. Crea un oggetto Javascript (denominato Modernizr) che, attraverso valori booleani, contiene il risultato dei test precedenti per ogni proprietà;
3. Aggiunge le classi agli elementi HTML in base al supporto nativo o meno delle proprietà.

Per molti dei test, Modernizr crea un elemento a cui assegna una determinata proprietà e verifica cosa risponde il browser. Se il browser interpreta correttamente la proprietà restituirà dei valori, se non la supporta restituirà un valore nullo o indefinito.

Come installare Modernizr

L'installazione della libreria è molto semplice. Ovviamente il primo step è scaricare la libreria dalla home page del sito ufficiale. Includiamo poi nel nostro progetto il file .js e, se vogliamo verificare che la libreria funzioni correttamente, possiamo richiamare un alert come il seguente:

alert( Modernizr );

Se l'alert restituisce un Object allora tutto funziona correttamente, se invece restituisce undefined o non viene visualizzato c'è qualche problema.

Altri articoli

Altre guide

Altre newsletter