Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin to enable the scoped attribute on style blocks
JavaScript CSS
tree: bae5b0948d

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
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

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.

Notes

  • 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. This plugin could probably enable that attribute as well at no extra cost.
  • 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.
Something went wrong with that request. Please try again.