csshtmlattributes

What is the current state of the "scoped" attribute for the style element in HTML5?

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

(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

  1. Is my interpretation of the W3C documents (the 2 styles - logic) correct?

  2. What is the state now - 2015?

  3. And, is there probably someone out there, who knows whats on the horizon coming?

Solution

  • UPDATE. The scoped attribute no longer works in any browser and is now non-standard and deprecated.

    Its successor is the @scope CSS rule.

    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 scoped 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 (UPDATE 2022: the proposal for this feature was completely dropped from standards). 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.