Supporto Browser per HTML5

Ogni browser evergreen — Chrome, Firefox, Safari ed Edge — supporta nativamente gli elementi semantici di HTML5 da oltre un decennio (dal 2013 circa). Sul web di oggi è raramente qualcosa a cui bisogna pensare: puoi scrivere <header>, <nav>, <article> e il resto, e funzionano semplicemente.

Questa pagina tratta due argomenti correlati. Primo, la piccola riga CSS che storicamente garantiva il rendering degli elementi semantici come blocchi. Secondo — mantenuto qui principalmente per contesto storico — il polyfill HTML5Shiv che una volta era necessario per far funzionare quegli elementi in Internet Explorer 8 e versioni precedenti. Concludiamo con il metodo moderno per verificare le capacità del browser.

Perché i Browser Più Vecchi Avevano Bisogno di Aiuto

Quando un browser incontra un elemento che non riconosce, non lo ignora — lo inserisce comunque nel DOM. La domanda è come lo renderizza. Per impostazione predefinita, un elemento sconosciuto viene trattato come display: inline. I nuovi elementi semantici HTML5, tuttavia, sono tutti elementi a livello di blocco per design (come <div>). Quindi in un browser che non conosceva, diciamo, <section>, quell'elemento si disponeva inline invece che come blocco, rompendo silenziosamente margini, larghezze e impilamento.

Un vecchio browser poteva avere due problemi distinti:

Layout — l'elemento esiste ma viene renderizzato inline invece che come blocco. Risolto con una regola CSS (sotto).
Stile in generale — Internet Explorer 8 e versioni precedenti non potevano nemmeno applicare CSS agli elementi non riconosciuti finché non venivano "registrati" tramite JavaScript. Questo è il problema che ha risolto HTML5Shiv.

Elementi Semantici come Elementi a Blocco

HTML5 specifica diversi nuovi elementi semantici, e tutti sono elementi a livello di blocco. Eccoli:

Per forzare questi elementi a renderizzarsi come blocchi in un browser più vecchio, imposta esplicitamente la proprietà CSS display. I browser moderni applicano già questa regola da soli, quindi non fa danni lasciarla:

header, section, footer, aside, nav, main, article, figure {
  display: block;
}

Nota che display: block da solo è sufficiente per correggere il layout. Da solo, non consente a Internet Explorer 8 di applicare stili all'elemento — quella limitazione più vecchia richiedeva lo shim JavaScript descritto di seguito.

HTML5Shiv (Legacy)

Legacy / storico. HTML5Shiv (scritto anche "shim") era un piccolo file JavaScript necessario solo per Internet Explorer 8 e versioni precedenti, che non potevano applicare CSS a elementi sconosciuti. Microsoft ha terminato il supporto per quelle versioni, e Internet Explorer stesso ha raggiunto la fine del ciclo di vita nel 2022. A meno che tu non abbia un requisito esplicito e insolito di supportare IE 8, oggi non hai bisogno di HTML5Shiv. È incluso qui solo per contesto.

Lo shiv viene inserito all'interno del <head> e referenziato in un tag <script>. È racchiuso in un commento condizionale solo per IE (<!--[if lt IE 9]>) in modo che tutti gli altri browser lo ignorino completamente.

Esempio di HTML5Shiv:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <section>
      <h1>The most beautiful places in the world</h1>
      <article>
        <h2>Salar de Uyuni, Bolivia</h2>
        <p>The world's largest salt flats, spanning 4086 miles (10,582 sq. km), Salar de Uyuni is unlike anywhere else on earth.</p>
      </article>
      <article>
        <h2>Moraine Lake, Canada</h2>
        <p>Moraine Lake may be only half the size of its nearby neighbour Lake Louise, but it's even more scenic.</p>
      </article>
      <article>
        <h2>Iguazu Falls, Argentina/Brazil border</h2>
        <p>One of the modern natural wonders of the world, this chain of mini waterfalls is one of the planet's most awe-inspiring sights.</p>
      </article>
    </section>
  </body>
</html>

Provalo tu stesso »

L'Approccio Moderno: Rilevamento delle Funzionalità

I polyfill come lo Shiv correggevano un elemento mancante per uno specifico browser ormai defunto. Il modo contemporaneo di gestire le differenze tra browser è il rilevamento delle funzionalità: invece di chiedere "quale browser è questo?", si chiede "questo browser supporta la funzionalità che voglio?" e ci si adatta di conseguenza.

In CSS, la regola at @supports verifica se una coppia proprietà/valore è compresa prima di applicare un blocco di stili:

/* Use a grid layout only where the browser supports it */
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

In JavaScript, si verifica l'API o la proprietà direttamente:

if ('IntersectionObserver' in window) {
  // Use IntersectionObserver
} else {
  // Provide a fallback
}

Questo schema è più affidabile dello sniffing della versione perché testa la capacità effettiva, e continua a funzionare man mano che vengono rilasciati nuovi browser e versioni. Per gli elementi semantici HTML5 in particolare, non è necessario alcun rilevamento nei browser evergreen di oggi.

Cosa Leggere Ancora

Introduzione a HTML5 — cosa aggiunge HTML5 rispetto alle versioni precedenti.
Elementi Semantici in HTML5 — quando e come usare ogni elemento strutturale.
Migrazione a HTML5 — conversione di un documento HTML 4 più vecchio in HTML5.

Pratica

Quali di questi browser supportano nativamente gli elementi semantici HTML5 (senza shiv)?

Google Chrome attualeFirefox attualeSafari attualeMicrosoft Edge attualeInternet Explorer 8Internet Explorer 6