我何时可以安全地在HTML5中使用新的元素？

On the 16th December, a HTML5 extension specification for the <main> element was submitted to the W3C under something called an editors draft. The abstract is as follows:

在12月16日，

元素的HTML5扩展规范在称为编辑器草稿的情况下提交给W3C。摘要如下：

This specification is an extension to the HTML5 specification [HTML5]. It defines an element to be used for the identification of the main content area of a document. All normative content in the HTML5 specification, unless specifically overridden by this specification, is intended to be the basis for this specification.

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

The main element formalises the common practice of identification of the main content section of a document using the id values such as 'content' and 'main'. It also defines an HTML element that embodies the semantics and function of the WAI-ARIA [ARIA] landmark role=main.

主要元素使用诸如“content”和“main”之类的id值来规范识别文档主要内容部分的通用实践。它还定义了一个HTML元素，它体现了WAI-ARIA [ARIA]标志性角色= main的语义和功能。

Example:

例：

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

It's got all the info in there and I feel I should start incorporating it into web pages. As far as I know now, the HTML5 spec is just progressive with new features been "bolted" on to the spec with no upgrade. I guess that means the browsers will start implementing it when they can - the question is, how long does this take and how do I know all browsers support it? Should I just build it like so for now and resort to a polyfill?

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

4 个解决方案

#1

Support for <main> will be much like support for any other new container element introduced in HTML 5.

对

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

New enough browsers will support it.
足够新的浏览器将支持它。
Older browsers will let you style it so it is display: block and give you the visual effects of it
较旧的浏览器会让你设计它的样式，因此它是display：block并为你提供视觉效果
Older versions of IE won't support it at all without a JavaScript shim (which will work in exactly the same way as the ones for all the other new container elements).
如果没有JavaScript填充程序（其工作方式与所有其他新容器元素的填充程序完全相同），旧版本的IE将完全不支持它。

The "when" depends on what level of browser support you need and how willing you are to depend on a JS shim.

“when”取决于您需要什么级别的浏览器支持以及您依赖JS Shim的意愿。

#2

For now, I would be careful about usng it.

现在，我会小心使用它。

For the future of the proposal, what really matters is implementation in browsers. In particular, because <main> is a proposed block level element, it will require a change to the HTML5 parser implementation as well as giving it the default ARIA role of main.

对于提案的未来，真正重要的是在浏览器中实现。特别是，因为

是一个提议的块级元素，所以需要更改HTML5解析器实现，并为其提供main的默认ARIA角色。

Without the default ARIA role, there is no point to the element, although using it now in preparation for that is a reasonable approach.

如果没有默认的ARIA角色，那么元素就没有意义，尽管现在使用它是一种合理的方法。

The parser change does require a modicum of care though. Remember that the </p> tag is optional. Now suppose you decide that before your "main" content you want a paragraph of preamble. You could write:

解析器更改确实需要一点点谨慎。请记住，标记是可选的。现在假设您在“主要”内容之前决定要一段序言。你可以写：

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

If and when browsers implement the <main> element, the <main> tag will automatically close the <p> element and in the DOM, the <p> element and the <main> element will be siblings of one another. The <div> element and its content will be a child of the <main> element. i.e. The DOM will be:

如果浏览器实现

元素，

标记将自动关闭

元素，而在DOM中，

元素和

元素将成为彼此的兄弟。

元素及其内容将是

元素的子元素。即DOM将是：

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

However, right now in browsers, the <main> becomes a child element of the <p> element, and while "My main content ..." is a child of the <main> element, the <div> element is not. i.e. the DOM has this structure:

但是，现在在浏览器中，

成为

元素的子元素，而“我的主要内容...”是

元素的子元素，而

元素则不是。即DOM具有以下结构：

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

Now, of course, this is easily avoided by explicitly using a </p> tag, on the preamble paragraph, but it is a trap for the unwary.

当然，现在，通过在序言段落中明确使用标签可以很容易地避免这种情况，但这对于粗心大意来说却是一个陷阱。

#3

The HTML 5.1 main element is now implemented in Webkit. Validation support to follow shortly. Expect Firefox implementation soonish.

HTML 5.1主要元素现在在Webkit中实现。验证支持即将推出。期待Firefox的实施很快。

#4

You can go ahead and use it, Chrome 26 and Firefox 21 already implemented it.

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

Just as with the introduction of many other new HTML5 elements, not all browsers recognise <main> or have preset styles for it. You’ll need to ensure it displays as a block level element in your CSS:

正如许多其他新HTML5元素的引入一样，并非所有浏览器都能识别

或具有预设样式。您需要确保它在CSS中显示为块级元素：

main {display:block;}

For the time being, you'll also need to use JavaScript to create the element for older versions of IE:

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

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

Of course, if you use the html5shiv, <main> is now baked in directly.

当然，如果你使用html5shiv，现在直接烘焙

。

#1