The scoped attribute for the <style> element allows you to include styles mid-document that targets a specific element and its children. Depending upon how you look at this, it’ll either be a godsend or a curse. Once you’ve reached the end of this article, I hope you can form your own opinion.

Let’s take a quick look at the spec:

The scoped attribute is a boolean attribute. If set, 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. — WHATWG

Isn’t this bad practice? For years, we’ve been told (and have actively told others) to separate content and presentation layers. So why would we introduce something that seems to go against everything we’ve been preaching? The separation of these layers is still vitally important, but let’s look at a few use cases to shed some light on why this attribute has been introduced. Scoped style provides a W3C-approved way to: Add one-off CSS styles.

Add user-defined styles to wiki or CMS content.

Add theme-defined styles via CMS plugins.

Keep syndicated content together (e.g., keeping example code together with the example).

How does it work? In this section, I’ll show you how this new attribute will work when it gets rolled out to browsers. Our starting point We’ll be using the following code sample as a starting point: <article> <h1>Style Scoped</h1> <p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p> <section> <h2>How does it work?</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </section> </article> This is a basic example, with two headings and two paragraphs set within the article element. Adding the scoped attribute In the next example, we’ll change the foreground color of the second paragraph to red (from whatever was defined in the master CSS file): <article> <h1>Style Scoped</h1> <p>The scoped attribute for the style element will eventually allow for you to include style elements mid-document. To do this, you must mark up your style element with the scoped attribute.</p> <section> <style scoped > p { color: red; } </style> <h2>How does it work?</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </section> </article> It’s worth noting that the scoped attribute can’t be the first attribute of the body element. I also received a validation error using <body style="..."> . This screenshot shows how things might render in the browser: How the scoped attribute will render

Can I apply scoped to <link>? While I was writing this article, Dr. Rich asked whether it was possible to add this attribute to <link> elements. Turns out you can’t, but I stumbled across this tidbit in the WHATWG mailing list: You can use <style scoped>@import url(whatever);</style> And this even enables you to add some specific styles ([be they embedded] or from another external sheet) on a per-use basis if the need arises. For example, a long dissertation relying on many quotes may benefit from adding stronger visual highlights on the <em> elements within the last quote to reinforce the final conclusion. — Eduard Pascuals WHATWG mailing list response #031049

Backwards compatibility Unfortunately, scoped style isn’t all puppy dogs and kittens. Since this newly introduced attribute isn’t understood by current browsers, CSS rules in <style scoped> are just added to the page’s CSS. Therefore, if you were to include a scoped style block mid-page, its declarations would be applied to every matching element in the document, regardless of whether the element were inside or outside of the scope’s range. For the sake of backwards compatibility, Louis Lazaris has suggested a brand new element called <scopedstyle> . This new element would only be recognised by supporting browsers and ignored by everything else. This way, scoped styles wouldn’t be added to the whole document. Instead, the browser would just throw away the unrecognised <scopedstyle> element and move on.

Browser support Browser support for <style scoped> (as of 6th September, 2011 ) Browser Support Chrome 13 No Safari 5 No Firefox 6 No Opera 11.51 No Internet Explorer 9 No Currently, the scoped attribute isn’t working in any of the browser alpha versions (Opera.Next, Mozilla Aurora, or WebKit nightly builds). There’s work in progress by Roland Steiner for support in WebKit.

Using <style scoped> today So you’ve read this article and decided that you need scoped style in your life. What now? Well, just like every other new HTML5 thing, we have a polyfill for it. Simon Madine has created a jQuery scoped CSS plugin on GitHub. Please note that Oli used a wrapper <div> because of validation problems explained in this bug. You could also assign a CSS prefix to target the section of your document you want to style. You’d still be able to stick your styles inline, but you’ve also provided a fallback for the older browsers. In fact, Dr. Oli has done just that on his latest article. (View source and search for <div class="faint"> .)