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  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. (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  Deprecated  — 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  Experimental  — Describes the aspect of custom properties and variables. (currently at the Working Draft stage)
 
@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 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
 @charset @counter-style 
@document  Deprecated 
 @font-face @font-feature-values @import @keyframes @layer @media @namespace @page 
@property  Experimental 
 @supports 
@viewport  Deprecated 
 Specifications

Specification

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


See also
 CSS key concepts:  CSS syntax Comments Specificity Inheritance Box model Layout modes Visual formatting models Margin collapsing Values  Initial values Computed values Used values Actual values   Value definition syntax Shorthand properties Replaced elements   

Found a problem with this page?

Edit on GitHub
Source on GitHub
Report a problem with this content on GitHub
Want to fix the problem yourself? See our Contribution guide.


Last modified: Aug 18, 2022, by MDN contributors


    
{'path': 'public/docs/css/at-rule.html', 'source': 'DevDocs.IO'}