UNPKG

@dotsunited/load-css-polyfill

Version:

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

github.com/dotsunited/load-css-polyfill

dotsunited/load-css-polyfill

62 lines (42 loc) • 1.31 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
load-css-polyfill == A simple polyfill for asynchronously loading non-critical CSS using [`link[rel=preload]`](https://w3c.github.io/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. ```html <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](https://caniuse.com/#feat=link-rel-preload) `link[rel=preload]` yet. Installation -- ### npm ```bash npm install @dotsunited/load-css-polyfill --save ``` ### Yarn ```bash yarn add @dotsunited/load-css-polyfill ``` Usage -- Import the package and invoke the `polyfill()`function. ```js 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](https://github.com/filamentgroup/loadCSS/issues/59) by [Scott Jehl](https://github.com/scottjehl) as part of the [loadCSS](https://github.com/filamentgroup/loadCSS) library. License -- Released under the [MIT](LICENSE) license.