Поддержка HTML5 браузерами

Каждый вечнозелёный браузер — Chrome, Firefox, Safari и Edge — нативно поддерживает семантические элементы HTML5 уже более десяти лет (примерно с 2013 года). В современном вебе об этом почти не нужно задумываться: можно писать <header>, <nav>, <article> и всё остальное — они просто работают.

На этой странице рассматриваются две смежные темы. Первая — одна небольшая строка CSS, которая исторически гарантировала блочную отрисовку семантических элементов. Вторая — главным образом для исторического контекста — полифилл HTML5Shiv, который когда-то был необходим, чтобы эти элементы вообще работали в Internet Explorer 8 и более ранних версиях. В завершение мы рассмотрим современный способ проверки возможностей браузера.

Почему старым браузерам требовалась помощь

Когда браузер встречает незнакомый элемент, он не игнорирует его — элемент всё равно добавляется в DOM. Вопрос в том, как он отображается. По умолчанию неизвестный элемент трактуется как display: inline. Новые семантические элементы HTML5, однако, по замыслу являются блочными (как <div>). Поэтому в браузере, который не знал, скажем, <section>, этот элемент располагался бы в строку вместо блока, незаметно нарушая отступы, ширину и порядок стека.

У старого браузера могли возникать две отдельные проблемы:

Компоновка — элемент существует, но отображается строчно вместо блочного. Исправляется одним правилом CSS (см. ниже).
Стилизация вообще — Internet Explorer 8 и более ранние версии не могли применять CSS к нераспознанным элементам, пока те не были «зарегистрированы» через JavaScript. Именно эту проблему решал HTML5Shiv.

Семантические элементы как блочные элементы

HTML5 определяет несколько новых семантических элементов, и все они являются блочными. Вот они:

Чтобы принудительно отображать эти элементы как блочные в старых браузерах, явно задайте свойство CSS display. Современные браузеры уже применяют это правило самостоятельно, поэтому оставить его в коде не вредно:

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

Обратите внимание: display: block само по себе исправляет лишь компоновку. Оно не делает Internet Explorer 8 способным стилизовать элемент вообще — эта более старая проблема требовала JavaScript-шима, описанного далее.

HTML5Shiv (устаревшее)

Устаревшее / историческое. HTML5Shiv (также пишется «shim») — крошечный JavaScript-файл, необходимый только для Internet Explorer 8 и более ранних версий, которые не могли применять CSS к неизвестным элементам. Microsoft прекратила поддержку этих версий, а сам Internet Explorer достиг конца жизненного цикла в 2022 году. Если у вас нет явных и нестандартных требований поддерживать IE 8, HTML5Shiv вам не нужен. Здесь он приведён исключительно для контекста.

Шив помещается внутрь <head> и подключается тегом <script>. Он обёрнут в условный комментарий только для IE (<!--[if lt IE 9]>), чтобы все остальные браузеры полностью его игнорировали.

Пример 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>

Попробуйте сами »

Современный подход: определение возможностей

Полифиллы вроде шива устраняли отсутствие конкретного элемента в одном конкретном устаревшем браузере. Современный способ обработки различий между браузерами — определение возможностей (feature detection): вместо вопроса «какой это браузер?» задаётся вопрос «поддерживает ли этот браузер нужную мне функцию?» — и код адаптируется соответственно.

В CSS правило @supports проверяет, понимает ли браузер пару свойство/значение, прежде чем применять блок стилей:

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

В JavaScript наличие API или свойства проверяется напрямую:

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

Этот подход надёжнее, чем анализ версий браузера, поскольку тестирует реальную возможность и продолжает работать по мере выхода новых браузеров и версий. Для семантических элементов HTML5 в частности в современных вечнозелёных браузерах никакого определения возможностей не требуется вообще.

Что ещё почитать

Введение в HTML5 — что добавляет HTML5 по сравнению с предыдущими версиями.
Семантические элементы в HTML5 — когда и как использовать каждый структурный элемент.
Миграция на HTML5 — преобразование старого документа HTML 4 в HTML5.

Практика

Какие из этих браузеров поддерживают семантические элементы HTML5 нативно (без шива)?

Текущий Google ChromeТекущий FirefoxТекущий SafariТекущий Microsoft EdgeInternet Explorer 8Internet Explorer 6