At-rules
{{CSSRef}}
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. They include everything from the at-keyword up to the next semicolon, ; (U+003B SEMICOLON), or the next CSS block, whichever comes first.
At-rules are used to group and structure style rules and other at-rules, declare style information not directly associated with selected content, and manage syntactic constructs such as imports and namespaces keyword mappings.
Syntax
The at-rule is defined in the CSS syntax module, with different at-rules being defined in their respective modules. They generally take one of two forms depending on the specific rule and its purpose: statement at-rules and block at-rules, which can contain nested qualified rules, at-rules, or declarations.
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:
{{cssxref("@charset")}}- : 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).
{{cssxref("@import")}}- : Tells the CSS engine to include an external style sheet (CSS cascading and inheritance).
{{cssxref("@layer")}}- : Defines the order of precedence in case of multiple cascade layers (CSS cascading and inheritance). Also used as a block at-rule to define a layer’s styles.
{{cssxref("@namespace")}}- : 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.
{{cssxref("@counter-style")}}- : Define custom counter styles and extend predefined list styles (CSS counter styles).
{{cssxref("@container")}}- : A conditional group rule that applies its content if the container meets the
<container-condition>s (CSS containment).
- : A conditional group rule that applies its content if the container meets the
{{cssxref("@font-face")}}- : Defines font resource locations, both local and external, along with the style characteristics for when those resources are used with a declared
{{cssxref("font-family")}}(CSS fonts).
- : Defines font resource locations, both local and external, along with the style characteristics for when those resources are used with a declared
{{cssxref("@font-feature-values")}}(plus@swash,@ornaments,@annotation,@stylistic,@stylesetand@character-variant)- : Controls font display per font-family by defining font-specific alternates, or custom names, to feature indexes in
{{cssxref("font-variant-alternates")}}in OpenType (CSS fonts).
- : Controls font display per font-family by defining font-specific alternates, or custom names, to feature indexes in
{{cssxref("@keyframes")}}(and the@-webkit-keyframesalias)- : Define a named animation by describing defining CSS styles for intermediate steps (or keyframes) in the animation sequence (CSS animations).
{{cssxref("@layer")}}- : Creates a named cascade layer with the CSS rules for that layer inside (CSS cascading and inheritance). Also used as a statement at-rule to define the order of precedence in case of multiple cascade layers
{{cssxref("@media")}}- : 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).
{{cssxref("@page")}}- : Specifies aspects of a page to be printed, such as its dimensions, orientation, and margins (CSS paged media).
{{cssxref("@position-try")}}- : Defines custom position options which can be used to define fallback positioning and alignment options for anchor-positioned elements (CSS anchor positioning).
{{cssxref("@property")}}- : 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).
{{cssxref("@scope")}}- : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope (CSS cascading and inheritance).
{{cssxref("@starting-style")}}- : 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).
- : Define the starting property values for an element to transition from when the element receives its first style update, such as when transitioning from
{{cssxref("@supports")}}- : A conditional group rule applies its content if the browser supports the CSS features of the given condition (CSS conditional rules).
{{cssxref("@view-transition")}}- : Opts the current document into a view transition, and the destination document as well in the case of cross-document navigation transitions.
Index
{{cssxref("@charset")}}{{cssxref("@color-profile")}}{{cssxref("@container")}}{{cssxref("@counter-style")}}{{cssxref("@font-face")}}{{cssxref("@font-feature-values")}}{{cssxref("@font-palette-values")}}{{cssxref("@import")}}{{cssxref("@keyframes")}}{{cssxref("@layer")}}{{cssxref("@media")}}{{cssxref("@namespace")}}{{cssxref("@page")}}{{cssxref("@position-try")}}{{cssxref("@property")}}{{cssxref("@scope")}}{{cssxref("@starting-style")}}{{cssxref("@supports")}}{{cssxref("@view-transition")}}
Specifications
{{Specifications}}