CSS @-Rules, an Overview
Published on Sep 11, 2017 (updated Jun 17, 2024), filed under development (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.
Name | Description | Status | Example |
---|---|---|---|
@charset | “ | REC |
|
@counter-style | “ | CR |
|
@font-face | “ | REC |
|
@import | “ | REC |
|
@keyframes | “ | WD |
|
@media | “ | REC |
|
@namespace | “ | REC |
|
@page and sub-rules * | “ | WD |
|
@property | “ | WD |
|
@scope | “The @scope at-rule allows authors to create scoped style rules using CSS syntax.” | WD |
|
@supports | “[Test] whether the user agent supports CSS property:value pairs.“ | CR |
|
@viewport | “ | WD |
|
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 a web developer, manager, and author. I’ve worked as a technical lead and engineering manager for small and large enterprises, 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.)