MoebiusMania

Tutorial, articoli e curiosità sul web e dintorni

Compatibilità cross-browser con Modernizr

Lavorando sul web mi capita spesso di avere problemi di compatibilità tra browser per i Css3. La soluzione? Una libreria Javascript chiamata Modernizr che ci permette di testare la disponibilità delle funzioni html5 e css3 nei vari browsers. In questo modo è possibile creare codice cross browser gestendo le varie eccezioni. Vediamo nel dettaglio come installare questa libreria. Nella pagina di download ,è possibile scaricare la versione development , dove potete scaricare la versione completa ed e estesa della libreria per implementarla secondo le vostre specifiche. Per chi, invece, deve solo testare la compatibilità dei Css3 nel browser , è possibile settare le varie opzioni che la libreria ci offre e generare il nostro codice compresso. Incollate il codice in un file .js esterno e inseritelo nel tag <head> della pagina. Il team di Modernizr consiglia di includere la libreria appena dopo le importazioni Css. [avviso]Nota: Modernizr è scritto in puro Javascript, quindi non è obbligatorio caricare o utilizzare librerie come jQuery o MooTools. [/avviso]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>La tua pagina</title>
  <script type="text/javascript" src="modernizr-latest.js""></script>
 </head>

 <body>

 </body>
</html>

Modernizr supporta i seguenti browsers : IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. Su mobile: iOS mobile Safari, Android WebKit browser, Opera Mobile, Firefox Mobile. Ora avete una libreria javascript che vi dice se la funzione Css3 o Html5 che avete utilizzato viene supportata o meno, lanciate la pagina nel browser e guardando il tag <html> con strumenti sviluppatori di Chrome o Firebug vedrete una cosa di questo tipo:

<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage no-borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
....
</html>

Prendendo come esempio di proprietà da monitorare il border-radius, se il browser la supporta viene applicata al tag <html> la classe "borderradius" altrimenti un'altra di nome "no-borderradius". Dato che i browser vecchi ignorano le proprietà Css3 possiamo applicare border-radius senza problema per stilare, per esempio, un tag <img> e a questo punto per creare una regola alternativa nel caso questo elemento venga visualizzato da un browser che non supporta i Css3 usiamo questo selettore

.no-borderradius img{
  /* ... */
}

Per chi è più esperto e ha dei casi particolari da monitorare, ci sono una seri di API che servono per implementare il cuore della librerie adattandola alle vostre esigenze. Nella pagina dedicata potete trovare tutta la documentazione inerente alla libreria con i vari esempi per ciascuna features che Modernizr supporta.