CSS At-Rules Had Their Biggest Year Ever in 2024

CSS at-rules have historically been a slow-moving part of the language. For years, the set of at-rules available to developers barely changed. That pattern broke decisively in 2024, which delivered more new at-rules than any full decade of CSS before it.

The jump is striking when you look at the numbers. There are currently 18 at-rules supported by at least one major browser. If you chart the year each at-rule was first defined in a CSSWG Working Draft, the publication rate looks steady and uneventful. The real story is in browser adoption: seven at-rules were shipped by a major browser for the first time in 2024.

Number of at-rules per year in FWPD. They all have been added at an average rate of 1 per year, with the highest being 4 in 2021
Number of at-rules per year in FWPD visualized by the browsers that implemented them in a colorful vertical bar chart.
Numbers of at-rules with support in at least one major browsers. There have been seven that gained support in 2024
Data collected from caniuse.

The Long Quiet Period

Back in 1998, the CSS 2 recommendation included only two at-rules: @import and @page. That remained the state of affairs until the CSS 2.1 recommendation in 2011, which added @media. Other at-rules such as @font-face, @namespace, and @keyframes had appeared in their own module specs along the way, but CSS had dropped semantic versioning by then, and the language was defined modularly rather than as a single monolithic spec.

The slow pace helps explain a notable gap: why there is a selector() function for the @supports at-rule but no at-rule() counterpart. @supports shipped broadly around 2015, and it was designed to detect support for properties and values before applying styles. At the time, essentially every at-rule already had solid cross-browser support, so there was little practical need to test for at-rules specifically. The situation has changed, and it may be no coincidence that the Chrome team recently updated the status of a at-rule() feature request from New to Assigned.

What the Surge Means

The acceleration is another sign of how quickly the CSS landscape is moving — a pace not seen since CSS 3 first arrived. It also serves as a useful reminder that the language's feature set is no longer static. The at-rules a developer needed to know five years ago are no longer the full picture, and the tooling around feature detection will need to keep up.