The difference between HTML media queries and CSS media queries

Here is what W3C has to say about this:

The media attribute says which media the resource applies to. The
value must be a valid media query.


However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute’s value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.

Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some @media blocks. This specification does not override 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 downloaded all CSS files regardless of screen resolution. However, it applied the rules from matching stylesheet(s) only
  • And it honored all matching @media rules within the stylesheet declared with a media attribute

Leave a Comment