I

6

52

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?

Idalla answered 20/2, 2015 at 15:53 Comment(3)

If you navigate back to w3.org/TR/html-markup, you'll find that it is obsolete. For some strange reason the notice does not appear anywhere else. – Hewet 20/2, 2015 at 16:43

The scoped attribute may be re-introduced in the future, see: github.com/w3c/csswg-drafts/issues/3547. Anyhow, there is a polyfill. – Kroo 27/1, 2020 at 14:54

W3C Early design review of light-DOM CSS Scope proposal and also Proposal for light-dom scoping/namespacing with re-designed @scope rule – Kagera 17/2, 2021 at 21:30

R

31

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

It's 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.

Rienzi answered 20/2, 2015 at 16:14 Comment(2)

Its now not supported in any browser (March 2019). Shadow DOM styling is probably the successor to this attribute - not exactly, but along the same lines – Sammie 26/3, 2019 at 22:13

@Sammie Yeah, Firefox has removed it also. I've updated the answer to note this. – Illuminism 26/3, 2019 at 22:18

A

52

Many of the answers here have become somewhat obsolete, so here goes a brief summary of what happened with the scoped attribute.

Originally (before HTML5), <style> was not "valid" outside <head>, but was supported by most or all browsers. "not valid" means that validators would complain about it, and the specs (W3C's HTML 4 and XHTML 1 series) said it shouldn't be done. But it worked. And sometimes this was bad: no matter where the <style> element appeared in the document, its rules would apply to the entire document (based on the selectors used, of course). This could lead to authors writing a "local" stylesheet meant to apply only within an area of the document but could accidentaly restyle other areas.

HTML5's scoped attribute proposal was meant to address this: it would tell the browser that the styles in that sheet would only apply to the <style>'s parent element and its descendants. Also, at some point <style scoped> was also required to be the first child of its parent, making it very clear for anyone reading the HTML code what the scope was. The style element without the attribute remained valid only within the <head> element.

Time went by and not enough vendors implemented the new feature (Firefox and Chrome included some experimental support), so it was eventually dropped. The browser behaviour remains as it was before HTML 5, but the current spec at least documents it: <style> is now legal/valid throughout the document, but the spec warns about the potential side effects (restyling elements accidentally).

With current spec and browser behaviour, the best and safest way to implement ''scoped'' styles is to do so explicitly with the help of ID's, as in this snippet:

<div id="myDiv">
  <style>
    #myDiv p { margin: 1em 0; }
    #myDiv em { color: #900; }
    #myDiv whatever { /* ... */ }
  </style>
  <p>Some content here... </p>
</div>

The div has an id attribute, and all the rules in the stylesheet explicitly use an id selector to ensure they only apply within that div. Of course, this still requires to avoid id clashes across the document, but uniqueness is already a requirement of the id attribute.

Although the scoped attribute was dropped, this approach gets the job done, is reasonably readable (of course, like any code, it could be obfuscated, but that's not the point), should validate, and should work on pretty much every CSS-compatible browser.

PS: As per the spec, <style> within <body> should validate. However, the Nu validator (tagged as experimental) still complains about it. There is an open issue regarding this: https://github.com/validator/validator/issues/489

Aegyptus answered 15/8, 2017 at 11:35 Comment(0)

R

31

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

It's 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.

Rienzi answered 20/2, 2015 at 16:14 Comment(2)

Its now not supported in any browser (March 2019). Shadow DOM styling is probably the successor to this attribute - not exactly, but along the same lines – Sammie 26/3, 2019 at 22:13

@Sammie Yeah, Firefox has removed it also. I've updated the answer to note this. – Illuminism 26/3, 2019 at 22:18

U

15

It appears the "scoped" attribute has been completely dropped from the HTML5 specification. The current and previous few versions all have no mention of it.

Unhallowed answered 9/6, 2017 at 18:27 Comment(3)

Sadly enough... See also: github.com/w3c/csswg-drafts/issues/137 – Feininger 20/10, 2017 at 6:58

This suggestion is currently still open: github.com/w3c/csswg-drafts/issues/270 – Bootleg 10/2, 2018 at 21:27

There's also this discussion: github.com/JSFoundation/standards/issues/47 – Bootleg 16/2, 2018 at 19:44

C

5

As of May 2016, <style scoped> has been dropped from whatwg specification.

Combatant answered 7/3, 2018 at 22:7 Comment(0)

D

3

Update from 2020

In current VueJs single file components, there is a style section with a "scoped" attribute that dynamically transforms the CSS classes at "compile" time so that they are limited to the scope of only that component.

How to correctly use "scoped" styles in VueJS single file components?

Personally, I like this approach as centralized CSS tends to get stale and brittle. New developers often just add new classes to a project as they don't want to break existing designs. Cleaning up old CSS never seems to be on anybody's to do list...

Danieu answered 26/2, 2020 at 21:58 Comment(0)

P

1

The primary goal of HTML5 was to formally specify the behavior that browsers have had implemented basically "forever" regardless of previous HTML specs. You've always been able to use a <style> tag anywhere within an HTML document, so with HTML5 you will still be able to. This will not change.

For further information, here's a link to the current HTML5 spec section on the <style> element:

http://www.w3.org/html/wg/drafts/html/master/document-metadata.html#the-style-element

Peplos answered 20/2, 2015 at 16:4 Comment(0)

The `scoped` attribute:

Example:

The `:scope` pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

The `scoped` attribute:

Example:

The `:scope` pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

Recommended topics

Hot tags

The scoped attribute:

Example:

The :scope pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

The scoped attribute:

Example:

The :scope pseudo-selector:

Example:

Global Styles:

Compatibility Summary:

Recommended topics

Hot tags

The `scoped` attribute:

The `:scope` pseudo-selector:

The `scoped` attribute:

The `:scope` pseudo-selector: