Skip to main content

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​

/* 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")}}
  • {{cssxref("@layer")}}
  • {{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")}}
  • {{cssxref("@container")}}
  • {{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).
  • {{cssxref("@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 {{cssxref("font-variant-alternates")}} in OpenType (CSS fonts).
  • {{cssxref("@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).
  • {{cssxref("@layer")}}
  • {{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")}}
  • {{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 cascade 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).
  • {{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​

See also​