Come è ormai noto, gli elementi HTML5 hanno una maggiore specificità semantica rispetto agli elementi HTML e XHTML. In particolare, in nuovi elementi introdotti (tipo header, footer, nav, section, article, aside etc..) vanno proprio in questa direzione, essi sono orientati a raggruppare i contenuti a seconda dell’appartenenza semantica piuttosto che a definire il loro posizionamento. Semplificando il concetto, rispetto ai tradizionali div hanno maggior significato.
Struttura
L’obiettivo di HTML5, almeno sulla carta, è quindi quello di semplificare la scrittura del markup, attribuendo appunto un significato a tutti gli elementi che formano la struttura del documento e che prima erano resi attraverso elementi div ed attributi id (o class).
La maggior parte della pagine è formata da una varietà di strutture comuni tipo intestazioni,colonne e piè di pagina. Ecco come si presentava una classica struttura prima di HTML5:
Ed ecco come si presenta con HTML5:
Come possiamo facilmente notare gli elementi div sono stati sostituiti dai nuovi elementi: header, nav, article, section, aside e footer che da soli rendono il significato.
Il markup per il precedente documento dovrebbe quindi essere qualcosa simile a questo:
<!doctype html>
<html>
<head>
<title>HTML5 layout</title>
</head>
<body>
<header>
<!-- Contenuto -->
</header>
<nav>
<!-- Contenuto -->
</nav>
<section>
<header>
<!-- Contenuto -->
</header>
<article>
<!-- Contenuto -->
</article>
<footer>
<!-- Contenuto -->
</footer>
</section>
<aside>
<!-- Contenuto -->
</aside>
<footer>
<!-- Contenuto -->
</footer>
</body>
</html>
IL supporto dei browsers
Fatta questa doverosa premessa veniamo ora al vero obiettivo dell’articolo, e cioè al supporto dei nuovi elementi sui browsers.
Limito l’analisi agli elementi (tipo quelli sopra citati) che non aggiungono nessuna funzionalità ma hanno soltanto un significato intrinseco superiore. Bene per questi elementi a noi basta che il browser li riconosca, e sia quindi in grado di aggiungerli al DOM correttamente applicandovi gli stili specificati nelle regole CSS. Ma cosa succede se questo non avviene? Se il browser non supporta gli elementi , li aggiungerà come nodi vuoti nel DOM, non potrà quindi applicarvi le regole di stile. Il risultato sarebbe disastroso.
Elementi come header, nav, aside, section, article, footer etc.. sono ormai supportati da tutti i moderni browsers, mentre non lo sono sui vecchi. Il problema lo abbiamo sopratutto con IE, versione 8 e precedenti. Gli utenti con Windows XP (o versioni precedenti) non potranno aggiornare il loro browser oltre la versione 8.
Al momento in cui scrivo, tanto per dare alcuni dati concreti, il sito dell’azienda per cui lavoro ha una media di 2000 visitatori unici al giorno, di cui il 47% utilizza IE. Di questo 47% il 75% ha una versione di IE inferiore alla 9. E’ vero che si tratta di una percentuale che cala di giorno in giorno, ma è chiaro che al momento attuale non posso aggiornare il layout del sito con i nuovi elementi.
Soluzione
Possiamo ovviare a questo problema in maniera molto semplice, come detto se il browser non supporta gli elementi creerà nel DOM dei nodi vuoti ai quali non sarà quindi applicato nessuno stile.
Creazione degli elementi via JavaScript
Utilizzando JavaScript possiamo aggiungere al DOM l’elemento o gli elementi che intendiamo usare, per esempio nell’<head> della pagina aggiungiamo:
<!--[if lt IE 9]>
<script>
document.createElement("article");
</script>
<![endif]-->
Sfruttando un commento condizionale (che è capito solo da IE) abbiamo detto al browser (quindi a IE) di creare un elemento <article> solo se si tratta di una versione del browser inferiore alla 9. Per evitare problemi a questo punto possiamo anche decidere di crearli tutti:
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("audio");
document.createElement("canvas");
document.createElement("command");
document.createElement("datalist");
document.createElement("details");
document.createElement("embed");
document.createElement("figcaption");
document.createElement("figure");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("keygen");
document.createElement("mark");
document.createElement("meter");
document.createElement("nav");
document.createElement("output");
document.createElement("progress");
document.createElement("rp");
document.createElement("rt");
document.createElement("ruby");
document.createElement("section");
document.createElement("source");
document.createElement("summary");
document.createElement("time");
document.createElement("video");
</script>
<![endif]-->
html5.js
Un metodo alternativo più sicuro e veloce sia nella creazione che nel rendering è utilizzare lo script di Remy Sharp che consiste in una soluzione più completa rispetto a quella vista finora, comprendendo anche i CSS per la stampa, dove il JavaScript non viene eseguito.
L’importante è inserire la chiamata allo script prima del <body> (cioè nell’<head> della pagina) in quanto IE ha bisogno di conoscere gli elementi prima di renderli.
Non è importante l’includerlo prima o dopo i CSS anche se per motivi prestazionali sarebbe meglio dopo.
<!--[if lt IE 9]> <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Modernizr
Infine come ulteriore alternativa per raggiungere il nostro scopo, possiamo usare una soluzione ancora più completa, cioè servirci della libreria Modernizr di cui ho abbondantemente parlato in questo mio articolo.
Definire gli elementi strutturali come block-level
Inoltre non riconoscendo i nuovi elementi strutturali di HTML, alcuni browser li posizioneranno accanto all’elemento precedente, dobbiamo quindi eseguire una normalizzazione via CSS definendoli come elementi block-level, basterà inserire nel nostro figlio di stile la seguente regola:
article, aside, header, footer, section, nav {
display: block;
}
Risorse
http://dev.w3.org/html5/spec/
http://remysharp.com/2009/01/07/html5-enabling-script/
http://www.modernizr.com