Do browsers download stylesheets when they don’t match media query

April 19, 2016

Sorry for the lengthy title! Earlier today I was wondering this:

So I created a Github Repo with a reduced test case and ran it on all the major browsers.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Media queries in link elements</title>
    <link rel="stylesheet" href="foo.css" />
    <link rel="stylesheet" media="only screen and (max-width: 500px)" href="bar.css" />
  </head>
  <body>
    <h1>Check the console</h1>
    <h2>How many stylesheets were downloaded?</h2>
  </body>
</html>

Results

All across the board, it looks like browsers will not only download the bar.css file but will block page render just like normal until it’s downloaded. It seems like it might be dangerous to mess around with the rendering process but it would be a cool perf win if browsers could figure out how to skip unnecessary downloads (or at least download them asynchronously!).