CSS <style scoped> applies outside of the scope

Question

The most simple example of scoped style doesn't work in Chrome (v 25):

<div>
    <h1>Hello 1</h1>
</div>
<div>
    <h1>Hello 2</h1>
    <style scoped> h1 { color: red; } </style>
</div>

Try it: http://jsfiddle.net/RWW8r/2/

Both h1 become red:

The scope style should only apply to the second h1.

I read that the functionality was implemented in Chrome, why doesn't that work? Am I doing something wrong?

Answer 1

You are not doing anything wrong. As of this moment, scoped CSS is still an experimental feature which is not supported by any current browser.

However, if you want to play around with it in Chrome you can do the following thing:

• Go to chrome://flags/ in your Chrome browser;
• Find "Enable experimental WebKit features." and click enable
• Restart your browser.
• Try your code. It should work.

Answer 2

I think when you read that Chrome has implemented it, they meant that it was in the development version, because it certainly isn't in the current release v25.

See the CanIUse site for compatibility charts: http://caniuse.com/style-scoped

Same applies to Firefox; it's only in the current alpha.

Given the pace of development, it'll be in the release version of both these browsers in a relatively short space of time, but the short answer is that it's not there now.