28

<main>12 月 16 日，该元素的 HTML5 扩展规范在名为 editors draft 的文件下提交给了 W3C。摘要如下：

该规范是 HTML5 规范 [HTML5] 的扩展。它定义了一个元素，用于标识文档的主要内容区域。HTML5 规范中的所有规范性内容，除非被本规范明确覆盖，都旨在成为本规范的基础。

main 元素形式化了使用 id 值（例如“content”和“main”）来识别文档的主要内容部分的常见做法。它还定义了体现 WAI-ARIA [ARIA] 地标角色=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 -->

里面有所有的信息，我觉得我应该开始将它整合到网页中。据我所知，HTML5 规范只是渐进式的，新功能被“固定”到规范中，没有升级。我想这意味着浏览器会在可能的时候开始实现它——问题是，这需要多长时间，我怎么知道所有浏览器都支持它？我现在应该像这样构建它并使用polyfill吗？

4

4 回答 4

33

对的支持<main>与对 HTML 5 中引入的任何其他新容器元素的支持非常相似。

  • 足够新的浏览器将支持它。
  • 较旧的浏览器将允许您对其进行样式display: block设置并为您提供它的视觉效果
  • 如果没有 JavaScript shim，旧版本的 IE 根本不支持它（它的工作方式与所有其他新容器元素的工作方式完全相同）。

“何时”取决于您需要什么级别的浏览器支持以及您对 JS shim 的依赖程度。

于 2012-12-19T09:31:43.463 回答
11

现在，我会小心使用它。

对于提案的未来，真正重要的是在浏览器中的实现。特别是，因为<main>它是一个建议的块级元素，它需要对 HTML5 解析器实现进行更改，并为其赋予默认的 ARIA 角色 main。

没有默认的 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>，而“我的主要内容...”是元素的子<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 回答
2

你可以继续使用它，Chrome 26 和 Firefox 21 已经实现了它。

就像许多其他新的 HTML5 元素的引入一样，并非所有浏览器都能识别<main>或预设样式。您需要确保它在 CSS 中显示为块级元素：

main {display:block;}

目前，您还需要使用 JavaScript 为旧版本的 IE 创建元素：

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

当然，如果你使用html5shiv，<main>现在直接烘焙了。

于 2013-08-06T19:23:34.063 回答