Jens Oliver Meiert

CSS @-Rules, an Overview

Published on Sep 11, 2017 (updated Jun 17, 2024), filed under , . (Share this post, e.g. on Mastodon or on Bluesky.)

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.

NameDescriptionStatusExample
@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: '<color>';
  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.

About Me

Jens Oliver Meiert, on November 9, 2024.

I’m Jens (long: Jens Oliver Meiert), and I’m an engineering lead, guerrilla philosopher, and indie publisher. I’ve worked as a technical lead and engineering manager for companies you use every day (like Google) and companies you’ve never heard of, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), 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 philosophy. Here on meiert.com I share some of my experiences and perspectives. (I value you being critical, interpreting charitably, and giving feedback.)