Question

12月16日，<main>元素的HTML5扩展规范为submitted to the W3C under something called an editors draft。摘要如下：

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

主要元素形成了识别的常见做法   使用id值的文档的主要内容部分   '内容'和'主要'。它还定义了一个体现的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吗？

Answer 1

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

足够新的浏览器会支持它。
较旧的浏览器会让您设置样式，使其为display: block，并为您提供视觉效果
如果没有JavaScript填充程序（其工作方式与所有其他新容器元素的填充程序完全相同），旧版IE将完全不支持它。

“when”取决于您需要的浏览器支持级别以及您对JS Shim的依赖程度。

Answer 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>元素和{{1元素将是彼此的兄弟姐妹。 <main>元素及其内容将是<div>元素的子元素。即DOM将是：

<main>

但是，现在在浏览器中，HTML +--HEAD +--BODY +--P | +--This is my page preamble ... +--MAIN +--My main content ... +--DIV +--A story成为<main>元素的子元素，而“我的主要内容...”是<p>元素的子元素，<main>元素不是。即DOM具有以下结构：

<div>

当然，现在，通过在序言段落中明确使用HTML +--HEAD +--BODY +--P | +--This is my page preamble ... | +--MAIN | +--My main content ... +--DIV +--A story标记可以轻松避免这种情况，但这对于粗心大意来说是一个陷阱。

Answer 3

{4}} HTML 5.1现在是Webkit中的main element。 implemented即将推出。很快就会Validation support。

Answer 4

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

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

main {display:block;}

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

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

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

我什么时候可以安全地在HTML5中使用新的<main>元素？</main>

4 个答案: