Conditional rules

@media

Applies the rules inside it when a media query matches. A query is an optional media type (all, screen or print) and any number of feature tests joined with and, or and not. A comma-separated list matches when any one query in it matches.

@media (width >= 48rem) and (prefers-color-scheme: dark) {
  body { background: #111; }
}

Before range syntax, range features were tested with min- and max- prefixes: (min-width: 48rem) is the same as (width >= 48rem). Both forms still work.

@supports

A feature query: applies the rules inside it only if the browser understands a declaration, selector or other feature. Tests combine with and, or and not, and a browser that does not recognise a test treats it as false.

@supports (display: grid) {
  .layout { display: grid; }
}

@supports selector(:has(*)) {
  /* :has() is available */
}

Pair it with not to write a fallback: @supports not (aspect-ratio: 1).

@container

A container query: styles an element by the size or state of its nearest query container rather than the viewport. Mark an ancestor as a container with container-type, and optionally name it with container-name so a query can target it.

/* mark the container */
.card { container-type: inline-size; container-name: card; }

/* query it */
@container card (width >= 30rem) {
  .card h3 { font-size: 1.5rem; }
}

An element is never its own query container, so the rules inside a query style the container's descendants. Container query length units resolve against the query container: cqw, cqh, cqi (inline), cqb (block), cqmin and cqmax.

any-hover

Whether any of the available input devices can hover over elements. Use hover to ask about the primary input only.

any-pointer

Whether any of the available input devices is a pointer, and how accurate it is. With a mouse and a touchscreen both present, (any-pointer: fine) and (any-pointer: coarse) both match.

aspect-ratio

The width-to-height ratio of the viewport, written as a ratio such as 16 / 9.

color

The number of bits per colour component of the output device, or 0 if it cannot show colour. (color) on its own matches any colour device.

color-gamut

The approximate range of colours the browser and output device can show. Each value matches when the display covers at least that gamut, so a P3 display matches both srgb and p3.

color-index

The number of entries in the output device's colour lookup table, or 0 if it does not use one.

device-aspect-ratio Deprecated

The width-to-height ratio of the whole output device rather than the viewport. Use aspect-ratio instead.

device-height Deprecated

The height of the output device's whole rendering surface rather than the viewport. Use height instead.

device-posture

The posture of a foldable device: continuous when it is flat or not foldable, folded when it is bent like a book or a laptop.

device-width Deprecated

The width of the output device's whole rendering surface rather than the viewport. Use width instead.

display-mode

How an installed web app is being shown, such as in a normal browser tab, in its own window (standalone) or full screen. Most of the values correspond to the display member of the web app manifest.

dynamic-range

Whether the browser and output device can show high dynamic range: high peak brightness, contrast and colour depth.

forced-colors

Whether the browser is replacing page colours with a limited palette chosen by the user, as in Windows contrast themes. Use it to repair details that forced colours remove, not to undo the user's choice.

grid

Whether the output device is grid-based, such as a text terminal, rather than bitmap-based. <mq-boolean> is the integer 0 or 1.

height

The height of the viewport, or of the page box when printing.

horizontal-viewport-segments

The number of side-by-side segments the viewport is split into, as on a dual-screen or folding device. An ordinary screen has one.

hover

Whether the primary input device can hover over elements. A mouse can; a touchscreen usually cannot.

@media (hover: hover) {
  .card:hover { translate: 0 -2px; }
}

inverted-colors

Whether the operating system is inverting all colours on screen, so that images and video can be inverted back.

monochrome

The number of bits per pixel on a monochrome (greyscale) device, or 0 if the device is not monochrome.

orientation

portrait when the viewport is at least as tall as it is wide, otherwise landscape.

overflow-block

How the device handles content that overflows the viewport in the block axis: not at all, by scrolling, or by breaking it into pages as in print.

overflow-inline

Whether content that overflows the viewport in the inline axis can be scrolled into view.

pointer

Whether the primary input device is a pointer and how accurate it is: fine for a mouse or stylus, coarse for a finger on a touchscreen. Use it to give coarse pointers larger targets.

prefers-color-scheme

Whether the user has asked for a light or a dark colour scheme in their system or browser settings.

@media (prefers-color-scheme: dark) {
  :root { --surface: #111; --text: #eee; }
}

prefers-contrast

Whether the user has asked for more or less contrast between colours. custom matches when forced colours are active with a palette that is neither high nor low contrast.

prefers-reduced-motion

Whether the user has asked the system to minimise non-essential motion. When it is reduce, tone down or remove large movements, parallax and autoplaying animation.

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: slide-in 0.6s ease-out; }
}

prefers-reduced-transparency

Whether the user has asked the system to reduce transparent and translucent layers, such as frosted-glass panels.

resolution

The pixel density of the output device, such as 2dppx or 192dpi. infinite matches devices with no physical pixel limit, such as vector displays.

scan

Whether the display draws its image interlaced or progressively. Almost every screen in use today is progressive.

scripting

Whether scripting such as JavaScript is available: enabled, none, or initial-only when scripts run only while the page loads, as in printed output.

update

How quickly the device can change what it shows: none for paper, slow for screens such as e-ink, fast for ordinary screens.

vertical-viewport-segments

The number of stacked segments the viewport is split into, top to bottom, as on a folding device held with the fold horizontal. An ordinary screen has one.

video-dynamic-range

Like dynamic-range, but for the plane that video is drawn on, which on some devices supports high dynamic range when the rest of the page does not.

width

The width of the viewport including any scrollbar, or of the page box when printing. The most common media feature for responsive layout.

em and rem in a media query are relative to the browser's initial font size, not to any font size set in the page.

width, height, inline-size, block-size

The size of the query container's content box in one axis. A container with container-type: inline-size answers only queries in its inline axis (inline-size, and width in horizontal writing modes); queries in the block axis need container-type: size.

aspect-ratio

The width-to-height ratio of the query container's content box. It needs a container with container-type: size.

orientation

portrait when the query container is at least as tall as it is wide, otherwise landscape. It needs a container with container-type: size.

style()

Tests the computed value of a custom property on the container. Every element is a style container, so no container-type is needed; the query looks at the nearest ancestor, or the nearest one with the given container-name. Browsers support custom properties only, not ordinary properties.

.card { --variant: featured; }

@container style(--variant: featured) {
  .card-title { color: crimson; }
}

A bare name such as style(--variant) is true when the property has any value other than its initial value. With range syntax a query can compare values, as in style(--columns > 2).

scroll-state()

Tests the scrolling state of a container that has container-type: scroll-state, using the features stuck, snapped, scrollable and scrolled below. The rules inside style the container's descendants.

header { position: sticky; top: 0; container-type: scroll-state; }

@container scroll-state(stuck: top) {
  header nav { box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }
}

stuck

Inside scroll-state(): whether a sticky-positioned container is currently stuck against the given edge of its scroll container.

snapped

Inside scroll-state(): whether the container is the element its scroll container is currently snapped to, in the given axis.

scrollable

Inside scroll-state(): whether the container, as a scroll container, can be scrolled further in the given direction. Use it to show scroll hints or arrows only when there is more to see.

scrolled

Inside scroll-state(): the direction the container was most recently scrolled in, for example to hide a header while the user scrolls down.

anchored()

Tests the state of an anchor-positioned element that has container-type: anchored. Its fallback feature matches the position option currently in use, so descendants can adapt when the browser flips the element to another side of its anchor.

A <try-tactic> is one or more of flip-block, flip-inline, flip-start, flip-x and flip-y, as used in position-try-fallbacks.