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.
- Esegue dei test per oltre 20 proprietà, il tutto in pochi millesimi di secondo;
- Crea un oggetto Javascript (denominato Modernizr) che, attraverso valori booleani, contiene il risultato dei test precedenti per ogni proprietà;
- 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.
Come utilizzare Modernizr
Una volta incluso il file .js, il lavoro va fatto essenzialmente a livello di foglio di stile.
Vediamo ora alcuni esempi di utilizzo della libreria con le proprietà dei CSS3 al momento più diffuse. Mi limiterò ad alcuni esempi in quanto il funzionamento è molto simile anche per gli altri casi. Per una completa visione di tutte le proprietà gestite da Modernizr con relativi esempi vi rimando alla documentazione ufficiale.
Il funzionamento di Modernizr è simile per tutte le proprietà. Per ciascuna proprietà abbiamo due classi che gestiscono il supporto o il mancato supporto. Lo pseudo-codice utilizzato ad inizio articolo (if ... else ...) viene quindi implementato nel foglio di stile con un codice simile al seguente:
.property object { /* se la proprietà è supportata */ }
.no-property object { /* se non è supportata */ }@font-face
E' sicuramente una delle proprietà più importanti dei CSS3. Ci consente di importare nei nostri progetti anche font non web-safe e non presenti sul computer dell'utente senza essere costretti ad utilizzare immagini con il testo. Vediamo il codice necessario per utilizzarla:
@font-face {
font-family: 'Kingthings';
src: url('Kingthings.eot');
src: local('Kingthings'),
url('Kingthings.ttf') format("truetype");
}
.fontface h1 {font: 40px Kingthings, sans-serif;}
.no-fontface h1 { background: url('kingthings.png') no-repeat; }Si osservino le classi .fontface e .no-fontface. La prima sarà applicata nei browser che supportano la proprietà, la seconda sugli altri.
Il risultato sui browser che supportano il font-face sarà così il seguente:
Figura 1 - Utilizzo @font-face
Trasparenza rgba()
rgba() è una caratteristica dei CSS3 per la gestione del colore. E' molto simile alla più comune modalità rgb() con l'aggiunta di un parametro alpha. L'ultimo parametro infatti ci consente di impostare l'opacità del colore. Il codice sarà il seguente:
.rgba div { background-color: rgba(255,255,255, .5) }
.no-rgba div { background-color: #ccc; }border-radius
Il border-radius è sicuramente la proprietà più famosa e utilizzata dei CSS3. Sono numerosissimi gli hacking presenti sul web che consentono a questa tecnica di essere cross-browser, ma per applicare angoli arrotondati ad un elemento è certamente la modalità più diretta. Firefox e Safari usano una sintassi non-compliant ma comunque realizzano l'effetto, mentre Opera e, come ci si attendeva, Internet Explorer non la supportano. Il codice CSS3 necessario alla realizzazione di bordi arrotondati è il seguente:
.borderradius div {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #666;
}
.no-borderradius div {
background: url('border.gif') no-repeat;
}I seguenti screen sono stati realizzati con Google Chrome e Internet Explorer 8. Nella prima immagine quindi viene richiamata da Modernizr la classe borderradius, nella seconda invece viene richiamata la seconda classe che provvede a caricare un'immagine di background alternativa.
Figura 2 - Screenshot di Google Chrome
Figura 3 - Screenshot di IE8
Ecco l'esempio. Analizzando il codice si potrà apprezzare al meglio la semplicità che consente un approccio basato su Moderinzr.
Conclusioni
Come detto a inizio articolo e, come si è potuto evincere dagli esempi, Modernizr non aggiunge nessuna funzionalità ai vari browser ma, semplicemente, ci aiuta nella realizzazione di layout cross-browser in cui iniziare a mettere a frutto le potenzialità offerte dai CSS3 (torneremo magari in un altro articolo sul versante HTML5). Tale libreria quindi è sicuramente un validissimo aiuto e, forse un incentivo, ad utilizzare sempre più queste tecniche.
