Corsi on-line

Sfruttare CSS3 e HTML5 grazie a Modernizr

Quella che vi segnalo oggi è un’interessante libreria javascript grazie alla quale potremo iniziare a sfruttare da subito le novità di CSS3 e HTML5 senza doverci preoccupare della compatibilità con i browser degli utenti (come tutti sappiamo non tutti i browser sono pronti, IE – ad esempio – non ha ancora introdotto il supporto alle nuove versioni dei linguaggi).

Questa libreria si chiama Modernizr ed è già piuttosto conosciuta tra gli sviluppatori grazie, soprattutto, alla sua notevole semplicità di utilizzo. Ma cosa fa Modernizr?
Semplicemente verifica – nel giro di pochi millesimi di secondo- se il browser utilizzato è in grado, o meno, di gestire i nuovi tag dell’HTML5 e le nuove proprietà di CSS3. In caso di risposta negativa offre supporto per fornire “contenuti alternativi” (definiti nel foglio di stile o mediante Javascript).

Una volta scaricata la libreria sarà sufficiente includerla nelle nostre pagine web. Da questo momento potremo lavorare, finalmente, con i nuovi tag dell’HTML5 e le nuove proprietà di CSS3.

Ad esempio potremo utilizzare da subito il nuovo <input type=”date”> previsto da HTML5:

<input type="date" name="birthday" id="birthday">

Al fine di sopperire alle mancanze dei browser non compatibili (che non sono in grado di intepretare il tag) sarà sufficiente aggiungere alla nostra pagina queste poche righe di javascript:

if (!Modernizr.inputtypes.date){
  // if no native support, use a datepicker script
  createDatepicker(document.getElementById('birthday'));
}

Per CSS3 la cosa è ancora più semplice! è sufficiente inserire nel foglio di stile un codice con la definizione della proprietà CSS3 da utilizzare (ad es. .fontface) ed altra proprietà (in questo caso con nome .no-fontface) da utilizzare in caso di mancato supporto alla versione 3 dei fogli di stile. Vediamo un esempio pratico:

@font-face {
   font-family: 'MiaFont';
   src: url('miafont.eot');
   src: local('MiaFont'), 
        url('miafont.ttf') format('truetype');
}
.fontface h1 {
   font: 16px/24px MiaFont, Tahoma, Sans-Serif;
}
.no-fontface h1 {
  background: url('mia_scritta.png') no-repeat;
}

Per l’elenco completo dei tag e delle proprietà supportate si invita a far riferimento alla documentazione ufficiale del progetto.

Post correlati
I più letti del mese
Tematiche