html5 e Internet Explorer

Lista di TAG Tutti i browser raccolgono in una lista ben definita tutti i tag html supportati, lista che viene […]
html5 e Internet Explorer

Lista di TAG

Tutti i browser raccolgono in una lista ben definita tutti i tag html supportati, lista che viene ovviamente aggiornata con le nuove release del software; gli elementi che non appaiono in queste liste vengono definiti “sconosciuti”. Con l’avvento di html5 sono stati introdotti, come tutti noi ormai sappiamo bene, nuovi tag html che hanno il compito di snellire e rendere semanticamente piu coerenti il nostri markup.

Tag sconosciuto!

Se utilizzassimo quindi il nuovo tag “article“, che stile gli verrebbe assegnato da tutti quei browser obsoleti che non posseggono tale tag nella propria lista?
Ogni browser ha delle peculiarità differenti, e i risultati potrebbero essere disparati. Di regola agli elementi “sconosciuti” non viene assegnato alcun stile particolare; si trovano li in attesa che l’utente assegni loro le regole css. Sfortunatamente però tutte le versioni di IE inferiori alla 9 non consentono di applicare stili css ad elementi “sconosciuti”. Un bel problema se dovessimo per esempio attribuire un background o un bordo al tag “nav” relativo alla navigazione principale del nostro sito web.

il DOM di un elemento “sconosciuto”

Anche qui, se IE non riconosce esplicitamente il nome di un elemento, inserirà tale elemento nel DOM come nodo vuoto senza child. Tutti gli elementi che ci si aspetterebbe siano contenuti in quell’elemento, in relatà vengono renderizzati come adiacenti. Per capire meglio prendiamo in esame questa porzioni di html5

<article>
    <h1>Titolo</h1>
    <p>Testo da leggere</p>
</article>

Ci si aspetterebbe, analizzando il DOM che h1 e p siano contenuti in article. Internet explorer, non riconoscendo come suo il tag article, non consentirà allo stesso di avere elementi child al suo interno, rendendo sibling h1 e p. Avremmo in pratica questa situazione:

<article></article>
<h1>Titolo</h1>
<p>Testo da leggere</p>

Esiste una soluzione

Per far si che Internet Explorer fino alla versione 8 si comporti correttamente con un tag sconosciuto, basterà creare l’elemento in maniera fittizia con javascript, una sola volta, all’inizio del documento html.

document.createElement("article");

Questa semplice tecnica puo essere utilizzata per creare in maniera fittizzia tutti i tag di html5. Remy Sharp, con il suo script “HTML5 Enabling”, ospitato sul repository di Google, crea dinamicamente tutti i tag html5 cosi da poterli usare senza preoccupazione alcuna.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8" />
    <title>Titolo sito Web</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style type="text/css">
        nav {border:1px solid red;display:block;}
    </style>
</head>    
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contatti</a></li>
            <li><a href="#">Dove Siamo</a></li> 
        </ul>
    </nav>
</body>
</html>

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github