I wrote this a few weeks back but haven't posted it because I wasn't sure if anyone else might actually find it useful.

It's a polyfill that enables the new (HTML 5) 'scoped' attribute on style blocks.

Style blocks are only valid in the HEAD of an HTML document unless they are marked as scoped. If a block is scoped, any styles defined in it should only affect its parent and its parent's children, not the entire page. Unfortunately, this isn't backwards compatible as any styles defined within a page are applied to the whole page by default. This jQuery plugin parses the page and modifies things so that scoped attributes are respected.

It works by stepping through each block, figuring out which scopes it should apply to (you can also have multiple styles affecting the same scope) then emptying out every non-global style block. It then steps through the page again, re-enabling the right combination of blocks, measuring the styles of each element and reapplying them directly onto the element.

W3C spec on the style element: w3.org/TR/html5/…

Demo page (click to enable scoping) thelab.thingsinjars.com/scoped/…

Blog posts describing it a bit more: thingsinjars.com/post/359/css-scoped/ thingsinjars.com/post/360/scoped-style/

https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin