Atrules

At-rules, sometimes written as atrules, are directives in CSS that begin with the at-sign (@) and extend the language beyond standard selectors and declarations. They provide instructions to the CSS processor about how to interpret, load, or apply styles under certain conditions.

Structure and behavior: An at-rule consists of a name, an optional prelude (parameters or conditions), and either a block enclosed in curly braces or a semicolon-terminated statement. At-rules with blocks may contain nested rules or declarations within the block, while those ending with a semicolon perform an action without an interior block. The exact syntax and allowed content depend on the specific at-rule.

Common examples and purposes: Widely used at-rules include @charset, which declares the document encoding; @import, which loads another stylesheet; @font-face, which defines custom fonts; @media, which applies styles conditionally based on media features; @supports, which activates rules if a feature is supported; @keyframes, which defines animations; @page, used in paged media; and @namespace, which associates a namespace with a document. These at-rules enable responsive design, typography control, animation, print styling, and modular stylesheet organization.

Placement and compatibility notes: Some at-rules have placement constraints. For instance, @charset must appear at the very start of the CSS file, and @import rules must precede other non-at-rule content. Browser support for at-rules generally follows standards, though historically there have been vendor-specific variants (for example, nonstandard or prefixed at-rules) that are largely obsolete in modern CSS.

Overall, at-rules are a core mechanism for controlling CSS behavior, scope, and resource loading, complementing ordinary style rules.