CSS At-Rules Reference

Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.

Applies contained CSS rules only when the specified media query matches the user's device, viewport, or environment. It is the foundation of responsive design and print-specific styling.

Styles the page box used when printing or generating paged media, controlling size, margins, and margin boxes like headers and footers. Selectors like :first, :left, :right, and named pages let you target specific pages.

Registers a custom font family from a downloadable source so it can be referenced by font-family. Descriptors control weight, style, unicode range, and how text renders while the font loads.

Defines human-readable names for OpenType feature indices belonging to a specific font family, so authors can activate them via font-variant-alternates. It bridges obscure OpenType tag numbers to memorable identifiers.

Defines a named animation sequence by describing intermediate style waypoints between from (0%) and to (100%). Elements reference the name via the animation-name property to play the sequence.

Registers a typed CSS custom property so the engine knows its syntax, whether it inherits, and its initial value. This unlocks animation and transition of custom properties and rejects invalid values instead of falling back to the string type.

Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.

Declares the character encoding of the stylesheet so the parser can decode non-ASCII bytes correctly. It must be the very first thing in the file, byte for byte, and only utf-8 is meaningful in practice.

Declares one or more cascade layers so authors can control the order in which rule groups cascade, independent of specificity. Layers declared later win over layers declared earlier, and unlayered styles win over all named layers.

Applies rules based on the size or style of a nearest containment context rather than the viewport, enabling truly component-scoped responsiveness. Requires an ancestor that opts in via container-type.

Constrains selectors to a subtree of the DOM defined by a scope root and an optional lower boundary, without adding specificity. It provides native, donut-shaped style scoping similar to what CSS-in-JS libraries emulate.