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

这里写着http://www.w3.org/TR/html-markup/style.html#style:

允许的父元素

可以包含元数据元素、div、noscript、,
节、条、旁

<风格&gt或多或少在每个位置都被允许(其中<div>被允许)
但是,另一方面,我在这里找到了更详细的信息http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-样式范围

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

如果缺少作用域属性:需要元数据内容的位置。
如果缺少scoped属性:在作为head元素的子元素的noscript元素中。
如果存在scoped属性:应该是流内容的位置,但在除元素间空白之外的任何其他流内容之前,而不是作为内容模型是透明的元素的子元素。

在本文件后面部分:

作用域属性是一个布尔属性。如果存在,则表明
样式仅适用于在样式中扎根的子树
元素的父元素,而不是整个文档

如果存在作用域属性且元素具有父元素
元素,则样式元素必须是流内容的第一个节点
在其父元素(元素间空白除外)中,以及
父元素的内容模型不能有透明组件

这看起来好像有(或将有)“两个不同的<style>元素”:a

  • <风格&gt-全局-~~仅在<头&gt
  • <“范围样式”&gt-仅(!)带有布尔范围属性和~~仅在的开头<部门&gt

(请读“~~”如“或多或少”)

但是后面的链接已经有2年多的历史了,所有浏览器(我测试了Chrome、FF、IE、Opera)都解释了流入的<风格&gt就好像它在标题中一样。(忽略范围-是-仍然没有标准)

所以我的三部分问题

  1. 我对W3C文档(2种样式-逻辑)的解释正确吗

  2. 2015年的现状是什么

  3. 还有,可能有人在那里,谁知道地平线上会发生什么

这里的许多答案已经有些过时了,因此这里简要总结了scoped属性的使用情况

最初(HTML5之前),<风格&gt在之外无效<头&gt,但大多数或所有浏览器都支持。“无效”意味着验证器会抱怨它,而规范(W3C的HTML4和XHTML1系列)说不应该这样做。但它奏效了。有时这很糟糕:无论在哪里<风格&gt元素出现在文档中,则其规则将应用于整个文档(当然,基于所使用的选择器)。这可能导致作者编写一个“本地”样式表,该样式表仅适用于文档的某个区域,但可能会意外地重新设置其他区域的样式

HTML5的范围属性建议旨在解决这一问题:它会告诉浏览器该表单中的样式只适用于<风格&gt的父元素及其子元素。此外,在某些情况下<样式范围&gt还必须是其父级的第一个子级,这使任何阅读HTML代码的人都非常清楚其作用域是什么。不带属性的样式元素仅在中保持有效<头&gt元素

随着时间的推移,没有足够的供应商实现这一新功能(Firefox和Chrome提供了一些实验性的支持),因此它最终被放弃了。浏览器行为与HTML5之前一样,但当前规范至少记录了它:<风格&gt现在在整个文档中都是合法/有效的,但是规范警告潜在的副作用(意外地重新设置元素的样式)

对于当前的规范和浏览器行为,实现“范围化”样式的最佳和最安全的方法是在ID的帮助下显式实现,如以下代码段所示:

<div id=“myDiv”>
<风格>
#myDiv p{margin:1em 0;}
#myDiv em{color:#900;}
#myDiv无论什么{/*…*/}
&lt/风格>
<p>这里有一些内容&lt/p>
&lt/部门>

div有一个id属性,样式表中的所有规则都显式地使用一个id选择器,以确保它们只应用于该div。当然,这仍然需要避免文档中的id冲突,但唯一性已经是id属性的要求

虽然删除了范围属性,但这种方法完成了任务,可读性很好(当然,与任何代码一样,它可能会被混淆,但这不是重点),应该进行验证,并且应该适用于几乎所有与CSS兼容的浏览器

PS:根据规范,<风格&gt在内<车身&gt应进行验证。然而,Nu验证器(标记为实验性)仍然对此表示不满。在这方面有一个悬而未决的问题:https://github.com/validator/validator/issues/489

发表评论