2024: More CSS At-Rules Than The Past Decade Combined

As I write, I find myself delving into random but interesting topics that have little to do with the original post more times than I can count. In the end, I have to make the simple but painful decision to delete or archive hours of research and writing because I know that most people click on a post and have a certain expectation of what they’re going to get, and I know that I It’s not like I’m bombarding you with unrelated insults about CSS.

This happened to me while working Monday’s article about at rules. I just focused on a series of recipes there to test browser support for CSS-at-rules. It became clear to me My goodness, we have so many new at-rules – I wonder how many of them are from this year alone. This is the rabbit hole I found myself down when I was finishing the article I was working on.

And guess what, my guess was right: The year 2024 has brought with it more at-rules than a decade of CSS.

It all started with me wondering why we got one selector() Wrapper function for the @supports at-rule, but still waiting for one at-rule() Version. I can’t pinpoint the exact reason for this, but I’m sure there wasn’t much need to check at-rules support because, well, there weren’t that many of them – we only got them recently a godsend of at-rules.

Some historical context

So, around 1998, when the CSS 2 recommendation was published, @import And @page were the only at rules that made it into the CSS specification. This remained the case until the CSS 2.1 recommendation was introduced in 2011 @media. Of course there were other at-rules like – @font-face, @namespace And @keyframes to name just a few – which have already debuted in their respective modules. At this point, CSS abandoned semantic versioning, and the specification did not provide a true picture of the whole, but rather individual modules organized by functionality.

Random Tangent: The last one accepted The consensus is that we are at “CSS 3,” but that was a decade ago, and some even say we should start with CSS 5. Wherever we are, however, is beside the point It’s certainly a topic of discussion. Does it even make sense to have a named version?

The @supports at-rule was published in 2011 CSS conditional rules module, level 3 — Levels 1 and 2 don’t officially exist, but refer to the original CSS recommendations 1 and 2. We didn’t actually get support for this in most browsers until 2015, and by then the existing at-rules already had widespread support. The @supports was only aimed at new properties and values ​​and was intended to test browser support for CSS features before attempting to apply styles.

The numbers

To date, we have a total of 18 at-rules in CSS that are supported by at least one major browser. If we look at the year each at rule was originally defined in a CSSWG working draft, we can see that they were all released at a fairly consistent rate:

However, if we check the number of at rules supported by each browser per year, we can see the huge difference in browser activity:

If we just focus on the last year, when a major browser shipped every year, we’ll see that 2024 has brought us quite a lot Seven at rules to date!

I like little thought experiments like this. Something you research about leads to research on the same topic. out of scope but tangentially related. It might not be the kind of thing you bookmark and look up every day, but it’s good cocktail chatter. At least it confirms the feeling that CSS is evolving quickly Really quickly in a way we haven’t seen since the introduction of CSS 3.

It also adds context for the CSS features we have – and don’t have. There were none at-rule() Works initially because there weren’t many at-rules to begin with. Now that we have an explosion of new at-rules than in the last decade combined, perhaps it’s no coincidence that this is the case just last week The Chrome team has updated the feature’s status from New to Assigned!

One final note: The reason I’m even thinking about at-rules is this We have updated the CSS Almanacand extends it with more CSS features, including at-rules. I’m trying to fill it up and you can always help Become a guest author.