What is the Level 4 range syntax?

Media Queries Level 4 lets you write range comparisons directly, such as (width >= 600px) or (400px <= width <= 900px), instead of pairing min-width and max-width. Modern browsers support it widely.

Which features accept min- and max- prefixes?

Range features like width, height, resolution, and aspect-ratio accept min- and max- prefixes (for example min-width). Discrete features like prefers-color-scheme do not, since they are boolean or enumerated.

What does prefers-color-scheme do?

It matches the user's chosen system theme, resolving to light or dark. Use @media (prefers-color-scheme: dark) to apply a dark theme that respects the operating system setting.

How do the logical operators work?

and combines conditions that must all match, comma (,) acts as or, not negates a whole query, and only hides a query from very old browsers. They let you build precise conditions.

Does this reference work offline?

Yes. All feature data ships with the page and the search runs in your browser, so the reference is available without a connection once loaded.

CSS Media Query Reference

Q: Which features accept min- and max- prefixes?

Range features like width, height, resolution, and aspect-ratio accept min- and max- prefixes (for example min-width). Discrete features like prefers-color-scheme do not, since they are boolean or enumerated.

Q: What does prefers-color-scheme do?

It matches the user's chosen system theme, resolving to light or dark. Use @media (prefers-color-scheme: dark) to apply a dark theme that respects the operating system setting.

Q: How do the logical operators work?

and combines conditions that must all match, comma (,) acts as or, not negates a whole query, and only hides a query from very old browsers. They let you build precise conditions.

Q: Does this reference work offline?

Yes. All feature data ships with the page and the search runs in your browser, so the reference is available without a connection once loaded.

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

CSS media query reference

Media queries apply CSS conditionally based on the device, viewport, or user preferences. A query combines an optional media type (such as screen or print), one or more media features (such as min-width or prefers-reduced-motion), and logical operators (and, ,, not, only). This reference lists every standard feature and operator — including the newer Level 4 range and boolean forms — with values and notes, plus instant search.

How it works

A media query evaluates to true or false; when true, the enclosed rules apply. Range features (width, height, aspect-ratio, resolution) can be written with min-/max- prefixes or, in Level 4, with comparison operators directly inside the parentheses. Discrete features (orientation, prefers-color-scheme, hover, pointer) take a fixed set of keywords. Logical operators chain features: and requires all, a comma means or, not negates, and only shields legacy browsers. The filter matches feature names, values, and descriptions.

Tips and example

Level 4 range syntax is cleaner than paired min/max:

/* old */
@media (min-width: 600px) and (max-width: 900px) { ... }

/* level 4 */
@media (600px <= width <= 900px) { ... }

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

Prefer prefers-reduced-motion: reduce to pare back animations for users who request it — an accessibility win.
pointer: coarse and hover: none detect touch devices more reliably than guessing from width alone.
Combine a media type and features with and; separate alternative whole queries with commas.