Prise en charge d'HTML5 par les navigateurs | W3docs

Tous les navigateurs evergreen — Chrome, Firefox, Safari et Edge — prennent en charge nativement les éléments sémantiques HTML5 depuis plus d'une décennie (depuis environ 2013). Sur le Web d'aujourd'hui, c'est rarement quelque chose à considérer : vous pouvez écrire <header>, <nav>, <article>, et tout le reste, et cela fonctionne simplement.

Cette page aborde deux sujets connexes. Premièrement, la petite ligne CSS qui garantissait historiquement que les éléments sémantiques s'affichaient en blocs. Deuxièmement — conservé ici principalement pour le contexte historique — le polyfill HTML5Shiv qui était autrefois nécessaire pour que ces éléments fonctionnent dans Internet Explorer 8 et versions antérieures. Nous terminons par la méthode moderne de vérification des capacités du navigateur.

Pourquoi les anciens navigateurs avaient besoin d'aide

Lorsqu'un navigateur rencontre un élément qu'il ne reconnaît pas, il ne l'ignore pas — il le place quand même dans le DOM. La question est de savoir comment il l'affiche. Par défaut, un élément inconnu est traité comme display: inline. Les nouveaux éléments sémantiques HTML5, cependant, sont tous des éléments de niveau bloc par conception (comme <div>). Ainsi, dans un navigateur qui ne connaissait pas, par exemple, <section>, cet élément s'afficherait en ligne plutôt qu'en bloc, rompant silencieusement les marges, les largeurs et l'empilement.

Un ancien navigateur pouvait présenter deux problèmes distincts :

Mise en page — l'élément existe mais s'affiche en ligne au lieu d'en bloc. Corrigé avec une règle CSS (voir ci-dessous).
Stylisation impossible — Internet Explorer 8 et les versions antérieures ne pouvaient pas appliquer de CSS aux éléments qu'ils ne reconnaissaient pas, tant qu'ils n'étaient pas « enregistrés » via JavaScript. C'est le problème que HTML5Shiv a résolu.

Les éléments sémantiques comme éléments de bloc

HTML5 définit plusieurs nouveaux éléments sémantiques, qui sont tous des éléments de niveau bloc. Les voici :

Pour forcer ces éléments à s'afficher en blocs dans un ancien navigateur, définissez explicitement la propriété CSS display. Les navigateurs modernes appliquent déjà cette règle eux-mêmes, donc la laisser en place ne pose aucun problème :

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

Notez que display: block seul suffit à corriger la mise en page. Il ne permet pas, à lui seul, à Internet Explorer 8 d'appliquer un style à l'élément — cette limitation ancienne nécessitait le shim JavaScript décrit ci-après.

HTML5Shiv (Héritage)

Héritage / historique. HTML5Shiv (également orthographié « shim ») était un petit fichier JavaScript nécessaire uniquement pour Internet Explorer 8 et versions antérieures, qui ne pouvaient pas appliquer de CSS aux éléments inconnus. Microsoft a mis fin au support de ces versions, et Internet Explorer lui-même a atteint la fin de vie en 2022. Sauf si vous avez une exigence explicite et inhabituelle de prendre en charge IE 8, vous n'avez pas besoin de HTML5Shiv aujourd'hui. Il est inclus ici uniquement pour le contexte.

Le shiv est placé dans le <head> et référencé dans une balise <script>. Il est enveloppé dans un commentaire conditionnel réservé à IE (<!--[if lt IE 9]>) afin que tous les autres navigateurs l'ignorent complètement.

Exemple d'utilisation de 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>

Essayez vous-même »

L'approche moderne : la détection de fonctionnalités

Les polyfills de type shiv corrigeaient un élément manquant pour un navigateur mort spécifique. La manière contemporaine de gérer les différences entre navigateurs est la détection de fonctionnalités : au lieu de demander « quel navigateur est-ce ? », vous demandez « ce navigateur prend-il en charge la fonctionnalité que je veux ? » et vous vous adaptez en conséquence.

En CSS, la règle at-rule @supports teste si une paire propriété/valeur est comprise avant d'appliquer un bloc de styles :

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

En JavaScript, vous vérifiez l'API ou la propriété directement :

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

Ce modèle est plus fiable que la détection de version car il teste la capacité réelle, et il continue de fonctionner à mesure que de nouveaux navigateurs et versions sont publiés. Pour les éléments sémantiques HTML5 en particulier, aucune détection n'est nécessaire dans les navigateurs evergreen d'aujourd'hui.

Pour aller plus loin

Introduction à HTML5 — ce qu'HTML5 apporte par rapport aux versions précédentes.
Éléments sémantiques en HTML5 — quand et comment utiliser chaque élément structurel.
Migration vers HTML5 — conversion d'un document HTML 4 vers HTML5.

Pratique

Lesquels de ces navigateurs prennent en charge nativement les éléments sémantiques HTML5 (sans shiv requis) ?

Google Chrome actuelFirefox actuelSafari actuelMicrosoft Edge actuelInternet Explorer 8Internet Explorer 6