restore state from 1.0 after some confusion around an outdated spec -…

… 1.1 will be deprecated.
filamentgroup · Mar 5, 2016 · 31eddda · 31eddda
1 parent 9ff4ae2
commit 31eddda
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -25,13 +25,13 @@ Browsers are beginning to support a standard markup pattern for loading CSS (and
 The markup for referencing your CSS file looks like this:
 
 ```html
-<link rel="preload" href="path/to/mystylesheet.css" as="stylesheet" onload="this.rel='stylesheet'">
+<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
 <noscript><link rel="stylesheet" href="path/to/mystylesheet.css"></noscript>
 ```
 
-Since `rel=preload` does not apply the CSS on its own (it merely fetches it), there is an `onload` handler on the `link` that will do that for us as soon as the CSS finishes loading. Since this step requires JavaScript, you may want to include an ordinary reference to your CSS file as well, using a `noscript` element to ensure it only applies in non-JavaScript settings. 
+Since `rel=preload` does not apply the CSS on its own (it merely fetches it), there is an `onload` handler on the `link` that will do that for us as soon as the CSS finishes loading. Since this step requires JavaScript, you may want to include an ordinary reference to your CSS file as well, using a `noscript` element to ensure it only applies in non-JavaScript settings.
 
-With that markup in the `head` of your page, include the [loadCSS script](https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js), as well as the [loadCSS rel=preload polyfill script](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js) in your page (inline to run right away, or in an external file if the CSS is low-priority). 
+With that markup in the `head` of your page, include the [loadCSS script](https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js), as well as the [loadCSS rel=preload polyfill script](https://github.com/filamentgroup/loadCSS/blob/master/src/cssrelpreload.js) in your page (inline to run right away, or in an external file if the CSS is low-priority).
 
 No further configuration is needed, as these scripts will automatically detect if the browsers supports `rel=preload`, and if it does not, they will find CSS files referenced in the DOM and preload them using loadCSS. In browsers that natively support `rel=preload`, these scripts will do nothing, allowing the browser to load and apply the asynchronous CSS (note the `onload` attribute above, which is there to set the `link`'s `rel` attribute to stylesheet once it finishes loading in browsers that support `rel=preload`).
 

diff --git a/src/cssrelpreload.js b/src/cssrelpreload.js
@@ -18,7 +18,7 @@
     var links = w.document.getElementsByTagName( "link" );
     for( var i = 0; i < links.length; i++ ){
       var link = links[ i ];
-      if( link.rel === "preload" && link.getAttribute( "as" ) === "stylesheet" ){
+      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
         w.loadCSS( link.href, link );
         link.rel = null;
       }

diff --git a/test/preload.html b/test/preload.html
@@ -4,7 +4,7 @@
 		<title>CSS link[rel=preload] Polyfill</title>
 		<meta charset="utf-8">
 
-		<link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="stylesheet" onload="this.rel='stylesheet'">
+		<link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="style" onload="this.rel='stylesheet'">
 		<noscript><link rel="stylesheet" href="http://scottjehl.com/css-temp/slow.php"></noscript>
 		<script>
 		/*! loadCSS: load a CSS file asynchronously. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */
@@ -109,7 +109,7 @@
 		    var links = w.document.getElementsByTagName( "link" );
 		    for( var i = 0; i < links.length; i++ ){
 		      var link = links[ i ];
-		      if( link.rel === "preload" && link.getAttribute( "as" ) === "stylesheet" ){
+		      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" ){
 		        w.loadCSS( link.href, link );
 		        link.rel = null;
 		      }
@@ -154,7 +154,7 @@ <h1>Async CSS w/ link[rel=preload]</h1>
 		<p>This is a test page that references a slow-loading stylesheet using the new standard <code>link[rel=preload]</code>.<p>
 
 		<p>That markup looks like this:</p>
-		<pre><code>&lt;link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="stylesheet" onload="this.rel='stylesheet'"&gt;</code></pre>
+		<pre><code>&lt;link rel="preload" href="http://scottjehl.com/css-temp/slow.php" as="style" onload="this.rel='stylesheet'"&gt;</code></pre>
 
 		<p>In supporting browsers (such as Chrome Canary at time of writing), this markup will cause the browser to fetch the CSS file in an asynchronous, non-render-blocking manner, and once loaded, its onload event handler will change its rel property to "stylesheet" causing it to apply visibly in the page (the CSS file will color the page background green once loaded).</p>
 

diff --git a/test/qunit/index.html b/test/qunit/index.html
@@ -6,7 +6,7 @@
 	<meta id="before-test" name=""></meta>
 	<!-- Load local QUnit. -->
 	<link rel="stylesheet" href="./libs/qunit/qunit.css" media="screen">
-	<link rel="preload" href="files/preloadtest.css" id="preloadtest" as="stylesheet" onload="this.rel='stylesheet'">
+	<link rel="preload" href="files/preloadtest.css" id="preloadtest" as="style" onload="this.rel='stylesheet'">
 	<script src="./libs/qunit/qunit.js"></script>
 	<!-- Load local lib and tests. -->
 	<script src="../../src/loadCSS.js" id="loadCSS"></script>