The media attribute takes the same media queries as CSS @media (CSS). It works on <link>, <style>, <meta name="theme-color"> and on <source> inside <picture>, <video> and <audio>. A query combines an optional media type (all, print or screen; tv, handheld and the rest are deprecated) with features in parentheses, joined by and, not and or; a comma separates alternative queries. Range syntax such as (600px <= width < 1024px) replaces min-/max- prefixes since Chrome 104 1 , Firefox 63 555 and Safari 16.4 10 .
| Feature | Tests |
|---|---|
| width, height, aspect-ratio, orientation | Viewport size and shape |
| resolution | Pixel density, e.g. (resolution >= 2dppx) |
| hover, pointer, any-hover, any-pointer | Mouse versus touch input |
| prefers-color-scheme, prefers-contrast | Light or dark theme, contrast setting |
| prefers-reduced-motion, forced-colors | Motion and high-contrast settings |
| color-gamut, dynamic-range | Wide-gamut and HDR screens |
| display-mode, scripting | Installed web app; JavaScript available |
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0d1117">
<link rel="stylesheet" href="print.css" media="print">
<picture>
<source srcset="hero-dark.avif" media="(prefers-color-scheme: dark)">
<img src="hero.jpg" alt="Harbor at dawn" width="1200" height="600">
</picture>
<video controls>
<source src="portrait.mp4" media="(orientation: portrait)">
<source src="landscape.mp4">
</video>The first matching <source> wins. media on video sources was restored in 2023 (Chrome 120, Firefox 120; Safari never dropped it), but unlike <picture>, a video picks its source once and ignores later viewport changes. A stylesheet whose query does not match is still downloaded, at low priority, but does not block rendering.