Когда я могу безопасно использовать новый элемент <main> в HTML5?

16 декабря спецификация расширения HTML5 для элемента <main> была представленная W3C под чьей-то редакцией проекта. Реферат выглядит следующим образом:

Эта спецификация является расширением спецификации HTML5 [HTML5]. Он определяет элемент, который будет использоваться для идентификации основного область содержимого документа. Весь нормативный контент в HTML5 спецификации, если только это не отменено этой спецификацией, является основой для этой спецификации.

Основной элемент формализует общую практику идентификации раздел основного контента документа с использованием значений id, таких как 'content' и 'main'. Он также определяет элемент HTML, который воплощает семантика и функция главной роли WAI-ARIA [ARIA] = главная.

Пример:

<!-- other content -->

<main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

<!-- other content -->

Он получил всю информацию там, и я чувствую, что должен начать включать его в веб-страницы. Насколько я знаю, спецификация HTML5 просто прогрессивна, но новые функции были "привязаны" к спецификации без обновления. Я предполагаю, что это означает, что браузеры начнут внедрять его, когда они могут, - вопрос в том, как долго это происходит и как я знаю, что все браузеры поддерживают его? Должен ли я просто построить его так, как сейчас, и прибегнуть к polyfill?

Ответ 1

Поддержка <main> будет очень похожа на поддержку любого другого нового элемента контейнера, представленного в HTML 5.

Будут поддерживаться новые браузеры.
Старые браузеры позволят вам стилизовать его так, чтобы он был display: block и дал вам визуальные эффекты.
Старые версии IE не будут поддерживать его вообще без шага JavaScript (который будет работать точно так же, как и для всех остальных новых элементов контейнера).

"Когда" зависит от того, какой уровень поддержки браузера вам нужен, и как вы готовы зависеть от прокладки JS.

Ответ 2

В настоящее время я буду осторожен в том, чтобы использовать его.

В будущем предложение, что действительно важно, - это реализация в браузерах. В частности, поскольку <main> является предлагаемым элементом уровня блока, он потребует изменения в реализации синтаксического анализа HTML5, а также предоставления ему основной ARIA-роли основного.

Без роли ARIA по умолчанию нет элемента для элемента, хотя использование его в настоящее время для подготовки к этому является разумным подходом.

Однако изменение парсера требует хотя бы незначительной осторожности. Помните, что тег </p> не является обязательным. Теперь предположим, что вы решили, что перед вашим "основным" содержанием вам нужен параграф преамбулы. Вы можете написать:

<!DOCTYPE html>
<body>
  <p> This is my page preamble ...
  <main>
    My main content ...
    <div>
       A story ...
    </div>
  </main>
</body>

Если и когда браузер реализует элемент <main>, тег <main> автоматически закроет элемент <p>, а в DOM элемент <p> и элемент <main> будут братьями и сестрами друг друга. Элемент <div> и его содержимое будут дочерними элементами элемента <main>. то есть DOM будет:

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ... 
     +--MAIN
         +--My main content ...
         +--DIV
             +--A story

Однако теперь в браузерах <main> становится дочерним элементом элемента <p>, а в то время как "My main content..." является дочерним элементом элемента <main>, элемент <div> не является. то есть DOM имеет такую структуру:

HTML
 +--HEAD
 +--BODY
     +--P
     |  +--This is my page preamble ...
     |  +--MAIN
     |      +--My main content ... 
     +--DIV
        +--A story

Теперь, конечно, этого легко избежать, явно используя тег </p>, в параграфе преамбулы, но это ловушка для неосторожного.

Ответ 3

HTML 5.1 основной элемент теперь реализовано в Webkit. Поддержка валидации. Ожидайте Firefox-реализацию в ближайшее время.

Ответ 4

Вы можете использовать его, Chrome 26 и Firefox 21 уже реализовали его.

Так же, как и при введении многих других новых элементов HTML5, не все браузеры распознают <main> или имеют для него предустановленные стили. Вам нужно убедиться, что он отображается как элемент уровня блока в вашем CSS:

main {display:block;}

В настоящее время вам также потребуется использовать JavaScript для создания элемента для более старых версий IE:

<script>document.createElement('main');</script>

Конечно, если вы используете html5shiv, теперь <main> выпекается напрямую.