The difference between HTML media queries and CSS media queries

by

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

More Related Contents:

  1. What are the steps to make a HTML design responsive? [closed]
  2. Why are my CSS3 media queries not working on mobile devices?
  3. IE8 support for CSS Media Query
  4. Is it possible to put CSS @media rules inline?
  5. Fixed background image with ios7
  6. Media Queries for Different zoom Levels of Browser
  7. CSS media queries for screen sizes
  8. What can be other ways than @media to make a website responsive suitably if I don’t mention target resolution? [closed]
  9. how to make responsive website for all devices [closed]
  10. Media queries not working inside an iframe
  11. Can flexbox detect when a flex item wraps?
  12. @media queries and image swapping [closed]
  13. How to place elements like this
  14. Vertically align an image inside a div with responsive height
  15. How to keep origin in center of image in scale animation?
  16. How do I *really* justify a horizontal menu in HTML+CSS?
  17. How to hide elements without having them take space on the page?
  18. How can I put an input element on the same line as its label?
  19. Is inside block correct?
  20. Can we set style to title tag in header
  21. How do I disable form fields using CSS?
  22. CSS selector for empty or whitespace
  23. Possible to style the css3 resize function?
  24. Why is my textarea higher up than its neighbor?
  25. How can one create an overlay in css?
  26. Select box arrow style
  27. CSS position element “fixed” inside scrolling container
  28. Is there a way to tell an html element to ignore any stylesheets?
  29. Is it possible to change the order of list items using CSS3?
  30. How to center-justify the last line of text in CSS?

Leave a Comment