A jQuery plugin to enable the scoped attribute on style blocks
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
external.css
index.html
jquery.scoped.js

README.md

jQuery Scoped CSS plugin

This adds support for the scoped attribute to limit a block of style declarations to a specific area of the HTML. You can also use @import and media filters in scoped blocks.

Use

Include this plugin file (minified, ideally) and call $.scoped() on load. If you add style blocks to the page later, you need to rerun the plugin.

Any style blocks with the scoped attribute are processed and limited to only affect their parent's children:

<p>This will be black.</p>
<section>
 <style scoped>
   p {color:red;}
 </style> 
 <p>This will be red.</p>
</section>

Limitations

  • If you're using multiple nested declarations, Webkit might apply different inheritance specificity rules from the other engines. I don't know who's right.
  • Remember, IE < 9 support requires a helping hand if you're using HTML 5 elements
  • Currently, getElementStyles is hand-rolled and possibly wrong.
  • Sometimes there are delays parsing externally loaded stylesheets (via @import) and they might get skipped. Not often but it happens.

Notes

  • If the browser natively supports style scoped, this will return without doing anything
  • Style elements really shouldn't have classes added to them. This bit of the functionality should probably use some kind of data attribute.
  • The scoped blocks are emptied out for non-IE browsers because currently only IE supports the 'disabled' attribute.
  • Opera exhibits a short delay (~20ms) when resolving styles included via @import. There's a forced delay to counter this.
  • Opera seems to add an extra content:none on text nodes.