问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

允许的父元素

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

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

可以使用该元素的上下文：（注解：style）

 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 属性是一个布尔属性。如果存在，则表示样式仅适用于以样式元素的父元素为根的子树，而不是整个文档。

如果存在 scoped 属性并且该元素具有父元素，则样式元素必须是其父元素中流内容的第一个节点（元素间空白除外），并且父元素的内容模型不得具有透明组件。

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

  • <style> - 全局 - ~~仅在 <head>
  • <"scopestyle"> - 仅（！）具有 bool 作用域属性并且 ~~ 仅在 <div> 的开头

（请将“~~”读成“或多或少”）

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

所以我的三部分问题

  1. 我对 W3C 文档（两种样式 - 逻辑）的解释是否正确？

  2. 现在是什么状态 - 2015 年？

  3. 而且，可能有人在那里，谁知道地平线上会发生什么？

原文由 halfbit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译csshtmlattributes
阅读 367
2 个回答
得票最新
社区维基
1
✓ 已被采纳

更新。 scoped 属性不再适用于任何浏览器，现在是 非标准的 并且 已弃用。

您对规范的解释似乎是正确的。 样式标签上的 MDN 页面 包含对 scoped 属性的描述。

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

scoped 属性：

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

例子：

 <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 属性的浏览器中，这些样式将全局应用。

:scope 伪选择器：

除了 scoped 属性外，还有 :scope 伪选择器 可以使用。此实现提供与前一个相同的支持。

例子：

 <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+ 失去了优势。

全局样式：

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

兼容性总结：

在这一点上，对该功能的支持看起来很黯淡（2022 年更新：该功能的提案已完全从标准中删除）。 CSS 作用域仅在 Firefox 21 到 54 中受支持。目前任何主流浏览器、Firefox、Chrome、Internet Explorer、Safari 或 Opera 均不支持它。 根据 caniuse.com 的说法，从 Chrome 20 到 36，可以通过实验标志启用支持，但 支持已被删除。

原文由 Alexander O‘Mara 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

这里的许多答案已经有些过时，所以这里简要总结一下 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

原文由 Edurne Pascual 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题