@dotsunited/load-css-polyfill

A simple polyfill for asynchronously loading non-critical CSS using link[rel=preload].

Stats

StarsIssuesVersionUpdatedCreatedSize
@dotsunited/load-css-polyfill
101.2.03 years ago4 years agoMinified + gzip package size for @dotsunited/load-css-polyfill in KB

Readme

load-css-polyfill

A simple polyfill for asynchronously loading non-critical CSS using link[rel=preload].

Introduction

Non-critical CSS can be loaded asynchronously by using <link rel="preload" as="style"> with a onload handler that switches rel="preload" to rel="stylesheet" once the file is loaded.

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

This package provides a polyfill for browsers which don't support link[rel=preload] yet.

Installation

npm

npm install @dotsunited/load-css-polyfill --save

Yarn

yarn add @dotsunited/load-css-polyfill

Usage

Import the package and invoke the polyfill()function.

import polyfill from '@dotsunited/load-css-polyfill';

polyfill();

Please note, that you should inline the script in your <head>.

Credits

This package is based on the technique developed by Scott Jehl as part of the loadCSS library.

License

Released under the MIT license.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.