Modernizer – Guida all’uso

Quest'oggi voglio parlarti di qualcosa di differente del classico tram-tram HTML5 o CSS3. Oggi ci focalizzeremo su come rendere i nostri progetti compatibili con i browser che popolano il mercato!  

Pensiamoci bene, cosa perdo tempo a creare effetti, diminuire l’uso delle immagini o a creare diversi layout attraverso le Media Queries se alla fine il mio visitatore sito possiede una vecchia versione di Internet Explorer e fa sballare completamente il layout e gli effetti che ho creato?

Sotto questo punto di vista può sembrare addirittura stupido iniziare ad implementare fin da oggi gli strumenti che HTML5 e CSS3 ci mettono a disposizione, ma non sarebbe una scelta intelligente. Quello che possiamo sempre fare è impegnarci quel tanto che basta ed abbacciare il  progressive enhancement per permettere ai sistemi dei nostri stessi utenti di proporre una versione alternativa del sito (magari con meno effetti), impedendone quindi la rottura del layout.

Alla fine è anche una buona occasione per imparare qualcosa di nuovo nello sviluppo web!!!

Quello che andremo a scoprire oggi è una piccola libreria JavaScript che ti permetterà di sapere al volo quali caratteristiche vengono supportate dal browser del nostro utente ma, ancora meglio, quali sono quelle che non vengono supportate. Questo ti permetterà di studiare delle versioni alternative dei propri effetti CSS risolvendo i problemi di compatibilità tra i vari browser.

Conosciamo Modernizr

Come detto poco fa Modernizr è basato sul linguaggio JavaScript e, quindi, per utilizzarlo dovrai inserirlo all’interno delle pagine HTML, nel seguente modo:

Con questa semplice riga di codice hai appena permesso a Modernizr di eseguire alcuni controlli all’interno del browser del visitatore, controlli che ci permetteranno di sapere quali sono le regole CSS supportate. Il primo controllo che Modernizr esegue è quello JavaScript, più che Modernizr siamo noi che facciamo fare questo controllo visto che senza JavaScript questa libreria non sarebbe in grado di funzionare e tutti i nostri sforzi sarebbero vani!

Sapere se JavaScript è attivo o meno all’interno dei sistemi dei visitatori ti permetterà anche di creare dei funzioni di fallback per offrire un’esperienza il più apprezzabile possibile anche senza il supporto di questo linguaggio. Adesso che sappiamo perché è utile sapere se JavaScript è vivo e vegeto, possiamo aggiungere una semplice classe al nostro elemento <html>:

Questa piccola modifica ci permetterà di modificare i nostri stili basandoci sulla assenza del JavaScript. Nel caso in cui questo linguaggio fosse installato, invece, Modernizr inizierà a eseguire una serie di test e inserirà il risultato all’interno dell’attributo class dell’elemento html, sostituendo di conseguenza la classe no-js inserita precedentemente.

Fatte queste modifiche salviamo il file HTML e apriamolo nel nostro browser preferito; sul mio sistema ho installato l’ultima versione di FireFox e Modernizr ha aggiunto le seguenti classi:

Se ti prendi il tempo di leggere con calma, noterai che le varie classi hanno una cosa comune tra loro, ovvero tutte identificano delle caratteristiche HTML5 o CSS, ma quelle  non supportate hanno un no<em>- davanti al proprio nome.

Questo ci permetterà di fare dei controlli all’interno dei fogli di stile e non soltanto…

Controlliamo con i CSS

Facciamo un passo alla volta e vediamo come sia possibile modificare il layout delle nostre pagine con del semplice CSS. Ammettiamo che nel nostro progetto vogliamo utilizzare le animazioni CSS3, per essere sicuri di non andare in conflitto nessun browser che non supporta questa caratteristica dei CSS3 potremmo fare come segue:

Se al momento non conosci niente riguardo alle Animazioni CSS3, non perderti d’animo, in questa puntata non c’è assolutamente niente da sapere su questi effetti.

Quello ho cercato di mostrarti con il codiceprecedente è la possibilità di impostare due stili differenti nel caso in cui le animazioni fossero, o meno, supportate. Modernizr ci fornisce la possibilità di guardare oltre e modificare il comportamento del nostro progetto a seconda delle possibilità.

Controllare via JavaScript

Modernizr non ci permette soltanto di controllare le potenzialità del nostro browser via CSS  ma, anzi, possiamo controllarle anche tramite JavaScript! Forse ti stai chiedendo perché questo potrebbe esserci utile…

Semplicemente perché grazie a JavaScript potremmo inserire dei blocchi di codice in modo dinamico e modificare il codice utilizzato. Per fare un esempio dal vivo prendiamo in esame una form con diversi campi input. Il nostro scopo principale è quello di utilizzare il localStorage per salvare le informazioni che vengono inserite all’interno dei vari campi in modo che, se qualcosa va storto con la connessione del visitatore, quando riaprirà la nostra pagina troverà i campi input precompilati con i valori da lui inseriti!

Per fare questo tutto quello che dovremmo fare sarà inserire il seguente blocco di codice all’interno dei nostri file JavaScript:

I commenti si spiegano da soli e ci danno anche uno spunto su come risolvere il problema su quei browser che non supportano il localStorage. Ovviamente è possibile fare questi tipi di controlli per qualsiasi caratteristica rilevabile da Modernizr; già ma quali sono queste caratteristiche?

Visto che leggere la lista di classi sopra presentata sarebbe troppo complicato ecco una tabella dove vengono elencati tutte le caratteristiche rilevate da questa libreria.

Caratteristiche Rilevate da Modernizr

Caratteristica Proprietà CSS Controllo JavaScript
@font-face .fontface Modernizr.fontface
Canvas .canvas Modernizr.canvas
Canvas Text .canvastext Modernizr.canvastext
HTML5 Audio .audio Modernizr.audio
HTML5 Audio formats NA Modernizr.audio[format]
HTML5 Video .video Modernizr.video
HTML5 Video Formats NA Modernizr.video[format]
rgba() .rgba Modernizr.rgba
hsla() .hsla Modernizr.hsla
border-image .borderimage Modernizr.borderimage
border-radius .borderradius Modernizr.borderradius
box-shadow .boxshadow Modernizr.boxshadow
Multiple backgrounds .multiplebgs Modernizr.multiplebgs
opacity .opacity Modernizr.opacity
CSS Animations .cssanimations Modernizr.cssanimations
CSS Columns .csscolumns Modernizr.csscolumns
CSS Gradients .cssgradients Modernizr.cssgradients
CSS Reflections .cssreflections Modernizr.cssreflections
CSS 2D Transforms .csstransforms Modernizr.csstransforms
CSS 3D Transforms .csstransforms3d Modernizr.csstransforms3d
CSS Transitions .csstransitions Modernizr.csstransitions
Geolocation API .geolocation Modernizr.geolocation
Input Types NA Modernizr.inputtypes[type]
Input Attributes NA Modernizr.input[attribute]
localStorage .localstorage Modernizr.localstorage
sessionStorage .sessionstorage Modernizr.sessionstorage
Web Workers .webworkers Modernizr.webworkers
applicationCache .applicationcache Modernizr.applicationcache
SVG .svg Modernizr.svg
SVG Clip Paths .svgclippaths Modernizr.svgclippaths
SMIL .smil Modernizr.smil
Web SQL Database .websqldatabase Modernizr.websqldatabase
IndexedDB .indexeddb Modernizr.indexeddb
Web Sockets .websockets Modernizr.websockets
Hashchange Event .hashchange Modernizr.hashchange
History Management .historymanagement Modernizr.historymanagement
Drag and Drop .draganddrop Modernizr.draganddrop
Cross-window Messaging .crosswindowmessaging Modernizr.crosswindowmessaging
addTest() Plugin API NA Modernizr.addTest(str,fn)

Conclusioni

Abbiamo visto soltanto una delle soluzioni che potranno aiutarci a far funzionare nel miglior modo possibile il progressive enhancement all’interno dei nostri siti web, ed inoltre hai anche visto sia un metodo CSS che JavaScript per rilevare le caratteristiche supportate dai diversi browser.

Ma adesso voglio ascoltare le tue opinioni, cosa ne pensi? Secondo te, è corretto inserire all’interno dei nostri progetti caratteristiche che sono compatibili con alcuni browser e fornire una versione alternativa per chi non li supporta?

Oppure dovremmo restare con i vecchi standard e sviluppare siti che si comportano nello stesso modo su tutti i browser rinunciando a queste nuove caratteristiche? A te la parola! Siamo curiosi di sapere cosa ne pensi all’interno dei commenti!

Lascia il tuo Pensiero