CSS @-Rules, an Overview

Published on September 11, 2017 (↻ June 17, 2024), filed under (RSS feed for all categories).

This post is partially outdated.

Did you know that @media and @import are the two most popular at-rules? (Are they? It’s just an educated guess, please correct me otherwise.) But what are the other at-rules, how many are there? I felt motivated to rummage through a few specs and confirm what’s there. A brief overview, a distant cousin of the much larger HTML elements and CSS properties indexes, one I’ll likewise keep up-to-date.

Name Description Status Example
@charset “[…] artifact of the algorithm used to determine the fallback encoding for the stylesheet.” REC 
@charset 'utf-8';
@counter-style “[…] allows authors to define a custom counter style.” CR 
@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: ' ';
}
@font-face “[…] allows for linking to fonts that are automatically fetched and activated when needed.” REC 
@font-face {
  font-family: Headline;
  src: local(Futura-Medium), url(fonts.svg#MyGeometricModern) format('svg');
}
@import “[…] allows users to import style rules from other style sheets.” REC 
@import url('fineprint.css') print;
@keyframes “[…] specify the values for the animating properties at various points during the animation. The keyframes specify the behavior of one cycle of the animation; the animation may iterate one or more times.” WD 
@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}
@media “[…] declare that sections apply to certain media types.” REC 
@media screen and (color), projection and (color) {
  /* … */
}
@namespace “[…] declares a namespace prefix and associates it with a given namespace name.” REC 
@namespace svg 'http://www.w3.org/2000/svg';
@page and sub-rules * “[…] specify various aspects of a page box, such as its dimensions, orientation, and margins.” WD 
@page {

  color: red;

  @top-center {
    content: 'Page ' counter(page);
  }

}
@property “[…] a custom property registration directly in a stylesheet without having to run any [JavaScript].” WD 
@property --my-color {
  syntax: '‘;
  inherits: false;
  initial-value: #1d9053;
}
@scope “The @scope at-rule allows authors to create scoped style rules using CSS syntax.” WD 
@scope div {

  span {
    color: blue;
  }

}

@scope section {

  span {
    color: orange;
  }

}
@supports “[Test] whether the user agent supports CSS property:value pairs.“ CR 
@supports ( display: flex ) {
  /* … */
}
@viewport “[…] a feature of a user agent for continuous media and used to establish the initial containing block for continuous media.” WD 
@viewport {
  width: 320px auto;
}

Missing here, for now, are @font-feature-values and related at-rules. They’re being worked on in the Level 4 Fonts Module. I’ll extend this post once anything makes it to a more official status. @document was also at one point considered, then, but got dropped.

* @page has 16 sub-rules, from @bottom-center to @top-right-corner. I decided against listing them in the table because that seemed to reduce, not increase comprehension—after all, they’re all related to @page, and all that differs is directionality. If you feel that these sub-rules are important to call out, or if you have suggestions around the matter, please email me.

Was this useful or interesting? Share (toot) this post, become a one-time nano-sponsor, or support my work by learning with my ebooks.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m a frontend engineering leader and tech author/publisher. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m a contributor to several web standards, and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (Please be critical, interpret charitably, and give feedback.)