An experiment in optimized loading of mobile-first responsive CSS.
[c]2012 @scottjehl, MIT/GPLv2
Explanation: Loading CSS in an optimized or prioritized fashion is very difficult. In order for a website to load cleanly, all CSS needed for rendering that page layout must be referenced in the
head of a document. This is because stylesheets loaded in this way will block page rendering until they are loaded and ready to apply. If a stylesheet is referenced later in a document, or even loaded dynamically via JS, users will often see a FOUC while that stylesheet loads concurrently with page rendering. Unfortunately, working within this limitation can make for a lot of overhead on large-scale responsive designs, particularly if a stylesheet contains a large amount of CSS for breakpoints that don't currently apply at a particular viewport size, or worse, won't ever apply on a particular device. More unfortunate, using separate
link elements with
media attributes to reference stylesheets with their intended breakpoints doesn't prevent those stylesheets from downloading or blocking page rendering, even in environments where they don't currently or will never apply, and it also creates more HTTP requests.
If you're in a desktop browser, you can check the console to see which stylesheets were loaded immediately and which were deferred; changing your viewport/window width and reloading the page will change where this split occurs.
In non-JS environments, this optimized loading won't apply, but nonetheless, all available stylesheets will load via a single concatenated request (which is a current best-practice approach to loading CSS, anyway).
Each stylesheet will add a line of text below to announce its presence and whether its intended breakpoint is currently active. Note that this script is merely concerned with improving stylesheet loading performance, but how and where those loaded stylesheets apply is still controlled by CSS media queries.