HTML5中style元素的“scoped”属性的当前状态是什么？

问题描述 投票：24回答：5

它在这里陈述http://www.w3.org/TR/html-markup/style.html#style：

允许的父元素

任何可以包含元数据元素，div，noscript，section，article的元素

<style>或多或少允许每个地方（允许<div>）但另一方面，我在这里找到更详细的信息http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped

可以使用此元素的上下文:(注释：样式）

If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than inter-element whitespace, and not as the child of an element whose content model is transparent.

以及本文档的后面部分：

scoped属性是布尔属性。如果存在，则表示样式仅适用于以style元素的父元素为根的子树，而不是整个Document。

如果存在scoped属性且元素具有父元素，则style元素必须是其元素之外的元素的第一个节点，而不是元素间空格，并且父元素的内容模型必须不具有透明组件。

这读起来就像（或将会）“两个不同的<style>元素”：a

  • <style> - global - ~~只在<head>内
  • <"scopestyle"> - 只有（！）与bool范围attr和~~仅在<div>开始时

（请阅读“~~”，如“或多或少”）

但后来的链接超过2年，所有浏览器（我测试Chrome，FF，IE，Opera）解释流入的<style>就好像它在标题中一样。 （忽略AFAIK的范围 - 是 - 仍然没有标准）

所以我的三部分问题

  1. 我对W3C文档（2种风格 - 逻辑）的解释是否正确？
  2. 现在的状态是什么 - 2015年？
  3. 而且，可能有人在那里，谁知道即将到来的什么？
html css html5 attributes
5个回答
17
投票

您对规范的解释似乎是正确的。 MDN page on the style tag包含scoped属性的描述。

作用域如果存在此属性，则该样式仅适用于其父元素。如果不存在，则样式适用于整个文档。

The scope attribute:

这是一个工作示例，仅适用于Firefox 21到54。

Example:

<div>
  <p>Out of scope.</p>
  <div>
    <style scoped>
      p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Out of scope.</p>
</div>

在不支持scoped属性的浏览器中，这些样式将全局应用。

The :scope pseudo-selector:

除了scoped属性，还有可以使用的the :scope pseudo-selector。此实现提供与前一个相同的支持。

Example:

<div>
  <p>Outside scope.</p>
  <div>
    <style scoped>
      :scope p {
        background: green;
      }
    </style>
    <p>In scope (green background).</p>
  </div>
  <p>Outside scope.</p>
</div>

此选项还增加了可能的优势，即如果浏览器不理解scoped属性，则不会全局应用样式。唯一的问题是Safari 7+会识别:scope伪选择器，即使不支持scoped属性，因此在Safari 7+中失去了优势。

Global Styles:

和以前一样，使用不带style属性的scoped标签会创建全局样式，因此只有在包含scoped属性时才会限定范围。

Compatibility Summary:

此时，对该功能的支持看起来很黯淡。仅在Firefox 21到54中支持CSS范围。目前在任何主要浏览器，Firefox，Chrome，Internet Explorer，Safari或Opera中都不支持CSS范围。 According to caniuse.com，从Chrome 20到36，可以通过实验标志启用支持，但support was removed。

9
投票

似乎“scoped”属性已从HTML5规范中完全删除。目前和之前的几个版本都没有提到它。

8
投票

这里的许多答案已经过时了，所以这里简要总结一下scoped属性发生了什么。

最初（在HTML5之前），<style>在<head>之外并非“有效”，但得到了大多数或所有浏览器的支持。 “无效”意味着验证者会抱怨它，并且规范（W3C的HTML 4和XHTML 1系列）表示不应该这样做。但它奏效了。有时这很糟糕：无论<style>元素出现在文档中的哪个位置，其规则都适用于整个文档（当然，基于所使用的选择器）。这可能导致作者编写一个“本地”样式表，仅适用于文档的某个区域，但可能会意外地重新设置其他区域。

HTML5的scoped属性提议旨在解决这个问题：它会告诉浏览器该表中的样式仅适用于<style>的父元素及其后代。此外，在某些时候，<style scoped>也必须是其父母的第一个孩子，这使得任何阅读HTML代码的人都非常清楚该范围是什么。没有属性的style元素仅在<head>元素内有效。

时间流逝并没有足够的供应商实现新功能（Firefox和Chrome包括一些实验性支持），因此它最终被删除。浏览器行为仍然与HTML 5之前一样，但当前规范至少记录了它：<style>现在在整个文档中是合法/有效的，但规范警告潜在的副作用（意外重新定位元素）。

根据当前的规范和浏览器行为，实现“范围”样式的最佳和最安全的方法是在ID的帮助下明确地这样做，如在此片段中：

<div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div>

div具有id属性，样式表中的所有规则都明确使用id选择器来确保它们仅在该div中应用。当然，这仍然需要避免文档中的id冲突，但唯一性已经是id属性的要求。

虽然scoped属性被删除了，但是这种方法可以完成工作，具有合理的可读性（当然，就像任何代码一样，它可以被混淆，但这不是重点），应该验证，并且几乎可以在每个CSS兼容的情况下工作浏览器。

PS：根据规范，<style>内的<body>应该验证。然而，Nu验证器（标记为实验性）仍然抱怨它。有一个公开的问题：https://github.com/validator/validator/issues/489

1
投票

截至2016年5月，<style scoped>已从whatwg specification中删除。

0
投票

HTML5的主要目标是正式指定浏览器基本上“永久”实现的行为，而不管以前的HTML规范如何。您始终可以在HTML文档中的任何位置使用<style>标记，因此使用HTML5您仍然可以。这不会改变。

有关详细信息，请参阅<style>元素的当前HTML5规范部分的链接：

http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.