hal*_*bit 25 html css html5 attributes
它在这里说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式作用域
可以使用此元素的上下文:(注释:样式)
Run Code Online (Sandbox Code Playgroud)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> - 全球 - 只在...内 <head> <"scopestyle"> - 只有(!)与bool范围attr和~~仅在开始时 <div>(请阅读"~~",如"或多或少")
但后来的链接已经超过2年了,所有浏览器(我测试过Chrome,FF,IE,Opera)都将流入解释<style>为标题.(忽略AFAIK的范围 - 是 - 仍然没有标准)
所以我的三部分问题
我对W3C文档(2种风格 - 逻辑)的解释是否正确？
现在的状态是什么 - 2015年？
而且,可能有人在那里,谁知道即将到来的什么？
Ale*_*ara 17
您对规范的解释似乎是正确的.在风格上的标签页MDN包含的描述scoped属性.
作用域如果存在此属性,则该样式仅适用于其父元素.如果不存在,则样式适用于整个文档.
scope属性:这是一个工作示例,仅适用于Firefox 21+.
<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+中丢失了优势.
和以前一样,使用style不带scoped属性的标签会创建全局样式,因此只有在包含scoped属性时才会限定范围.
此时,对该功能的支持看起来很黯淡.仅在Firefox 21+中支持CSS范围.Chrome,Internet Explorer,Safari或Opera目前不支持此功能.根据caniuse.com,从Chrome 20到36,可以通过实验标志启用支持,但删除了支持.
CXJ*_*CXJ 10
似乎"scoped"属性已从HTML5规范中完全删除.目前和之前的几个版本都没有提到它.
Edu*_*ual 10
这里的许多答案已经过时了,所以这里简要总结一下该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
| 归档时间： |
|
| 查看次数： |
11799 次 |
| 最近记录： |