Skip to content

Latest commit

 

History

History
35 lines (28 loc) · 1.69 KB

README.md

File metadata and controls

35 lines (28 loc) · 1.69 KB
Raw

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.