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

css

/* 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

css

@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 Deprecated — 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.
@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.
@counter-style — Defines specific counter styles that are not part of the predefined set of styles.
@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.
@property — Describes the aspect of custom properties and variables.
@layer – Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.

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:

@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