Permalink
Browse files

Moved backup styles to element data

  • Loading branch information...
thingsinjars
thingsinjars committed Jan 30, 2011
1 parent 4c548cb commit 7406cf9d10e99409b8d49f9fc277ffc8de590f3e
Showing with 40 additions and 6 deletions.
  1. +34 −0 README.md
  2. +6 −6 jquery.scoped.js
View
@@ -0,0 +1,34 @@
+jQuery Scoped CSS plugin
+========================
+This adds support for the CSS 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
+http://www.w3.org/TR/html5/semantics.html#the-style-element
+
+- Simon Madine
+
+Use
+---
+Include this plugin file (minified, ideally) and call $.scoped() on load
+
+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.
+
+Notes
+-----
+ * Style elements really shouldn't have classes added to them. This functionality should
+ probably use some kind of data attribute.
+ * The scoped blocks are emptied out because there is also no support for the disabled
+ attribute. This plugin could probably enable that attribute as well at no extra cost.
+ * Currently, getElementStyles is hand-rolled and probably wrong.
+
+Versions
+--------
+ * v0.5 2011-01-30
+ * Sibling blocks work, most nested blocks work but some oddness in Webkit means that some
+ styles don't inherit correctly when there are multiple nested declarations.
+
+ * v0.4 2011-01-29
+ * First jQuery plugin version. Works for most cases but gets confused when there are
+ multiple scoped blocks affecting the same context (siblings).
View
@@ -32,8 +32,10 @@
(function ($) {
//Add this to the global jQuery object as we want to apply this once to the entire document
$.scoped = function() {
- var backupStyles = backupBlocks();
-
+
+ //Backup the original styles
+ backupBlocks();
+
//Go through once to add dependencies
$('style').each(function(index) {
if( isScoped($(this)) ) {
@@ -99,13 +101,11 @@
//Save all style tag contents to a temporary array.
//It might be better to move the contents to a data attr
function backupBlocks() {
- var backup = []
$('style').each(function(i) {
if( isScoped($(this)) ) {
- backup[i] = $(this).html();
+ $(this).data('original-style', $(this).html());
}
});
- return backup;
}
//Each style block now has class="depends_on_1 depends_on_2"
//We switch off all the scoped style blocks not mentioned in that list
@@ -123,7 +123,7 @@
function fillBlocks() {
$('style').each(function(i) {
if( isScoped($(this)) ) {
- $(this).html(backupStyles[i]);
+ $(this).html($(this).data('original-style'));
}
});
}

0 comments on commit 7406cf9

Please sign in to comment.