Difference between HTML LINK Media and CSS Media Queries

Question

I know that there are two ways to add queries to Media:

HTML LINK:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css"> 

CSS

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

I read the documentation and I understand the obvious difference between the two methods. However, the following two questions: I doubt if you can clarify:

1) Does a browser handle HTML Media Link differently in CSS Media Query? I mean, I know that if CSS requests are added inside css, all css files are downloaded to all devices, and only the relevant media requests take effect when the browser interprets the compiled css. But if Media Link is added to HTML, does this mean that browsers will only download foo.css only when for devices with the appropriate specified width? Is there a difference in how the browser handles HTML media links compared to Css media requests or is it anyway, but just different ways to add to a web page?

2) Let's say if foo.css also has media queries for a smaller width 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 you added the above file using an HTML link, follow these steps:

 <LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css"> 

Will this be a sub-media query, how do browsers look at it? What I don’t understand, if added above using the html link, I don’t know if the browser will really look at it like this, which becomes invalid:

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

So my question is: if I have additional media queries inside a css file that is added using the HTML library link, is that right?

EDIT: I looked in the developer tool using chrome from my desktop, and I see that the tablet files load even when viewed from a desktop device:

1) So, with regard to question 1, is it possible to assume that all browsers are included older, and mobile browsers do the same. Download all files, even if they are placed in HTML links?

2) To question 2, I see that chrome uses media queries that are inside css css when the browser screen size changes to the width of the scoreboard. The css file associated for 1024px in html is taken as media = "(max-width: 1024px)". But then, does this mean that the media requests placed inside the css css file are nested media requests? Although it works, isn't it logically wrong? Some more strict browser does not consider it valid?

Answer 1

As for loading styles, here's what the current project shows :

User agents must re-evaluate media queries in response to changes in the user environment, for example, if the device is broken from landscape to portrait orientation and accordingly changes the behavior of any designs that depend on these media queries.

This means that you cannot simply evaluate each media query and then download the corresponding style sheets, as the environment may change, which will lead to a re-evaluation of these media queries. I think this can be optimized, but so far all browsers are loading all stylesheets, regardless of media queries.

For your second question, the specs don't mention any difference between the requested HTML and CSS queries. Nested media queries are allowed because CSS3 and the placement of @media -rules in a stylesheet that is already marked media="…" must be the same as a CSS nested media query.

Answer 2

Here's what the W3C has to say about it :

The media attribute indicates which resources the resource belongs to. the value must be a valid media request.

[...]

However, if the link is a link to an external resource, then the media attribute is prescriptive. The user agent must use an external resource when the value of the media attribute matches the environment and other relevant conditions apply and should not apply otherwise.

Note. . An external resource may have additional restrictions defined in which limits its applicability. For example, a CSS stylesheet might have some @media blocks. This specification does not supersede such further restrictions or requirements.

I tested the behavior in Chrome using the following markup:

 <link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)"> <link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)"> 

• Chrome seems to have downloaded all CSS files regardless of screen resolution.
• However, he only applied rules to match style sheets.
  • And he followed all the relevant @media rules in the stylesheet