Permalink
Browse files

Merge branch 'master' of https://github.com/PM5544/scoped-polyfill

merged the upstream changes
  • Loading branch information...
2 parents 7e6a11a + 41892bb commit 3f49b16a23ce19aae40e988ebe56854e5974dcd7 @PM5544 committed Nov 3, 2013
Showing with 42 additions and 30 deletions.
  1. +34 −29 readme.md
  2. +8 −1 scoped.js
View
@@ -1,46 +1,51 @@
-# Scoped polyfill for HTML5 <style scoped> elements
+# Scoped polyfill for HTML5 `<style scoped>` elements
-This code changes the actual &lt;style&gt; node in the DOM instead of computing the styles certain nodes might get and applying them on them inline.
-This is usefull when adding new nodes to a container which is "scoped".
-It does so by prepending the styleRules selectorText with id's to syntheticaly up the styleRules' specificity and thus overriding (if defined in the scoped &lt;style&gt; node) the styles which are inherited from the main HTML.
+This code changes the actual `<style>` node in the DOM instead of computing the styles certain nodes might get and applying them on them inline. This is usefull when adding new nodes to a container that is "scoped".
-[an example](http://pm5544.eu/scoped/ "clicky for example")
-[an example with jQuery](http://pm5544.eu/scoped/indexjquery.htm "clicky for example")
+It does so by prepending the styleRules selectorText with id's to syntheticaly up the styleRules' specificity and thus overriding (if defined in the scoped `<style>` node) the styles which are inherited from the main HTML.
+
+* [An example](http://pm5544.eu/scoped/ "clicky for example")
+* [An example with jQuery](http://pm5544.eu/scoped/indexjquery.htm "clicky for example")
+
+## Tested (and working) on:
-# Tested (and working) on:
* IE 6, 7, 8, 9 (Yes also in all the FrankensteinModes&trade;)
* Firefox latest Mac/Windows/Linux(Ubuntu)
* Google Chrome latest Mac/Windows/Linux(Ubuntu)
* Opera latest Mac/Windows
* Safari latest Mac/Windows
-# Usage:
-* include scoped.js
+## Usage:
+
+* Just include scoped.js
+
+This will polyfill all existing `<style scoped>` nodes in the DOM at that point. If new ones are added later, you can call the function returned by the constructor to convert the new one as well: `scopedPolyFill();`
+
+The position of scoped.js should be after all the `<style scoped>` nodes in the document. If you want to initialize it yourself the position doesn't matter.
-This will polyfill all scoped &lt;style&gt; nodes in the DOM at that point, when new ones are added later, you can call the function the constructor returns to convert that &lt;style scoped&gt; as well.
-The position of scoped.js should be after all the &lt;style scoped&lt; nodes in the document, in the case you want to initialize it yourself the position doesn't matter much (as long as it is defined before you call it ofcourse...)
+If you're a jQuery user you can also pass in a jQuery object with `<style scoped>` nodes and it will polyfill them all.
-If you're a jQuery user you can also use it as follows:
-Pass in a jQuery object with &lt;style scoped&gt; nodes and it will polyfill them all.
+## Features:
-# Features:
-Tests if scoped is supported and if it is it does nothing.
-If scoped is not supported by the browser visiting that page, an empty &lt;style&gt; element is made and appended to the body.
-This is because some browsers don't have a sheet property until appended to the DOM.
-Than it sorts out the different names browsers use to get to the same properties (like rule/cssRule and sheet/getSheet/styleSheet) and returns them into the closurre to only have to check those things once, after that you can just use the compat[ name ] to access it.
-It also checks if the renaming of selectortext is prohibited or not because when changing the &lt;style&gt; its easier to just edit the selectorText instead of copying the rule, changing it and appending it to the &lt;style&gt; and removing the old one.
+* Tests if scoped is supported and if it is it does nothing.
+* If scoped is not supported by the browser visiting that page, an empty `<style>` element is made and appended to the body.
+ * This is because some browsers don't have a sheet property until appended to the DOM.
+* Then it sorts out the different names browsers use to get to the same properties (like rule/cssRule and sheet/getSheet/styleSheet) and returns them into the closurre to only have to check those things once, after that you can just use the compat[ name ] to access it.
+* It also checks if the renaming of selectortext is prohibited or not because when changing the `<style>` its easier to just edit the selectorText instead of copying the rule, changing it and appending it to the `<style>` and removing the old one.
-# Notes:
-This does not completely sandbox the CSS for the HTML inside the &lt;style scoped&gt;'s parentNode, it is meant to work the way scoped is going to work.
+## Notes:
+
+This does not completely sandbox the CSS for the HTML inside the `<style scoped>`'s parentNode, it is meant to work the way scoped is going to work.
+
This way you can inherit styles and override the ones you want to override without leaking those styles to the whole DOM.
-@import and other non-normal style rules are not changed so do not use them in the inline &lt;style&gt;, IE does not expose them via the DOM so to prevent incompatilbilities they are not touched by this code.
+@import and other non-normal style rules are not changed so do not use them in the inline `<style>`, IE does not expose them via the DOM so to prevent incompatilbilities they are not touched by this code.
+
It is possible (though the chance is very small) that an inherited styleRule's CSS selector after polyfilling still is more specific than the scoped styleRule's selector. In that case please just up the specificity of the scoped styleRule's selector and not use !important since this make using user stylesheets a lot more diffucult (for instance for visually impared people who want to override background-color, font-size and color)
-# Settings
-### If you would like to keep your Global scope as clean as possible you could do the following:
-* open scoped.js
-* make sure your cursor is at the beginning of the file
-* press [Del] 20 times
-* save the file
-this will disable the use via jQuery since that way of working needs a reference from the global scope, but it works without it as well, ill wrap it as a jQuery plugin when there's a need but I like the fact that it works with the same code in and out of jQuery now.
+## Misc
+
+### If you would like to keep your Global scope as clean as possible:
+
+Delete the first 20 characters of scoped.js; these: `var scopedPolyFill = `
+This also removes your ability to call the function at runtime, e.g. via jQuery, since that method needs a globally scoped reference. I can wrap it as a jQuery plugin when there's a need, but I like the fact that it works with the same code in and out of jQuery now.
View
@@ -52,7 +52,7 @@ var scopedPolyFill = ( function ( doc, undefined ) {
if ( compat.scopeSupported )
return function (){ return this};
- console && console.log( "No support for <style scoped> found, commencing jumping through hoops in 3, 2, 1..." );
+ window.console && console.log( "No support for <style scoped> found, commencing jumping through hoops in 3, 2, 1..." );
// this was called so we "scope" all the <style> nodes which need to be scoped now
var scopedSheets
@@ -171,6 +171,13 @@ var scopedPolyFill = ( function ( doc, undefined ) {
}
}
}
+
+ // Expose it as a jQuery function for convenience
+ if (typeof jQuery === "function" && typeof jQuery.fn === "object") {
+ jQuery.fn.scopedPolyFill = function(){
+ return this.each(scopeIt);
+ }
+ }
return scopeIt;

0 comments on commit 3f49b16

Please sign in to comment.