HTML5 e CSS3 senza colpa

Non tutte le funzionalità HTML5 o CSS3 hanno un supporto browser diffuso, naturalmente. Per compensare questo, gli sviluppatori intraprendenti hanno creato una serie di strumenti che consentono di utilizzare queste tecnologie oggi, senza lasciare indietro gli utenti che vivono ancora nell'età della pietra.

---

Prologo

Elementi semantici HTML5

La buona notizia è che, ad eccezione di Internet Explorer, è possibile creare più markup semantici utilizzando i nuovi elementi HTML5, anche nei browser che non li supportano ufficialmente. Ricorda solo di impostare la corretta modalità di visualizzazione: bloccare. Il seguente snippet dovrebbe fare riferimento a tutti gli elementi necessari:

 articolo, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; 

Commenti condizionali di IE

L'implementazione di molte delle soluzioni in questo tutorial comporta l'inclusione di alcuni JavaScript per versioni specifiche di Internet Explorer. Ecco una rapida panoramica: l'espressione di test è racchiusa tra parentesi quadre. Possiamo verificare versioni o versioni specifiche sopra o sotto una versione indicata. lt e gt significare piu 'basso di e più grande di, rispettivamente, mentre lte e gte significare inferiore o uguale a e maggiore o uguale a.

Ecco alcuni esempi rapidi:

 [se IE 6]

Controlla se il browser è Internet Explorer 6.

 [if gt IE 6]

Controlla una versione di Internet Explorer maggiore di 6.

---

Strumento 1: HTML5 Shiv

In qualsiasi cosa IE, escludendo la versione più recente (IE9), non è possibile applicare stili a elementi che il browser non riconosce. I tuoi elementi HTML5 nuovi e spericolati, in tutta la loro gloria, sono impermeabili alle regole CSS in quell'ambiente. È qui che html5shiv di Remy Sharp (a volte chiamato html5 shim) viene in soccorso. Inseriscilo semplicemente nella pagina sezione e sarete in grado di modellare perfettamente i nuovi elementi HTML5.

Si noti come i commenti condizionali caricano solo il codice html5shiv a condizione che la versione di Internet Explorer sia inferiore a 9. Altri browser, come Firefox e Chrome, ignoreranno anche questo tag e non eseguiranno lo script, risparmiando così la larghezza di banda.

html5 shiv si basa su una soluzione semplice: indirizza IE a creare gli elementi con JavaScript (non hanno nemmeno bisogno di essere inseriti nel DOM).

 document.createElement ( 'intestazione');

A questo punto, possono essere disegnati normalmente. Inoltre, le versioni più recenti integrano IE Print Protector, che corregge un bug in cui gli elementi HTML5 scompaiono quando si stampa la pagina ...

---

Strumento 2: Modernizr

Modernizr ti consente di fornire uno stile di "backup" nei browser che non supportano determinate funzionalità HTML5 e CSS3.

Modernizr è forse il più noto di questi strumenti, ma è anche abbastanza frainteso (il nome non aiuta). Fai un respiro profondo: contrariamente al malinteso popolare, Modernizr lo fa non abilitare funzionalità HTML5 e CSS3 nei browser che non li supportano (nonostante ciò fa includi html5shiv per permetterti di usare elementi HTML5 in IE < 9).

Oltre alla funzionalità html5shiv, Modernizr esegue solo una cosa e una cosa: esegue una serie di test di rilevamento delle funzionalità quando viene caricato, quindi inserisce i risultati nel classe attributo del etichetta.

Lo scopo principale di Modernizr è quello di consentire di offrire uno stile di "backup" nei browser che non supportano determinate funzionalità HTML5 e CSS3. Questo è in qualche modo diverso dal tradizionale degrado aggraziato, in cui usiamo lo stesso stile CSS in tutti i browser, e poi lo ingegniamo in modo che, quando mancano specifiche capacità, il risultato sia ancora accettabile.

Ora per un esempio di come funziona Modernizr: se un browser supporta border-radius e il column-count proprietà, verranno applicate le seguenti classi:

D'altra parte, se le stesse proprietà non sono supportate, ad esempio in IE7, troverai:

A questo punto, è possibile utilizzare queste classi per applicare uno stile unico nei browser con funzionalità diverse. Ad esempio, se desideri applicare uno stile diverso a un paragrafo, a seconda che siano supportate le colonne CSS, puoi eseguire:

 .csscolumns p / * Stile quando le colonne sono disponibili * / .no-csscolumns p / * Stile quando le colonne non sono disponibili * /

Se un browser non supporta colonne, il .csscolumns la classe non sarà presente nel corpo e il browser non avrà mai la possibilità di applicare la regola che la usa.

Alcuni potrebbero obiettare che questo ci riporta ai vecchi tempi della costruzione di un sito diverso per ogni browser. È vero che nulla ti impedisce di scrivere così tante dichiarazioni di stile che utilizzano funzionalità avanzate di CSS3 che il tuo foglio di stile diventa praticamente vuoto quando queste regole non possono essere applicate.

Se si desidera utilizzare Modernizr in un modo che abbia senso, è necessario affidarsi al proprio talento progettuale per concepire stili alternativi che non infrangano il design e non richiedano di buttare via il resto del foglio di stile. Ad esempio, potresti provare a sostituire le ombre sulle lettere quando non sono disponibili, con un carattere grassetto o una trasparenza con un colore diverso.

uso

Per utilizzare Modernizr, includere il file minificato e applicare una classe di no-js al elemento. Quest'ultima precauzione ti consente di fornire stili per quando JavaScript è completamente disattivato; ovviamente, in quei casi, Modernizr non può aiutarti affatto. Se JavaScript è abilitato, Modernizr eseguirà e sostituirà il file no-js con i risultati delle sue operazioni di rilevamento delle caratteristiche.

    ... 

Se sei disposto ad accettare che tutti i siti web non debbano essere visualizzati in modo identico su tutti i browser, scoprirai che Modernizr è uno strumento essenziale nella tua fascia di sviluppo del web!

---

Strumento 3: IE 6 Universal CSS

Sulla stessa nota, il designer Andy Clarke ha ideato una soluzione elegante per risolvere la mancanza di conformità standard di IE6. Denominato "Universal IE6", questo foglio di stile si concentra esclusivamente sulla tipografia. La chiave è usare i commenti condizionali per nascondere tutti gli altri fogli di stile da IE 6.

  / * Fogli di stile per browser diversi da Internet Explorer 6 * /  

Nota importante: Ricorda di includere l'ultima versione, poiché le istruzioni per le versioni precedenti sono ancora presenti sul Web. I risultati finali sembrano così:

Non hai lavoro da fare per supportare IE 6 su un nuovo sito.

Questo approccio ha un vantaggio piuttosto ovvio rispetto ai classici fogli di stile alternativi: non hai lavoro da fare per supportare IE 6 su un nuovo sito. Lo svantaggio, ovviamente, è che il sito mostra molto poco del tuo design. Inoltre, anche le basi HTML devono essere solide, in modo che la pagina sia utilizzabile anche con la maggior parte degli stili disabilitati.

Si noti che Universal IE6 CSS non include alcuno stile per elementi solo HTML5 come

o