An at-rule is a CSS statement that instructs 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.
/* General structure */ @IDENTIFIER (RULE); /* Example: tells browser to use UTF-8 character set */ @charset "utf-8";
There are several 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.@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
)font-variant-alternates
for feature activated differently in OpenType. (at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
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:
Since each conditional group may also contain nested statements, there may be an unspecified amount of nesting.
Specification | Status | Comment |
---|---|---|
CSS Conditional Rules Module Level 3 | Candidate Recommendation | Initial definition |
Compatibility Standard The definition of 'CSS At-rules' in that specification. | Living Standard | Standardizes @-webkit-keyframes . |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule