Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Added sleep for Opera to counter @import delay

  • Loading branch information...
commit 9db30f201dde7299066ed4cfab7e0e2941b48f93 1 parent 50f5075
thingsinjars authored

Showing 2 changed files with 26 additions and 25 deletions. Show diff stats Hide diff stats

  1. +7 14 README.md
  2. +19 11 jquery.scoped.js
21 README.md
Source Rendered
... ... @@ -1,8 +1,8 @@
1 1 jQuery Scoped CSS plugin
2 2 ========================
3   -This adds support for the CSS scoped attribute to limit a block of style declarations
4   -to a specific area of the HTML. You can also use @import and media filters in scoped blocks
5   -[Check out the spec](http://www.w3.org/TR/html5/semantics.html#the-style-element)
  3 +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.
  4 +
  5 +[Check out the spec on the W3C site](http://www.w3.org/TR/html5/semantics.html#the-style-element)
6 6
7 7 Use
8 8 ---
@@ -11,19 +11,12 @@ Include this plugin file (minified, ideally) and call $.scoped() on load
11 11 Limitations
12 12 -----------
13 13 * 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.
14   - * Opera seems to add an extra display:none on text nodes.
15 14 * Remember, IE < 9 support requires a [helping hand](http://code.google.com/p/html5shim) if you're using HTML 5 elements
  15 + * Currently, getElementStyles is hand-rolled and possibly wrong.
16 16
17 17 Notes
18 18 -----
19 19 * Style elements really shouldn't have classes added to them. This bit of the functionality should probably use some kind of data attribute.
20   - * 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.
21   - * Currently, getElementStyles is hand-rolled and probably wrong.
22   -
23   -Versions
24   ---------
25   - * v0.5 2011-01-30
26   - * 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.
27   -
28   - * v0.4 2011-01-29
29   - * First jQuery plugin version. Works for most cases but gets confused when there are multiple scoped blocks affecting the same context (siblings).
  20 + * 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.
  21 + * Opera exhibits a short delay (~20ms) when resolving styles included via @import. There's a forced delay to counter this.
  22 + * Opera seems to add an extra content:none on text nodes.
30 jquery.scoped.js
@@ -4,7 +4,7 @@
4 4 * to a specific area of the HTML. You can also use @import and media filters in scoped blocks
5 5 * http://www.w3.org/TR/html5/semantics.html#the-style-element
6 6 *
7   - * Simon Madine, 30 January 2011
  7 + * Simon Madine, 1 February 2011
8 8 *
9 9 * Use:
10 10 * Include this plugin file (minified, ideally) and call $.scoped() on load
@@ -82,7 +82,9 @@
82 82 }
83 83 } else if($.browser.opera) {
84 84 for(var n in this_style) {
85   - this.style.setProperty(n, this_style[n]);
  85 + if(n != 'content' || this_style[n] != 'none') {
  86 + this.style.setProperty(n, this_style[n]);
  87 + }
86 88 }
87 89 } else {
88 90 $(this).css('cssText',this_style);
@@ -99,11 +101,11 @@
99 101 //This will stop them affecting out-of-scope elements
100 102 $('style').each(function(index) {
101 103 if( isScoped($(this)) ) {
102   - if($.browser.msie) {
103   - $(this).attr('disabled', 'disabled');
104   - } else {
105   - $(this).html('');
106   - }
  104 + if($.browser.msie) {
  105 + $(this).attr('disabled', 'disabled');
  106 + } else {
  107 + $(this).html('');
  108 + }
107 109 }
108 110 });
109 111
@@ -124,7 +126,7 @@
124 126
125 127 //Each style block now has class="depends_on_1 depends_on_2"
126 128 //We switch off all the scoped style blocks not mentioned in that list
127   - //The disabled attribute only works on IE but coincidentally,
  129 + //The disabled attribute only works on IE but coincidentally,
128 130 //IE doesn't allow .html() on style blocks.
129 131 function emptyBlocks(currentBlock) {
130 132 $('style').each(function(i) {
@@ -155,9 +157,12 @@
155 157
156 158 //Update this bit with some jQuery magic later
157 159 function getStylesText(element) {
158   - if($.browser.msie || $.browser.opera) {
  160 + if($.browser.msie) {
159 161 //We actually work with a style object in IE rather than the text
160 162 return element.currentStyle;
  163 + } else if($.browser.opera) {
  164 + sleep(50); //Opera takes a short time (~20ms) to resolve styles included via @import
  165 + return document.defaultView.getComputedStyle(element, null);
161 166 } else if($.browser.mozilla) {
162 167 //We extract and process the ComputedCSSStyleObject into text
163 168 var temp = document.defaultView.getComputedStyle(element, null);
@@ -182,8 +187,11 @@
182 187 return chr ? chr.toUpperCase() : '';
183 188 });
184 189 }
185   - function uncamelize(string) {
186   - return string.replace(/[A-Z]/g, '-$&').toLowerCase();
  190 + function sleep(ms){
  191 + var dt = new Date();
  192 + dt.setTime(dt.getTime() + ms);
  193 + while (new Date().getTime() < dt.getTime()) {};
187 194 }
  195 +
188 196 }
189 197 })(jQuery);

0 comments on commit 9db30f2

Please sign in to comment.
Something went wrong with that request. Please try again.