CSS @-Rules, an Overview

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

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.

@charset 'utf-8';

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: ' ';
}

@font-face {
  font-family: Headline;
  src: local(Futura-Medium), url(fonts.svg­#MyGeometricModern) format('svg');
}

@import url('fineprint.css') print;

@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

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

}

@media screen and (color), projection and (color) {
  /* … */
}

@namespace svg 'http://www.w3.org/­2000/svg';

@page {

  color: red;

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

}

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #1d9053;
}

@scope div {

  span {
    color: blue;
  }

}

@scope section {

  span {
    color: orange;
  }

}

@supports ( display: flex ) {
  /* … */
}

@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

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 at various companies, including Google; I’m an open-source developer and a 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 with respect to politics and philosophy. Here on meiert.com I talk about some of my experiences and perspectives. (Please share feedback—interpret charitably, keep it friendly, but do be critical.)