CSS Reference

CSS At-rules

A practical map of the at-rules used to import, condition, organize, animate, and describe CSS. The reference groups statement and block at-rules for imports, conditions, layers, scope, fonts, animation, properties, counters, and paged output.

An at-rule begins with @ and changes how CSS is organized, conditioned, or described. At-rules do not share one grammar: placement, descriptors, and allowed nesting depend on the specific rule.

Some at-rules load resources before ordinary rules, some wrap conditional style rules, and others describe resources such as fonts or animations. Recognizing the category helps determine whether the contents are declarations, descriptors, keyframes, or another list of style rules. This topic also connects with CSS Media Queries and CSS Animations.

Statement and block at-rules

At-rules begin with @. Some end with a semicolon; others contain a block of declarations or nested rules.

@charset declares encoding and, when used, must come first.
@import loads another stylesheet before ordinary rules.
@namespace declares namespaces used by selectors.
@media, @supports, and @container apply conditional rules.
@layer establishes cascade priority groups.
@scope limits selectors to a subtree.
@font-face describes downloadable fonts.
@keyframes defines animation stages.
@property registers a typed custom property.
@page controls paged-media dimensions and margins.
@counter-style defines a custom list marker system.

Example

css

@media (width >= 48rem) {
  @supports (display: grid) {
    .layout { display: grid; }
  }
}

Common At-rules

At-rule	Purpose	Typical form
@media	Applies rules according to a media condition.	@media (width >= 48rem)
@supports	Tests CSS syntax support.	@supports (display: grid)
@container	Queries an ancestor container.	@container card (width > 30rem)
@keyframes	Defines animation stages.	@keyframes fade { ... }
@font-face	Describes a downloadable font.	@font-face { ... }

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS At-rules example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

@media (width >= 48rem) {
  @supports (display: grid) {
    .layout { display: grid; }
  }
}
  </style>
</head>
<body>
  <main class="layout"><h1>Nested conditional rules</h1><p>The layout becomes a grid only when both conditions are understood.</p></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
@supports	28	12	22	9
@container	105	105	110	16
@property	85	85	128	16.4

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Placement rules differ. For example, @import cannot be inserted after ordinary style rules. Check the specific at-rule before nesting or reordering it.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Check each at-rule’s placement and nesting rules; the @ prefix does not make their grammar interchangeable.

Use the reference as a map, then consult the rule’s grammar when placement matters. Pay particular attention to ordering restrictions for imports, the difference between descriptors and ordinary properties, and the browser range for newer organizational rules such as layers and scope.

PreviousDebugging CSS NextCSS Functions