@dotsunited/load-css-polyfill

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

Usage no npm install needed!

<script type="module">
  import dotsunitedLoadCssPolyfill from 'https://cdn.skypack.dev/@dotsunited/load-css-polyfill';
</script>

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.