Skip to content

as3445/jQuery-Scoped-CSS-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

A jQuery plugin to enable the scoped attribute on style blocks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published