Con la diffusione di HTML5, CSS3 3 tutte le tecnologie collegate è nato presto un problema di compatibilità e supporto delle nuove features nei diversi browser.

Se infatti fino ad ora i web developer si dovevano preoccupare delle bizze di IE6 e poco altro (più o meno i siti HTML 4.1 si vedevano per lo più nella stessa maniera sulla maggior parte dei browser più diffusi) il supporto di funzionalità – alcune ancora sperimentali – incluse nello "standard" HTML5 non è per nulla uguale nei diversi browser tanto che alcuni dettagli (pensiamo ai gradienti CSS3) richiedono ancora il prefisso vendor-specific tipo -moz (per Firefox) o -webikt (Chrome e Safari) oppure -o (Opera)

Fortunamente arriva in nostro soccorso, per districarci in questa vera e propria giungla, una libreria JavaScript tanto leggera quanto potente e utile: Modernizr. Questa librerira fa un test della presenza di oltre 20 features HTML5/CSS3, restituendo un oggetto JavaScript e una serie di classi CSS che lo sviluppatore può utilizzare per avere un quadro preciso delle funzionalità supportate dal browser che in quel momento sta navigando le sue pagine.

La lista completa delle features analizzate

Ecco la lista completa (a fine gennaio 2011, versione 1.6) delle funzionalità e features di cui Modernizr verifica la presenza:

  • @font-face
  • Canvas
  • Canvas Text
  • WebGL
  • HTML5 Audio
  • HTML5 Audio formats
  • HTML5 Video
  • HTML5 Video formats
  • rgba()
  • hsla()
  • border-image
  • border-radius
  • box-shadow
  • text-shadow
  • Multiple backgrounds
  • background-size
  • opacity
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • Flexible Box Model
  • CSS Transitions
  • Geolocation API
  • Input Types
  • Input Attributes
  • localStorage
  • sessionStorage
  • Web Workers
  • applicationCache
  • SVG
  • Inline SVG
  • SVG Clip paths
  • SMIL
  • Web SQL Database
  • IndexedDB
  • Web Sockets
  • hashchange Event
  • History Management
  • Drag and Drop
  • Cross-window Messaging
  • Touch Events

Come si usa

In primo luogo, una volta scaricata l'ultima versione della librerira, va inclusa nella nostra pagina così:

  <script src="/js/modernizr-1.6.min.js"></script>

ovviamente indicando il percorso dove abbiamo salvato la libreria.

A questo punto, automagicamente, avremo a disposizione nei nostri script in JavaScript un oggetto

Modernizr

con cui potremo testare la disponibilità o meno delle funzionalità HTML5 o CSS. Ad esempio nel nostro JavaScript possiamo scrivere una cosa tipo:

if (Modernizr.audio) {<br />       // Esegui questo codice solo se il tag <audio> è supportato<br />    }

ed eseguire del codice a seconda del supporto o meno da parte del browser di quella feature (in questo caso, audio).

Classi CSS

Oltre all'oggetto JavaScript Modernizr crea anche una serie di classi per gestire nel nostro CSS lo stile di una pagina in base al supporto o meno di specifiche funzionalità HTML5 e CSS3. Ad esempio, ipotizzando di avere nella nostra pagina HTML un codice così:

<div id="audio"><br />       <audio><br />          <source src="tantopecanta.ogg" /><br />          <source src="tantopecanta.mp3" /><br />       </audio><br />       <button id="play">Play</button><br />       <button id="pause">Pausa</button><br />    </div>

cioè di avere un DIV all'interno del quale c'è un comando <audio>, potremmo avere un CSS di questo tipo:

.no-audio #audio {<br />       display: none; /* Non mostrare il div #audio */<br />    }<br />    .audio #audio button {<br />       /* Mostra ed applica gli stili al div #audio e ai comandi play/pause etc. */<br />    }

che in sostanza dice al browser di non mostrare il DIV se non è supportato il comando <audio>, o invece di applicare gli stili che decidiamo noi se è supportato.

Download e doc

Bene, non resta altro che scaricare la libreria – ecco la URL: http://www.modernizr.com/. La documentazione completa per tutte le features è invece qui: http://www.modernizr.com/docs/

Beta

E' infine proprio di questi giorni l'annuncio della versione beta di Modernizr. La principale novità è che si può decidere in maniera dinamica quali controlli effettuare così da limitare ulteriormente il peso sia della libreria che del JavaScript. Per chi vuole vivere "on the edge": http://modernizr.github.com/Modernizr/2.0-beta/