web-dev-qa-db-ja.com

HTML5で新しい<main>要素を安全に使用できるのはいつですか？

12月16日、<main>要素のHTML5拡張仕様は エディタードラフトと呼ばれるものの下でW3Cに提出されました でした。要約は次のとおりです。

この仕様は、HTML5仕様[HTML5]の拡張です。これは、ドキュメントのメインコンテンツ領域の識別に使用される要素を定義します。 HTML5仕様のすべての規範的なコンテンツは、この仕様によって特に上書きされない限り、この仕様の基礎となることを目的としています。

Main要素は、「content」や「main」などのid値を使用して、ドキュメントのメインコンテンツセクションを識別する一般的な方法を形式化します。また、WAI-ARIA [ARIA]ランドマークrole = mainのセマンティクスと機能を具体化するHTML要素も定義します。

例：

<!-- 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 -->

そこにはすべての情報が含まれているので、それをWebページに組み込むことから始めるべきだと思います。私の知る限り、HTML5仕様は進歩的であり、アップグレードなしで新機能が仕様に「追加」されています。それはブラウザが可能なときにそれを実装し始めることを意味すると思います-問題は、これにどのくらい時間がかかり、すべてのブラウザがそれをサポートしていることをどうやって知るのですか？今のところそのように構築して、ポリフィルに頼るべきですか？

htmlsemantic-markupspecifications
28
rickyduck

へのサポート <main>は、HTML 5で導入された他の新しいコンテナ要素のサポートによく似ています。

  • 十分に新しいブラウザがそれをサポートします。
  • 古いブラウザではスタイルを設定できるので、display: blockそしてあなたにそれの視覚効果を与える
  • 古いバージョンのIEは、JavaScriptシムなしではまったくサポートしません（他のすべての新しいコンテナー要素の場合とまったく同じように機能します）。

「いつ」は、必要なブラウザサポートのレベルと、JSシムにどの程度依存するかによって異なります。

33
Quentin

今のところ、私はそれを使用することに注意します。

提案の将来にとって、本当に重要なのはブラウザでの実装です。特に、<main>はブロックレベルの要素として提案されているため、HTML5パーサーの実装に変更を加え、mainのデフォルトの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>タグを明示的に使用することで簡単に回避できますが、注意を怠るのは罠です。

11
Alohci

HTML 5.1メイン要素 がWebkitで 実装済み になりました。 検証サポート まもなくフォローします。期待 Firefoxの実装 もうすぐだ。

8
Steve Faulkner

あなたは先に進んでそれを使うことができます、Chrome 26とFirefox21はすでにそれを実装しています。

他の多くの新しいHTML5要素の導入と同様に、すべてのブラウザが<main>を認識したり、スタイルが事前設定されているわけではありません。 CSSでブロックレベルの要素として表示されるようにする必要があります。

main {display:block;}

当面は、JavaScriptを使用して古いバージョンのIEの要素を作成する必要もあります。

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

もちろん、 html5shiv を使用すると、<main>が直接ベイクインされるようになりました。

2
Zeno Rocha