CSS @-Rules, an Overview

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.

About Me

I’m Jens Oliver Meiert, and I’m a web developer and author. I love trying things (sometimes involving philosophy, art, or adventure). Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment or a message.