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.


Statement at-rules

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


An algorithm (has the syntactic form of an at-rule, but isn't a definition) that determines the fallback character set used by the style sheet (CSS Syntax).


Tells the CSS engine to include an external style sheet (CSS cascade and inheritance).


Defines the order of precedence in case of multiple cascade layers (CSS cascade and inheritance). Also used as a block at-rule to define a layer's styles.


Defines a default namespace for a style sheet or a namespace prefix that a selector only matches if the namespace and other selector components match (CSS namespaces).

Block at-rules

@identifier (RULE) {

Block at-rules end in a {}-block that contain nested rules, other at-rules, or property or descriptor declarations.


Define custom counter styles and extend predefined list styles (CSS counter styles).


A conditional group rule that applies its content if the container meets the <container-condition>s (CSS containment).


Defines font resource locations, both local and external, along with the style characteristics for when those resources are used with a declared font-family (CSS fonts).

@font-feature-values (plus @swash, @ornaments, @annotation, @stylistic, @styleset and @character-variant)

Controls font display per font-family by defining font-specific alternates, or custom names, to feature indexes in font-variant-alternates in OpenType (CSS fonts).

@keyframes (and the @-webkit-keyframes alias)

Define a named animation by describing defining CSS styles for intermediate steps (or keyframes) in the animation sequence (CSS animations).


Creates a named cascade layer with the CSS rules for that layer inside (CSS cascade and inheritance). Also used as a statement at-rule to define the order of precedence in case of multiple cascade layers


A conditional group rule that applies its content if the device meets the criteria of the condition defined using a media query (CSS conditional rules).


Specifies aspects of a page to be printed, such as its dimensions, orientation, and margins (CSS paged media).


Defines custom position options which can be used to define fallback positioning and alignment options for anchor-positioned elements (CSS anchor positioning).


Defines a CSS custom property, allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not (CSS custom properties for cascading variables).


Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope (CSS cascade and inheritance).


Define the starting property values for an element to transition from when the element receives its first style update, such as when transitioning from display: none (CSS transitions).


A conditional group rule applies its content if the browser supports the CSS features of the given condition (CSS conditional rules).


Opts the current document into a view transition, and the destination document as well in the case of cross-document navigation transitions.



CSS Conditional Rules Module Level 3

See also