Defer loading CSS files with one line of code
Here's how to defer CSS loading with one line of code, no extra dependencies needed:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
We're setting the media
property here to "print", meaning that it's only relevant when printing this page. But when onload
fires, we change the media
property to all - meaning it's relevant to the page again. The browser will then load the CSS. It's a tricky but effective way of deferring CSS until after page load.