https://github.com/zachleat/async-css-loading
Test cases for asynchronous css loading
https://github.com/zachleat/async-css-loading
Last synced: 4 months ago
JSON representation
Test cases for asynchronous css loading
- Host: GitHub
- URL: https://github.com/zachleat/async-css-loading
- Owner: zachleat
- Created: 2017-10-26T02:23:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-02-09T21:15:01.000Z (over 4 years ago)
- Last Synced: 2025-08-12T16:49:11.128Z (10 months ago)
- Language: HTML
- Size: 13.7 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# async-css-loading
Current state of the art is [`filamentgroup/loadCSS`](https://github.com/filamentgroup/loadcss). Every other individual test below has major limitations in at least one modern browser.
## Default (always blocks)
* `` in ``
* [Source code](./default.html)
* [Demo](https://www.zachleat.com/async-css-loading/default.html)
## Link in ``
* `` in middle of ``
* [Source code](./link-body-middle.html)
* [Demo](https://www.zachleat.com/async-css-loading/link-body-middle.html)
* _blocks in Chrome, Chrome for Android, Mobile Safari_
* `` at the end of ``
* [Source code](./link-body-end.html)
* [Demo](https://www.zachleat.com/async-css-loading/link-body-end.html)
* _blocks in Chrome, Chrome for Android, Mobile Safari_
_Related Chromium issue_: [#481122](https://bugs.chromium.org/p/chromium/issues/detail?id=481122) Allow the page to render before `` tags in body
## Attribute toggle using JavaScript
* `` toggles `media` attribute
* [Source code](./link-mediatoggle.html)
* [Demo](https://www.zachleat.com/async-css-loading/link-mediatoggle.html)
* _never applied in Android ≤ 4.3, `` not supported_
* Using `filamentgroup/loadCSS`
* [Source code](./loadcss.html)
* [Demo](https://www.zachleat.com/async-css-loading/loadcss.html)
* _subject to [loadCSS browser support](https://github.com/filamentgroup/loadcss#browser-support)_
* Using `` and toggles `rel` attribute
* [Source code](./preload.html)
* [Demo](https://www.zachleat.com/async-css-loading/preload.html)
* _subject to currently limited [`preload` browser support](http://caniuse.com/#feat=link-rel-preload)_
* Using `` with `filamentgroup/loadCSS` polyfill
* [Source code](./preload-fallback.html)
* [Demo](https://www.zachleat.com/async-css-loading/preload-fallback.html)
* _subject to [loadCSS browser support](https://github.com/filamentgroup/loadcss#browser-support)_
## JavaScript created ``
For browsers obeying the HTML5 specification, these should not block render.
* `document.createElement("link")` in ``
* [Source code](./link-js-body-end.html)
* [Demo](https://www.zachleat.com/async-css-loading/link-js-body-end.html)
* _blocks in Mobile Safari_
* `document.createElement("link")` in ``
* [Source code](./link-js-head.html)
* [Demo](https://www.zachleat.com/async-css-loading/link-js-head.html)
* _blocks in Mobile Safari_
_Related WebKit issue_: [#88869](https://bugs.webkit.org/show_bug.cgi?id=88869) renderer should not block on script-inserted stylesheets
## Extra
### Dependencies
Uses a styles.php to add a `sleep()` call to the stylesheet so that it loads slower.
### Prior Art
* https://github.com/filamentgroup/loadcss
* https://gist.github.com/igrigorik/2935269#file-notes-md