{"id":80,"date":"2010-07-05T16:53:13","date_gmt":"2010-07-05T14:53:13","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/approfittare-di-html5-e-css3-con-modernizr\/"},"modified":"2010-07-05T16:53:13","modified_gmt":"2010-07-05T14:53:13","slug":"approfittare-di-html5-e-css3-con-modernizr","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/approfittare-di-html5-e-css3-con-modernizr\/","title":{"rendered":"Approfittare di HTML5 e CSS3 con Modernizr"},"content":{"rendered":"

Dieci anni fa, solo i web designer d’avanguardia usavano i CSS per il layout e lo stile. Il supporto da parte dei browser per i layout creati per mezzo dei CSS era povero e pieno di bachi, quindi, queste persone, se da un lato erano favorevoli all’aderenza agli standard web, dall’altro creavano degli hack che permettessero ai layout in CSS di funzionare i tutti i browser. Un hack che si diffuse largamente fu il browser sniffing: individuare quale browser e quale versione l’utente stesse usando, controllando la propriet\u00e0 navigator.userAgent<\/code> in JavaScript. Il browser sniffing permetteva il forking del codice in maniera rapida e semplice, permettendo agli sviluppatori di indirizzare i vari browser con istruzioni differenti.<\/p>\n

Al giorno d’oggi, i layout basati sui CSS sono una cosa normale e tutti i browser li supportano in maniera piuttosto solida. Ma adesso abbiamo CSS3 e HTML5 e la situazione si sta ripetendo\u2014diversi browser mostrano diversi livelli di supporto a queste nuove tecnologie. Tuttavia, siamo diventati pi\u00f9 brillanti e non usiamo pi\u00f9 gli hack CSS n\u00e9 tanto meno l’inattendibile e scadente pratica del browser sniffing. Abbiamo inoltre convinto sempre pi\u00f9 clienti che i siti web non devono per forza avere esattamente lo stesso aspetto in ciascun browser<\/a>. Quindi, come gestiamo questo nuovo ma familiare problema? Semplice: usiamo la feature detection<\/strong>, ossia non chiediamo pi\u00f9 al browser \u201cChi sei?\u201d e da l\u00ec in poi facciamo assunzioni inaffidabili, bens\u00ec chiediamo al browser: \u201cPuoi fare questa<\/em> e quest’altra<\/em> cosa?\u201d E’ un modo semplice per testare le capacit\u00e0 del browser, ma fare tutti questi test manualmente ogni volta diventa noioso. Per risolvere questo problema (e altri ancora), potete usare Modernizr<\/a>.<\/p>\n

\n

Modernizr: la libreria di feature-detection per HTML5 e CSS3<\/h2>\n

Modernizr \u00e8 una libreria open source di Javascript che facilita ai web designer il supporto per i diversi livelli di esperienze, basandosi sulle capacit\u00e0 del browser del visitatore del sito. Ci\u00f2 permette ai designer di approfittare di tutto quello che HTML5 e CSS3 offrono e che \u00e8 gi\u00e0 implementato in alcuni browser, senza sacrificare il controllo sull’esperienza d’uso in altri browser.<\/p>\n

Quando inserite lo script Modernizr nella vostra pagina, questo individua se il browser corrente supporta le feature di CSS3 come @font-face<\/code>, border-radius<\/code>, border-image<\/code>, box-shadow<\/code>, rgba()<\/code> e cos\u00ec via, cos\u00ec come le feature di HTML5 come audio, video, localStorage ed i nuovi tipi e attributi dell’elemento <input><\/code>. Sapendo ci\u00f2, potrete approfittare di queste implementazioni native nei browser che supportano queste feature e decidere se volete creare un fallback basato su JavaScript o semplicemente lasciar degradare gradualmente la pagina nei browser che non le supportano. Inoltre, Modernizr rende disponibili per la progettazione in Internet Explorer i nuovi elementi di HTML5, cos\u00ec che potete usare da subito la loro semantica migliorata.<\/p>\n

Modernizr \u00e8 stato creato basandosi sul principio del “Progressive Enhancement” [miglioramento progressivo, ndr<\/em>], cos\u00ec da supportare\u2014e perfino incoraggiare\u2014 la costruzione di siti layer per layer, partendo da una base senza JavaScript e aggiungendo uno alla volta i livelli di miglioramento. Questa cosa \u00e8 semplice con Modernizr, dal momento che saprete di cosa \u00e8 capace il browser. Vediamo un esempio pratico di come usare Modernizr per costruire siti web all’avanguardia.<\/p>\n<\/div>\n

\n

Primi passi con Modernizr<\/h2>\n

Per prima cosa, scaricate l’ultima release stabile all’indirizzo www.modernizr.com<\/a>, dove potete anche trovare la lista completa delle feature che \u00e8 in grado di rilevare. Una volta che avete l’ultima versione, la 1.5<\/em> nel momento in cui sto scrivendo questo articolo, inseritela nella sezione <head><\/code> della vostra pagina:<\/p>\n

<!DOCTYPE html>
<html>
<head>
\t<meta charset=\"utf-8\">
\t<title>My Beautiful Sample Page<\/title>
\t<script src=\"modernizr-1.5.min.js\"><\/script>

<\/head>
\u2026<\/code><\/pre>\n
Dopodich\u00e9, aggiungete la classe \u201cno-js<\/code>\u201d all’elemento <html><\/code>:<\/p>\n
<html class=\"no-js\"><\/code><\/p>\n
Quando Modernizr va in esecuzione, rimpiazzer\u00e0 quella classe con la classe\u201cjs\u201d che vi permette di sapere, nel vostro CSS, se JavaScript \u00e8 attivato oppure no. Ma Modernizr non si ferma qui: aggiunger\u00e0 le classi per ciascuna feature che individua, usando come prefisso a queste  \u201cno-\u201d se il browser non le supporta. Quindi, il vostro elemento <html><\/code> sar\u00e0 siile a questo dopo il pageload (sempre che JavaScript sia attivato):<\/p>\n
<html class=\"js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface\"><\/code><\/p>\n
Modernizr crea anche un oggetto JavaScript, chiamato semplicemente Modernizr, che ha una lista di propriet\u00e0 che contengono dei valori booleani per ciascuna feature. Modernizr.canvas<\/code> sar\u00e0 vero se il browser supporta il nuovo elemento canvas<\/code> e falso se il browser non lo supporta. L’oggetto JavaScript contiene inoltre informazioni pi\u00f9 dettagliate riguardo alcune feature. Ad esempio, Modernizr.video.h264<\/code> vi dir\u00e0 se il browser supporta quel particolare codec. Modernizr.inputtypes.search<\/code> vi dir\u00e0 se il nuovo input type search \u00e8 supportato. E cos\u00ec via.<\/p>\n
La nostra semplice pagina di esempio<\/a> \u00e8 un po’ spoglia, ma \u00e8 altamente semantica ed accessibile. Diamole un po’ di stile di base, un po’ di formattazione, colore e layout per renderla pi\u00f9 gradevole alla vista. Fin qui, niente di nuovo: aggiungiamo semplicemente delle propriet\u00e0 CSS ad una pagina HTML strutturata semanticamente ed il risultato<\/a>\u2014per quanto semplice\u2014 \u00e8 molto chiaro.<\/p>\n
Ora, miglioriamo la pagina e rendiamola pi\u00f9 interessante. Voglio usare un font carino (e open license) per lo header h1<\/code>, dividere la lista di feature in due colonne e spostare la sezione riguardante Modernizr, insieme ad una foto, a destra di tutto. Cambier\u00f2 anche il bordo intorno alla pagina e lo render\u00f2 pi\u00f9 carino. Ora, CSS \u00e8 piuttosto fantastico perch\u00e9 potete semplicemente aggiungere nuove propriet\u00e0 ad una regola e, se il browser non le riconosce (leggi: supporta), semplicemente le ignorer\u00e0. Combinate questo alla natura a cascata dei CSS e potrete usare cose come border-radius<\/code> senza dover fare affidamento a Modernizr. Tuttavia, l’utilizzo di Modernizr effettivamente offre qualcosa che non potete ottenere senza di esso: la possibilit\u00e0 di cambiare le propriet\u00e0 che il browser supporta<\/em>, solo a condizione che supporti altre<\/em> propriet\u00e0. Vi mostrer\u00f2 ci\u00f2 aggiungendo due nuove regole CSS alla nostra pagina:<\/p>\n
.borderradius #content {
    border: 1px solid #141414;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
  }
  .boxshadow #content {
    border: none;
    -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
    -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
    box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
  }<\/code><\/pre>\n
La prima regola aggiunge un angolo arrotondato di 12 pixel al nostro elemento #content<\/code>. Tuttavia, la regola originale che avevamo per#content<\/code> specificava un bordo di \u201c2px outset #666\u201d, che era carino quando il box aveva angoli quadrati, ma adesso, con gli angoli arrotondati, non \u00e8 cos\u00ec bello. Grazie a Modernizr, potete istruire il browser affinch\u00e9 visualizzi solo un bordo solido di un pixel se<\/em> il browser supporta border-radius<\/code>.<\/p>\n
La seconda regola spinge la cosa un po’ oltre, aggiungendo una drop shadow all’elemento #content<\/code> e rimuovendo tutto il bordo se il browser non supporta la propriet\u00e0 box-shadow<\/code>. Perch\u00e9? Perch\u00e9 la maggior parte dei browser non rende in maniera molto carina la combinazione border<\/code>-con-border-radius<\/code> e<\/em> box-shadow<\/code>. (Si noti che questa \u00e8 una mancanza dei browser, ma \u00e8 qualcosa con cui siamo costretti a convivere per il momento). Preferirei usare la drop shadow attorno al nostro elemento piuttosto che non<\/em> usare una drop shadow ma solo un bordo. In questo modo, posso avere tutti i vantaggi, o meglio, tutti i vantaggi di CSS: i browser che supportano la propriet\u00e0 box-shadow<\/code> ci mostreranno una drop shadow graziosa, i browser che supportano solo border-radius<\/code> ci mostreranno degli angoli arrotondati con un bordo pi\u00f9 sottile e i browser che non supportano nessuna di queste, mostreranno l’originale bordo di due pixel outset.<\/p>\n
Nel nostro prossimo esempio aggiungeremo un font speciale per il nostro header. La nostra dichiarazione originale per h1<\/code>, che non cambieremo ma che evidenzio qui come esempio:<\/p>\n
h1 {
\tcolor: #e33a89;
\tfont: 27px\/27px Baskerville, Palatino, \"Palatino Linotype\", 
        \"Book Antiqua\", Georgia, serif;
\tmargin: 0;
\ttext-shadow: #aaa 5px 5px 5px;
}<\/code><\/pre>\n
Questa dichiarazione andava bene per la nostra pagina base e la dimensione del font a 27 pixel va bene per tutti questi font, ma \u00e8 troppo piccola per il nostro font custom, chiamato Beautiful<\/em>. Aggiungiamo le regole CSS che ci permettono di utilizzarlo:<\/p>\n
@font-face {
\tsrc: url(Beautiful-ES.ttf);
\tfont-family: \"Beautiful\";
}
.fontface h1 {
\tfont: 42px\/50px Beautiful;
\ttext-shadow: none;
}<\/code><\/pre>\n
Innanzitutto, aggiungiamo la dichiarazione @font-face<\/code> all’interno della quale specifichiamo il path, il filename e il nome della font-family per il nostro font custom. Poi aggiungiamo la scelta del font in una regola CSS per il nostro elemento h1<\/em>, ma, come si vede, sto usando un font size troppo<\/em> grande. Questo accade perch\u00e9 il font Beautiful<\/em> viene visualizzato molto pi\u00f9 piccolo di tutti gli altri font che ho specificato per l’elemento h1<\/em>, e cos\u00ec dobbiamo istruire il browser affinch\u00e9 visualizzi il nostro header ad una dimensione molto pi\u00f9 grande, ma solo quando<\/em> visualizza il nostro font custom.<\/p>\n
Inoltre, il nostro bellissimo script per il font ha alcuni problemi con la visualizzazione della text shadow, quindi tolgo l’ombreggiatura quando il browser decide di visualizzare il font custom. Poi dobbiamo anche dividere la lista delle feature. Per fare ci\u00f2, voglio usare la fantastica feature “column” di CSS, che permette al browser di separare in maniera intelligente la lista in colonne senza incasinare il suo ordine\u2014e la nostra lista, sebbene non sia visibilmente numerata, \u00e8 ordinata alfabeticamente. Ovviamente, non tutti i browser supportano gi\u00e0 le colonne CSS, cos\u00ec per questi browser useremo solo il float per dividere la lista su due colonne: non sar\u00e0 pi\u00f9 ordinata alfabeticamente (visivamente), ma \u00e8 meglio che niente:<\/p>\n
.csscolumns ol.features {
\t-moz-column-count: 2;
\t-webkit-columns: 2;
\t-o-columns: 2;
\tcolumns: 2;
}
.no-csscolumns ol.features {
\tfloat: left;
\tmargin: 0 0 20px;
}
.no-csscolumns ol.features li {
\tfloat: left;
\twidth: 180px;
}<\/code><\/pre>\n
Ancora una volta, user\u00f2 Modernizr per applicare propriet\u00e0 molto comuni solo sotto determinate circostanze\u2014cosa che non avrei potuto fare tramite la property overloading o la cascata. Se il browser supporta le colonne CSS, il nostro lavoro qui \u00e8 finito: la lista appare bellissima ed \u00e8 ancora ordinata alfabeticamente. Se il browser non<\/em> supporta le colonne CSS, come determinato dalla classe \u201cno-csscolumns<\/code>\u201d aggiunta all’elemento <html><\/code> in quello scenario, usiamo il float per spostare gli elementi della lista ed applicare alcuni margini e width per ottenere un risultato simile. Non \u00e8 cos\u00ec<\/em> bello, ma \u00e8 un miglioramento rispetto ad un’unica lunga lista su una colonna sola.<\/p>\n
Come avrete probabilmente notato, sto specificando le mie colonne in maniera differente dalle propriet\u00e0 border-radius<\/code> e box-shadow<\/code> negli esempi precedenti. Questo \u00e8 dovuto al fatto che, per prima cosa, Opera al momento supporta le colonne CSS solo attraverso il prefisso del produttore, e seconda cosa, Mozilla non riconosce ancora la propriet\u00e0 abbreviata \u201ccolumns\u201d: da qui l’uso di -moz-column-count<\/code> per quel browser.<\/p>\n
Con questi ed un paio di altri simili cambiamenti, la nostra nuova pagina appare decisamente migliore<\/a>.<\/p>\n
Concludiamo questo tutorial aggiungendo dell’ulteriore “progressive enhancement” alla nostra pagina. I browser basati su WebKit supportano alcune cose piuttosto carine\u2014CSS transitions, animazioni e trasformazioni tridimensionali\u2014 e io voglio mostrarne alcune nel nostro step finale. Ancora una volta, alcune di queste propriet\u00e0 potrebbero semplicemente essere aggiunte alle nostre regole CSS esistenti ed essere tranquillamente ignorate dai browser che non le supportano, ma altre propriet\u00e0 interferirebbero con il layout in tutti<\/em> i browser se le aggiungessi cos\u00ec, perci\u00f2 user\u00f2 Modernizr per controllare molto precisamente quando questi miglioramenti vengono applicati e quando no.<\/p>\n
Per prima cosa, prepariamo il palcoscenico:<\/p>\n
@-webkit-keyframes spin {
       0% { -webkit-transform: rotateY(0); }
     100% { -webkit-transform: rotateY(360deg); }
    }
     .csstransforms3d.cssanimations section {
\t-webkit-perspective: 1000;
     }<\/code><\/pre>\n
La regola @keyframes<\/code> \u00e8 parte della nuova specifica per le animazioni di CSS, che attualmente \u00e8 supportata solo da WebKit. Vi permette di dichiarare un path di animazione completo, con qualunque propriet\u00e0 vogliate, e lo cambia in qualunque step vogliate. Notate che non specificate una durata in questa dichiarazione, solo i key frames stessi\u2014specificate cose come la durata, il loop count e le easing curves quando applicate l’animazione in una regola CSS. Questo vi permette il riutilizzo di una particolare animazione a diverse velocit\u00e0 su elementi diversi, dandovi cos\u00ec la pi\u00f9 grande flessibilit\u00e0. Per maggiori informazioni sull’uso delle animazioni, leggete la specifica W3C Working Draft<\/a>.<\/p>\n
Quindi, applichiamo la nostra animazione\u2014che fa ruotare un elemento in uno spazio 3D\u2014 al nostro header secondario:<\/p>\n
.csstransforms3d.cssanimations section h2 {
\tbackground-image: url(modernizr-logo.png);
\toverflow: hidden;
\t-webkit-animation: spin 2s linear infinite;
  }<\/code><\/pre>\n
Dal momento che stiamo ruotando in uno spazio 3D, vorrei che l’immagine di sfondo del logo Modernizr appaia carina e anti-aliased, cos\u00ec la sostituisco con una versione PNG. Aggiungo inoltre una propriet\u00e0 overflow:hidden<\/code> per nascondere il testo originale nello header, a cui avevamo assegnato un offset di -9999px. Ruotare l’elemento in 3D fa in modo che venga visualizzato durante la rotazione, che era divertente ma non era molto bello da vedersi. Infine, aggiungiamo la regola di animazione, la impostiamo in modo che dure due secondi, lo faccia ruotare in maniera lineare e lo faccia durare all’infinito.<\/p>\n
La nostra pagina finale ha un bell’aspetto<\/a> e ha anche alcune animazioni divertenti visibili nei browser WebKit. Spero che abbiate compreso quanto pi\u00f9 controllo potete ottenere sui vostri siti web con Modernizr e quanto \u00e8 pi\u00f9 semplice fare dell’autentico “progressive enhancement”. Tuttavia, questo non \u00e8 tutto ci\u00f2 che Modernizr pu\u00f2 fare in maniera eccellente: \u00e8 anche prezioso per creare dei fallback JavaScript-driven e per usare nuove feature ganze di HTML5\u2014ma questo \u00e8 un argomento di cui dovremo parlare un’altra volta.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Anni fa, il supporto a CSS da parte dei browser era lacunoso e pieno di bachi: solo i web designers pi\u00f9 audaci usavano i CSS per i layout. Oggi, i layout CSS sono una cosa normale e ogni browser li supporta. Ma lo stesso non vale per CSS3 e HTML5. Qui entra in gioco Modernizr di Faruk Ate\u015f. Questa libreria JavaScript open source rende facile il supporto a differenti livelli di esperienze, basandosi sulle capacit\u00e0 del browser di ciascun visitatore. Scoprite come approfittare di tutto ci\u00f2 che \u00e8 gi\u00e0 implementato di HTML5 e CSS3 in determinati browser, senza sacrificare il controllo sull’esperienza utente negli altri browser.<\/p>\n","protected":false},"author":818,"featured_media":7000582,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,271,22],"tags":[],"coauthors":[302],"class_list":["post-80","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-javascript","category-numero-9-6-luglio-2010"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=80"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000582"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=80"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=80"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=80"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}