CSS @-Rules, an Overview
Published on September 11, 2017 (↻ June 3, 2021), filed under Web Development (RSS feed).
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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. 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 (where applicable) or a message.
Read More
Maybe of interest to you, too:
- Next: The Cost of Frameworks, Illustrated
- Previous: In Defense of Bad Luck
- More under Web Development, or from 2017
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.