28

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 仕様は進歩的であり、新機能はアップグレードなしで仕様に「ボルトで固定」されています。これは、ブラウザが可能なときに実装を開始することを意味すると思います-問題は、これにはどれくらいの時間がかかり、すべてのブラウザがそれをサポートしていることをどのように知ることができますか? 今のところそのように構築して、ポリフィルに頼るべきですか？

4

4 に答える 4

33

のサポートは<main>、HTML 5 で導入された他の新しいコンテナ要素のサポートとほぼ同じです。

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

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

于 2012-12-19T09:31:43.463 に答える
11

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

提案の将来にとって本当に重要なのは、ブラウザーでの実装です。特に、<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>前文の段落でタグを明示的に使用することで簡単に回避できますが、不注意な人にとっては罠です。

于 2012-12-19T22:58:36.253 に答える
8

HTML 5.1 のメイン要素がWebkit に実装されるようになりました。検証サポートはまもなく続きます。間もなくFirefox が実装されることを期待してください。

于 2013-01-22T10:23:11.427 に答える