title: Difference Between HTML LINK Media and CSS Media Queries
body: <p>I know there are 2 ways to add Media queries:</p>
  <p><strong>HTML LINK:</strong></p>
  <pre><code>&lt;LINK REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; MEDIA=&quot;(max-width: 1024px)&quot; HREF=&quot;foo.css&quot;&gt;
  </code></pre>
  <p><strong>CSS:</strong></p>
  <pre><code>@media all and (max-width: 1024px) {
      ......
  }
  </code></pre>
  <p>I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:</p>
  <ol>
  <li><p>Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?</p>
  </li>
  <li><p>Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:</p>
  <p>body {
  padding: 10px;
  }<br />
  @media all and (max-width: 900px) {
  body {
  padding: 5px;
  }<br />
  }<br />
  @media all and (max-width: 800px) {
  body {
  padding: 0px;
  }<br />
  }</p>
  </li>
  </ol>
  <p>If the above file is added using HTML Link like this:</p>
  <pre><code>&lt;LINK REL=&quot;stylesheet&quot; TYPE=&quot;text/css&quot; MEDIA=&quot;(max-width: 1024px)&quot; HREF=&quot;foo.css&quot;&gt;
  </code></pre>
  <p>Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:</p>
  <pre><code>@media all and (max-width: 1024px) {
      body {
         padding: 10px;
      } 
  
      @media all and (max-width: 900px) {
          body {
             padding: 5px;
          } 
  
      }
  
      @media all and (max-width: 800px) {
          body {
             padding: 0px;
          } 
  
      }
  
  }
  </code></pre>
  <p>So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?</p>
  <p><strong>EDIT:</strong>
  I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:</p>
  <ol>
  <li><p>So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?</p>
  </li>
  <li><p>For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media=&quot;(max-width: 1024px)&quot;. But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?</p>
  </li>
  </ol>