The difference between HTML media queries and CSS media queries

Question

I know that media queries can be declared within either HTML or CSS:

HTML LINK:

<link rel="stylesheet" type="text/css" href="foo.css" media="(max-width: 1024px)">

CSS:

@media all and (max-width: 1024px) {
    ...
}

I have read the documentation and I think I understand most of the differences between the two methods. However, I'm still left with the following questions:

1. For HTML linked resources with media queries, will browsers download the linked resource only when the media query's conditions are met?

2. Lets say if a CSS file also has media queries for smaller widths other than 1024px, something like this:

   body {
       padding: 10px;
   }     
   @media all and (max-width: 900px) {
       body {
           padding: 5px;
       }     
    }    
   @media all and (max-width: 800px) {
       body {
           padding: 0px;
       }     
   }
   

   If the above file is added using an HTML link like this:

   <link rel="stylesheet" type="text/css" htef="foo.css" media="(max-width: 1024px)">
   

   Would this be treated as a nested media query? In other words, will the browser interpret it like this?

   @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;
           }   
       }
   }
   

   I may have further media queries inside a CSS file that is linked with a media query condition that I would want to apply as well.

Answer 1

Regarding the stylesheet download, here is what the current spec draft says:

User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.

This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.

For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting @media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.