kristianfreeman.com

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.

#css #tip