At-rules

At-rules are CSS statements that instruct CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.

Syntax

Regular

/* General structure */
@IDENTIFIER (RULE);

/* Example: tells browser to use UTF-8 character set */
@charset "utf-8";

There are several regular at-rules, designated by their identifiers, each with a different syntax:

@charset — Defines the character set used by the style sheet.
@import — Tells the CSS engine to include an external style sheet.
@namespace — Tells the CSS engine that all its content must be considered prefixed with an XML namespace.

Nested

@IDENTIFIER (RULE) {

}

A subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

@media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.
@supports — A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
@document — A conditional group rule that will apply its content if the document in which the style sheet is applied meets the criteria of the given condition. (deferred to Level 4 of CSS Spec)
@page — Describes the aspect of layout changes that will be applied when printing the document.
@font-face — Describes the aspect of an external font to be downloaded.
@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.
@viewport — Describes the aspects of the viewport for small screen devices. (currently at the Working Draft stage)
@counter-style — Defines specific counter styles that are not part of the predefined set of styles. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant) — Define common names in font-variant-alternates for feature activated differently in OpenType. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
@property — Describes the aspect of custom properties and variables. (currently at the Working Draft stage)
@color-profile — Allows a color profile to be defined for use by the color() function.

Conditional group rules

Much like the values of properties, each at-rule has a different syntax. Nevertheless, several of them can be grouped into a special category named conditional group rules. These statements share a common syntax and each of them can include nested statements—either rulesets or nested at-rules. Furthermore, they all convey a common semantic meaning—they all link some type of condition, which at any time evaluates to either true or false. If the condition evaluates to true, then all of the statements within the group will be applied.

Conditional group rules are defined in CSS Conditionals Level 3 and are:

@media,
@supports,
@document. (deferred to Level 4 of CSS Spec)

Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.

Index

Specifications

Specification
CSS Conditional Rules Module Level 3
Compatibility Standard # css-at-rules