title: Media Queries to load resource?
body: <p>I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).</p>
  <p><strong>Is there a way to use media queries to load only the required stylesheet?</strong></p>
  <p>I have tried:</p>
  <pre><code>@import url(mobile.css) (max-width:599px);
  @import url(tablet.css) (min-width:600px);
  @import url(desktop.css) (min-width:1200px);
  </code></pre>
  <p>and</p>
  <pre><code>&lt;link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' /&gt;
  &lt;!-- and again for tablet and desktop --&gt;
  </code></pre>
  <p>but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.</p>
  <p><strong>Is it possible to load only the wanted resource using media queries?</strong></p>
  <p>I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.</p>
  <h2>Edit</h2>
  <p>Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! <strong>How do I download ONLY the stylesheet I want based on media query?</strong></p>