Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added sleep for Opera to counter @import delay

  • Loading branch information...
commit 9db30f201dde7299066ed4cfab7e0e2941b48f93 1 parent 50f5075
thingsinjars authored
Showing with 26 additions and 25 deletions.
  1. +7 −14 README.md
  2. +19 −11 jquery.scoped.js
View
21 README.md
@@ -1,8 +1,8 @@
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
-[Check out the spec](http://www.w3.org/TR/html5/semantics.html#the-style-element)
+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.
+
+[Check out the spec on the W3C site](http://www.w3.org/TR/html5/semantics.html#the-style-element)
Use
---
@@ -11,19 +11,12 @@ 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.
- * Opera seems to add an extra display:none on text nodes.
* Remember, IE < 9 support requires a [helping hand](http://code.google.com/p/html5shim) 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 that 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).
+ * 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.
View
30 jquery.scoped.js
@@ -4,7 +4,7 @@
* 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, 30 January 2011
+ * Simon Madine, 1 February 2011
*
* Use:
* Include this plugin file (minified, ideally) and call $.scoped() on load
@@ -82,7 +82,9 @@
}
} else if($.browser.opera) {
for(var n in this_style) {
- this.style.setProperty(n, this_style[n]);
+ if(n != 'content' || this_style[n] != 'none') {
+ this.style.setProperty(n, this_style[n]);
+ }
}
} else {
$(this).css('cssText',this_style);
@@ -99,11 +101,11 @@
//This will stop them affecting out-of-scope elements
$('style').each(function(index) {
if( isScoped($(this)) ) {
- if($.browser.msie) {
- $(this).attr('disabled', 'disabled');
- } else {
- $(this).html('');
- }
+ if($.browser.msie) {
+ $(this).attr('disabled', 'disabled');
+ } else {
+ $(this).html('');
+ }
}
});
@@ -124,7 +126,7 @@
//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
- //The disabled attribute only works on IE but coincidentally,
+ //The disabled attribute only works on IE but coincidentally,
//IE doesn't allow .html() on style blocks.
function emptyBlocks(currentBlock) {
$('style').each(function(i) {
@@ -155,9 +157,12 @@
//Update this bit with some jQuery magic later
function getStylesText(element) {
- if($.browser.msie || $.browser.opera) {
+ if($.browser.msie) {
//We actually work with a style object in IE rather than the text
return element.currentStyle;
+ } else if($.browser.opera) {
+ sleep(50); //Opera takes a short time (~20ms) to resolve styles included via @import
+ return document.defaultView.getComputedStyle(element, null);
} else if($.browser.mozilla) {
//We extract and process the ComputedCSSStyleObject into text
var temp = document.defaultView.getComputedStyle(element, null);
@@ -182,8 +187,11 @@
return chr ? chr.toUpperCase() : '';
});
}
- function uncamelize(string) {
- return string.replace(/[A-Z]/g, '-$&').toLowerCase();
+ function sleep(ms){
+ var dt = new Date();
+ dt.setTime(dt.getTime() + ms);
+ while (new Date().getTime() < dt.getTime()) {};
}
+
}
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.