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 include everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.

Syntax

Statement at-rules

css
/* General structure */
@identifier (RULE);

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

Statement at-rules end in a semicolon. There are several statement 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.

Note: Strictly speaking, @charset is not an at-rule, but a special byte sequence that's stripped before processing the content. Read its reference for more information.

Block at-rules

css
@identifier (RULE) {
}

Block at-rules end in {}-block containing a subset of nested statements, which can be used as a statement of a style sheet as well as inside of conditional group rules.

@counter-style

Defines specific counter styles that are not part of the predefined set of styles.

@container

A conditional group rule that will apply its content if the container meets the <container-condition>s.

@font-face

Describes the aspect of an external font to be downloaded.

@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.

@keyframes

Describes the aspect of intermediate steps in a CSS animation sequence.

@layer

Declares a cascade layer and defines the order of precedence in case of multiple cascade layers.

@media

A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.

@page

Describes the aspect of layout changes that will be applied when printing the document.

@property

Describes the aspect of custom properties and variables.

@scope

A conditional group rule that will apply its content if the device meets the criteria of the given condition.

@starting-style

A conditional group rule that will apply starting transition if the browser meets the criteria of the given condition.

@supports

A conditional group rule that will apply its content if the browser meets the criteria of the given condition.

Index

Specifications

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

See also