Conditional rules

At-rules that apply their contents only when a condition holds — the size or features of the device, whether the browser supports a feature, or the size of an ancestor container.

`@media`

Applies styles when a media query matches: an optional media type ( all , screen , print ) and any number of feature tests joined with and , or , not and commas (comma means or).

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

Wide viewports that also prefer a dark colour scheme.

Common media features:

Feature	Tests
`width` / `height`	Viewport size. Prefix `min-` / `max-`, or use range syntax.
`orientation`	`portrait` or `landscape`.
`aspect-ratio`	The viewport's width-to-height ratio.
`resolution`	Pixel density, e.g. `min-resolution: 2dppx`.
`prefers-color-scheme`	`light` or `dark`.
`prefers-reduced-motion`	`reduce` when the user limits animation.
`hover`	`hover` if the primary pointer can hover.
`pointer`	`fine`, `coarse` or `none`.

Range syntax reads naturally: @media (48rem <= width < 90rem) .

`@supports`

A feature query: applies styles only if the browser understands a given declaration or selector. Combine tests with and , or and not .

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

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

Test a property/value pair, or a selector with selector().

Pair it with not to provide fallbacks: @supports not (aspect-ratio: 1) .

`@container`

A container query: styles an element by the size of its nearest query container rather than the viewport. First mark an ancestor as a container with container-type (and optionally container-name ).

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

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

The heading grows when the card itself — not the viewport — is wide enough.

Container query length units resolve against the query container: cqw , cqh , cqi (inline), cqb (block), cqmin and cqmax .