“作用域"的当前状态是什么?HTML5 中样式元素的属性? [英] What is the current state of the "scoped" attribute for the style element in HTML5?
问题描述
这里声明 http://www.w3.org/TR/html-markup/style.html#style:
<块引用>允许的父元素
任何可以包含元数据元素的元素,div,noscript,部分,文章,旁白
或多或少在每个地方都被允许(其中
可以使用该元素的上下文:(注释:样式)
如果范围属性不存在:元数据内容的预期位置.如果 scoped 属性不存在:在作为 head 元素的子元素的 noscript 元素中.如果存在 scoped 属性:预期流内容的位置,但在除元素间空白之外的任何其他流内容之前,而不是作为其内容模型是透明的元素的子元素.
以及本文档后面的内容:
<块引用>作用域属性是一个布尔属性.如果存在,则表明样式仅用于以样式为根的子树元素的父元素,而不是整个文档.
如果存在 scoped 属性并且元素有父元素元素,则样式元素必须是流内容的第一个节点在其父元素中而不是元素间空格,并且父元素的内容模型不能有透明组件.
这读起来就像有(或将有)两个不同的元素":一个
- 全局 - ~~仅在
<"scopestyle">
- only(!) with bool scope attr and ~~only at start of(请把~~"读成或多或少")
但是后面的链接已经超过 2 年了,所有浏览器(我测试过 Chrome、FF、IE、Opera)都将流入的
解释为就好像它在标题中一样.(并忽略 AFAIK 范围 - 是 - 仍然没有标准)
所以我的 3 部分问题
我对 W3C 文档(两种样式 - 逻辑)的解释是否正确?
现在是什么状态 - 2015 年?
而且,可能有人在那里,谁知道即将发生什么?
解决方案您对规范的解释似乎是正确的.样式标签上的 MDN 页面包括对
<块引用>scoped
属性.scoped 如果此属性存在,则样式仅适用于其父元素.如果不存在,则样式适用于整个文档.
scope
属性:这是一个仅适用于 Firefox 21 到 54 的工作示例.
示例:
<p>超出范围.</p><div><样式范围>p{背景:绿色;}</风格><p>在范围内(绿色背景).</p><p>超出范围.</p>
在不支持
scoped
属性的浏览器中,这些样式是全局应用的.:scope
伪选择器:除了scoped属性,还有
:scope
可以使用的伪选择器.此实现提供与前一个相同的支持.示例:
<p>范围外.</p><div><样式范围>:范围 p {背景:绿色;}</风格><p>在范围内(绿色背景).</p><p>范围外.</p>
这个选项还增加了一个可能的优势,如果浏览器不理解 scoped
属性,样式将不会被全局应用.唯一的问题是 Safari 7+ 会识别 :scope
伪选择器,即使不支持 scoped
属性,因此在 Safari 7+ 中失去了优势.
全局样式:
和以前一样,使用不带 scoped
属性的 style
标签将创建全局样式,因此只有在包含 scoped
时它才会有作用域> 属性.
兼容性摘要:
在这一点上,对该功能的支持看起来很黯淡.CSS 范围仅在 Firefox 21 到 54 中受支持.目前任何主要浏览器、Firefox、Chrome、Internet Explorer、Safari 或 Opera 都不支持它.根据 caniuse.com,从 Chrome 20 到 36 可以启用对实验的支持标志,但 支持已被移除.
It states here http://www.w3.org/TR/html-markup/style.html#style:
Permitted parent elements
any element that can contain metadata elements, div, noscript, section, article, aside
that <style>
is more or less allowed every where (where <div>
is allowed)
but, on the other hand, I found a more detailed information here http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
Contexts in which this element can be used: (annotation: 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.
and later in this document:
The scoped attribute is a boolean attribute. If present, it indicates that the styles are intended just for the subtree rooted at the style element's parent element, as opposed to the whole Document.
If the scoped attribute is present and the element has a parent element, then the style element must be the first node of flow content in its parent element other than inter-element whitespace, and the parent element's content model must not have a transparent component.
This reads like there are (or will be) "two different <style>
elements": a
<style>
- global - ~~only within<head>
<"scopestyle">
- only(!) with bool scope attr and ~~only at start of<div>
(pls. read "~~" like "more or less")
But the later link is more than 2 years old, and all Browsers (I tested Chrome, FF, IE, Opera) interpret the inflow <style>
as if it was in header. (and ignore AFAIK the scope - yes - still no standard)
So my 3-part question
Is my interpretation of the W3C documents (the 2 styles - logic) correct?
What is the state now - 2015?
And, is there probably someone out there, who knows whats on the horizon coming?
Your interpretation of the specification appears correct. The MDN page on the style tag includes a description of the scoped
attribute.
scoped If this attribute is present, then the style applies only to its parent element. If absent, the style applies to the whole document.
The scope
attribute:
Here is a working example of this that will work in Firefox 21 through 54 only.
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>
In browser that do not support the scoped
attribute, these styles are applied globally.
The :scope
pseudo-selector:
In addition to the scoped attribute, there is also the :scope
pseudo-selector which can be used. This implementation offers the same support as the previous.
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>
This option also adds the possible advantage that if the browser does not understand the scoped
attribute, the styles will not be applied globally. The only problem is that Safari 7+ will recognize the :scope
pseudo-selector, even though the scoped
attribute is not supported, so the advantage is lost in Safari 7+.
Global Styles:
As before, using a style
tag without the scoped
attribute will create global styles, so it will only be scoped if you include the scoped
attribute.
Compatibility Summary:
At this point, support for the feature looks bleak. CSS scoping was supported only in Firefox 21 through 54. It is not currently supported in any major browser, Firefox, Chrome, Internet Explorer, Safari, or Opera. According to caniuse.com, from Chrome 20 to 36 it was possible to enable support with the experimental flag, but support was removed.
这篇关于“作用域"的当前状态是什么?HTML5 中样式元素的属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!