New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

fg-loadcss

Package Overview
Dependencies
Maintainers
2
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fg-loadcss - npm Package Compare versions

Comparing version
1.1.0
 to
1.2.0
+1
-1
package.json
{
"name": "fg-loadcss",
"version": "1.1.0",
"version": "1.2.0",
"description": "A function for loading CSS asynchronously",

@@ -5,0 +5,0 @@ "main": "src/loadCSS.js",

+3
-3
README.md

@@ -28,9 +28,9 @@ # loadCSS

```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).

@@ -37,0 +37,0 @@ 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`).

+1
-1
src/cssrelpreload.js

@@ -21,3 +21,3 @@ /*! CSS rel=preload polyfill. Depends on loadCSS function. [c]2016 @scottjehl, Filament Group, Inc. Licensed MIT */

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 );

@@ -24,0 +24,0 @@ link.rel = null;

+3
-3
test/preload.html

@@ -7,3 +7,3 @@ <!doctype HTML>

<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>

@@ -113,3 +113,3 @@ <script>

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 );

@@ -159,3 +159,3 @@ link.rel = null;

<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>

@@ -162,0 +162,0 @@ <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>

+1
-1
test/qunit/index.html

@@ -9,3 +9,3 @@ <!DOCTYPE html>

<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>

@@ -12,0 +12,0 @@ <!-- Load local lib and tests. -->