Jens Oliver Meiert

CSS @-Rules, an Overview

Published on Sep 11, 2017 (updated Jun 17, 2024), filed under , (feed). (Share this on Mastodon or 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 a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, 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 other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)