Extra occasions than I can depend, whereas writing, I get myself into random however attention-grabbing matters with little relation to the unique put up. In the long run, I’ve to make the straightforward however painful selection of deleting or archiving hours of analysis and writing as a result of I do know most individuals click on on a put up with a sure expectation of what they’ll get, and I do know it isn’t me bombing them with unrelated rants about CSS.
This occurred to me whereas engaged on Monday’s article about at-rules. All I did there was deal with numerous recipes to check browser assist for CSS at-rules. Within the course of, I started to appreciate, geez we’ve got so many new at-rules — I ponder what number of of them are from this yr alone. That’s the rabbit gap I discovered myself in as soon as I wrapped up the article I used to be engaged on.
And guess what, my hunch was proper: 2024 has introduced extra at-rules than a complete decade of CSS.
It began once I requested myself why we obtained a selector() wrapper operate for the @helps at-rule however are nonetheless ready for an at-rule() model. I can’t pinpoint the precise reasoning there, however I’m sure rthere wasn’t a lot of a have to examine the assist of at-rules as a result of, properly, there weren’t that lots of them — it’s only recently that we obtained a windfall of at-rules.
Some historic context
So, proper round 1998 when the CSS 2 advice was launched, @import and @web page have been the one at-rules that made it into the CSS spec. That’s just about how issues remained till the CSS 2.1 advice in 2011 launched @media. In fact, there have been different at-rules like — @font-face, @namespace and @keyframes to call just a few — that had already debuted in their very own respective modules. By this time, CSS dropped semantic versioning, and the specification didn’t give a real image of the entire, however relatively particular person modules organized by function.
Random tangent: The final accepted consensus says we’re at “CSS 3”, however that was a decade in the past and a few even say we must always begin entering into CSS 5. Wherever we’re is inappropriate, though it’s actually a subject of debate occurring. Is it even helpful to have a named model?
The @helps at-rule was launched in 2011 in CSS Conditional Guidelines Module Stage 3 — Ranges 1 and a couple of don’t formally exist however confer with the unique CSS 1 and a couple of suggestions. We didn’t really get assist for it in most browsers till 2015, and at the moment, the present at-rules already had widespread assist. The @helps was solely geared in direction of new properties and values, designed to check browser assist for CSS options earlier than trying to use kinds.
The numbers
As of at present, we’ve got a grand complete of 18 at-rules in CSS which might be supported by at the least one main browser. If we take a look at the yr every at-rule was initially outlined in a CSSWG Working Draft, we will see all of them have been revealed at a reasonably constant fee:
If we examine the variety of at-rules supported on every browser per yr, nonetheless, we will see the huge distinction in browser exercise:
If we simply deal with the final yr a significant browser shipped every at-rule, we’ll discover that 2024 has introduced us a whopping seven at-rules so far!
I like little thought experiments like this. One thing you’re researching results in researching about the identical subject; out of scope, however tangentially associated. It will not be the form of factor you bookmark and reference every day, however it’s good cocktail chatter. If nothing else, it’s affirming the sensation that CSS is shifting quick, like actually quick in a means we haven’t seen since CSS 3 first landed.
It additionally provides context for the CSS options we’ve got — and don’t have. There was no at-rule() operate initially as a result of there weren’t many at-rules to start with. Now that we’ve exploded with extra new at-rules than the previous decade mixed, it could be no coincidence that simply final week the Chrome Staff up to date the operate’s standing from New to Assigned!
One final observe: the rationale I’m even fascinated about at-rules in any respect is that we’ve up to date the CSS Almanac, increasing it to incorporate extra CSS options together with at-rules. I’m making an attempt to fill it up and you’ll all the time assist by turning into a visitor author.
