是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？ [英] What is the current state of the "scoped" attribute for the style element in HTML5?

查看：165 发布时间：2016/7/21 22:01:10 html css html5 attributes

本文介绍了是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

它指出这里 http://www.w3.org/TR /html-markup/style.html#style ：

允许的父元素



这可以包含元数据元素，DIV，无脚本的任何元素，
  节，条，除了

这是＆LT;风格＆GT; 或多或少允许每一个地方（其中＆LT; DIV＆GT; 是允许的）
但是，在另一方面，我发现了一个更详细的信息，这里的http://www.w3.org/TR/2012/WD-html5-20121025/the-style-element.html#attr-style-scoped
在上下文此元素可用于：（注释：风格）
 如果作用域属性不存在：其中，元数据内容的预期。
如果作用域属性不存在：在一个头元素的子无脚本元素。
如果作用域属性为present：其中流内容的预期，但比元素间空白以外的任何其他流内容之前，而不是作为一个元素，其内容模型是透明的孩子。
 
和本文档后面的：
该作用域属性是一个布尔属性。如果present，表示
  该样式仅仅用于在风格根的子树
  元素的父元素，而不是整个文件。



如果该作用域属性为present和元素有父
  元素，则样式元素必须是流内容的第一个节点
  在比元素间空白等它的父元素，并且
  父元素的内容模型不能有一个透明的组成部分。

这倒像是有（或将要）两个不同的＆LT;风格＆GT; 元素：一个

＆LT;风格＆GT; - 全球 - ~~只有在＆LT; HEAD＆GT;

＆LT;scopestyle＆GT; - 只与布尔作用域ATTR而~~只有在启动＆LT（！）; DIV＆GT;

（请阅读~~喜欢或多或少）
但后来的链接超过2岁，和所有的浏览器（我测试浏览器，FF，IE，Opera）的跨preT流入＆LT;风格＆GT; 仿佛它是在头部。（而忽略据我所知的范围 - 是 - 仍然没有标准）
所以，我的3个部分的问题。

是W3C文件（2风格 - 逻辑）我间pretation？正确

什么是现在的状态 - 2015年

还有，有可能有人在那里，谁知道什么在未来的地平线？

解决方案

规范的您间pretation出现正确的。在风格标签的 MDN页面包含的说明在范围属性。
范围如果这个属性是present，那么风格只适用于它的父元素。如果不存在，样式适用于整个文档。

的范围属性：
下面是将在Firefox 21+只。
工作的这个工作示例
示例：

\r
\r
＆LT; DIV＆GT;\r   ＆LT; P＆GT;超出范围＆LT; / P＆GT;\r   ＆LT; DIV＆GT;\r     ＆LT;花柱范围＆GT;\r       p {\r         背景：绿色;\r       }\r     ＆LT; /风格＆GT;\r     ＆所述; P＆gt;在范围（绿色背景）所述; / P＆GT;\r   ＆LT; / DIV＆GT;\r   ＆LT; P＆GT;超出范围＆LT; / P＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r
在浏览器不支持范围属性，这些样式是全局上。

的：范围伪选择：
在除了范围属性，也有在的：范围伪选择可以使用。此实现提供了相同的支持previous。
示例：

\r
\r
＆LT; DIV＆GT;\r   ＆所述p为H.;外范围与所述; / P＆GT;\r   ＆LT; DIV＆GT;\r     ＆LT;花柱范围＆GT;\r       ：范围p {\r         背景：绿色;\r       }\r     ＆LT; /风格＆GT;\r     ＆所述; P＆gt;在范围（绿色背景）所述; / P＆GT;\r   ＆LT; / DIV＆GT;\r   ＆所述p为H.;外范围与所述; / P＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r
这个选项也增加了可能的优势，如果浏览器不明白范围属性，样式不会全局应用。唯一的问题是，Safari浏览器7+将识别：范围伪选择，即使范围属性不支持，这样做的好处是在Safari 7 +丢失。

全局样式：
和以前一样，使用风格标记而不范围属性将创建全局样式，因此它只会范围如果包括范围属性。

兼容性摘要：
在这一点上，支持该特性看起来黯淡。 CSS作用域只在Firefox 21+支持。它目前不支持在Chrome，IE浏览器，Safari或Opera。据caniuse.com ，从Chrome的20到36是可能的启用与实验性支持国旗，但<一href=\"https://groups.google.com/a/chromium.org/forum/#!searchin/blink-dev/scoped/blink-dev/R1x18ZLS5qQ/Bjuh_cENhlQJ\"相对=nofollow>支持辗转。
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+ 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 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 is supported only in Firefox 21+. It is not currently supported in 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.

这篇关于是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？ [英] What is the current state of the "scoped" attribute for the style element in HTML5?

问题描述

的`范围`属性：

示例：

的`：范围`伪选择：

示例：

全局样式：

兼容性摘要：

The `scope` attribute:

Example:

The `:scope` pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？ [英] What is the current state of the &quot;scoped&quot; attribute for the style element in HTML5?

问题描述

的范围属性：

示例：

的：范围伪选择：

示例：

全局样式：

兼容性摘要：

The scope attribute:

Example:

The :scope pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

是什么＆QUOT的当前状态;作用域＆QUOT;属性在HTML5的风格元素？ [英] What is the current state of the "scoped" attribute for the style element in HTML5?

的`范围`属性：

的`：范围`伪选择：

The `scope` attribute:

The `:scope` pseudo-selector:

登录关闭