In questo articolo presenterò trucchi e librerie javascript per migliorare il supporto che il browser Internet Explorer 8 offre delle specifiche HTML5.
Come risaputo, e comprovato, l'unico browser di casa Microsoft a supportare le specifiche del nuovo linguaggio HTML5 é IE9.
Questo vuol dire che nativamente IE8 non conosce ne i nuovi elementi semantici ne quelli strutturali che HTML5 ha introdotto: nav, header, foooter, section, aside ecc..
Quindi, bisogna mettere in pratica qualche workaround per far si che le nuove applicazioni, o siti web, create possano essere utilizzate da browser un po' datati, proprio come IE8.
Perfezionare i fogli di stile CSS
In generale, adattare i file CSS progettati su documenti HTML5 per far si che IE8 e tutti gli altri browser, che non conoscono i nuovi tags, possano correttamente applicarne le regole non richiede molti sforzi ne modifiche: giusto qualche accorgimento in fase di progettazione.
Per ottenere ciò sono sufficenti due accorgimenti:
- assegnare un id ai nuovi elementi nelle pagine HTML per poterli poi referenziare all'interno dei fogli di stile CSS;
- All'interno delle istruzioni di stile indicare la modalità di visualizzazione dei nuovi elementi;
Di seguito un semplice esempio:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Script e articoli informatici</title>
<meta name="author" content="Mirko Agrati" />
<style type="text/css">
header#intestazione{backgorund-color: yellow;display: block;}
nav#menu{backgorund-color: yellow;display: block;}
div#content article{backgorund-color: red;display: block;}
footer#piepagina{backgorund-color: silver;display: block;}
</style>
</head>
<body>
<div>
<header id="intestazione">
<h1>HTML5 MA Page</h1>
</header>
<nav id="menu">
<a href="/">Home</a>
<a href="/contact">Contact</a>
</nav>
<div id="contenuto">
<article>
..........
</article>
</div>
<footer id="piepagina">
<p>© Copyright 2011 by Mirko Agrati</p>
</footer>
</div>
</body>
</html>
Avrai sicuramente notato che gli stili CSS dei nuovi tags referenziano gli elementi stessi tramite id ed indicano esplicitamente in che maniera disporli nella pagina tramite l'istruzione display:block;.
Questi semplici accorgimenti permettono la corretta visualizzazione di un documento HTML5 su tutti i browser, ad eccezione di IE8: per via del DOM molto selettivo,poco flessibile e non sapendo dell'esistenza dei nuovi tags, quest'ultimo browser non applica le regole di stile agli elementi sconosciuti, vanificando tutto quello di cui sopra.
Fortunatamente esiste un workaround javascript per risolvere anche questo inconveniete!
Estendere il DOM tramite Javascript
Grazie ad un tip, o trucco, javascript è possibile imporre la conoscenza dei nuovi tags HTML5 ad Internet Explorer 8 il quale, non appena appresa la notizia, provvederà ad applicare le regole CSS ai nuovi elementi annullando l'handicap nei confronti degli altri browser.
Nell'esempio che segue, verranno creati i nuovi elementi al caricamento della pagina, in maniera tale che il DOM li abbia già a disposizione prima di dover assegnare loro gli stili CSS.
Il codice seguente va ad integrare la sezione HEAD dell'esempio precedente.
<head>
........
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
</script>
</head>
Per evitare ogni volta di dover creare tutti gli elementi HTML5 che IE8 non conosce, è possibile crearsi uno script personale oppure utilizzarne uno già pronto creato da Remy Sharp e distribuito gratuitamente sul suo blog a questo indirizzo.
Il file javascript html5.js, scaricabile e direttamente linkabile da ogni pagina HTML, é da inserire nella sezione HEAD del documento e per assicurasi che venga caricato solo in presenza di un client IE8 va trattato nella maniera che segue.
<head>
........
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
Ovviamente il suddetto file .js è distribuito in versione minified, ovvero ridotta al minimo per essere scaricata velocemente.
Alla prossima,
MA.
0 commenti:
Posta un commento
Non ti è chiaro qualcosa?
No problem, posta il tuo dubbio ;)
..... e ricordati di firmarlo!