> No synchronous external scripts nor blocking external stylesheets I know we have: but for stylesheets, why can't we have something similar? Instead of a JS workaround, can't we have: I hate hate HATE the idea of having css dependent on some JS (even if enabled) that might or might not run depending on what feels like working today.
In the future, (i.e. only Chrome support this) you will be able to do this:
Then it will just be a matter of including this for people with JS switched off:
window.addEventListener( 'load', function sweepUnloadedPreloads() {
window.removeEventListener( 'load', sweepUnloadedPreloads, false );
[].slice.call( document.querySelectorAll( '[rel=preload]' ) )
.forEach( function( item ) {
// simply doing this might work:
item.rel='stylesheet';
/** OR, if that doesn't work (I haven't tested it)**/
var new_link = document.createElement( 'link' );
new_link.rel = 'stylesheet';
new_link.href = item.href;
document.head.appendChild( new_link );
});
}, false );
Preload spec: https://www.w3.org/TR/preload/
Preload support: http://caniuse.com/#feat=link-rel-preload
You could also just put the link element(s) specifying your stylesheet(s) in the body to 'async' it — Stripe does this on stripe.com. It's not valid HTML but very few browsers seem to give a damn.