Do tags still link to media queries that allow false?

Question

Given the following link tags:

<link rel="stylesheet" href="xlarge.css" media="max-width: 70em" /> <link rel="stylesheet" href="large.css" media="max-width: 60em" /> <link rel="stylesheet" href="medium.css" media="max-width: 50em" /> <link rel="stylesheet" href="small.css" media="max-width: 40em" /> <link rel="stylesheet" href="xsmall.css" media="max-width: 30em" /> <link rel="stylesheet" href="retina.css" media="(-webkit-min-device-pixel-ratio: 2)" /> 

At boot time, all six of these stylesheets are loaded, or only those that media queries allowed true? For example, if I were in a browser that supports the retina, which is designed for a midpoint breakpoint, would this lead to only four HTTP requests?

Answer 1

All stylesheets will be loaded regardless of whether media requests are evaluated as true or false. Even the first five media queries that you have that are invalid due to the lack of parentheses around the max-width expressions will not prevent these stylesheets from being requested by the browser. (Invalid media queries simply resolve false automatically.)

In CSS, media queries only control whether the CSS rules in these stylesheets apply to your page, and not whether the stylesheets themselves are requested.