Extra instances than I can rely, whereas writing, I get myself into random however attention-grabbing subjects with little relation to the unique put up. In the long run, I’ve to make the easy 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 quite a lot of recipes to check browser help for CSS at-rules. Within the course of, I started to comprehend, geez we’ve so many new at-rules — I’m wondering what number of of them are from this 12 months 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 acquired 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 there wasn’t a lot of a have to examine the help of at-rules as a result of, nicely, there weren’t that a lot of them — it’s only in the near past that we acquired a windfall of at-rules.
Some historic context
So, proper round 1998 when the CSS 2 suggestion 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 suggestion in 2011 launched @media. In fact, there have been different at-rules like — @font-face, @namespace and @keyframes to call a couple of — 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 moderately particular person modules organized by characteristic.
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 should always begin moving into CSS 5. Wherever we’re is inappropriate, though it’s definitely a subject of dialogue occurring. Is it even helpful to have a named model?
The @helps at-rule was launched in 2011 in CSS Conditional Guidelines Module Degree 3 — Ranges 1 and a pair of don’t formally exist however check with the unique CSS 1 and a pair of suggestions. We didn’t truly get help for it in most browsers till 2015, and at the moment, the prevailing at-rules already had widespread help. The @helps was solely geared in direction of new properties and values, designed to check browser help for CSS options earlier than trying to use types.
The numbers
As of as we speak, we’ve a grand whole of 18 at-rules in CSS which can be supported by a minimum of one main browser. If we take a look at the 12 months every at-rule was initially outlined in a CSSWG Working Draft, we will see all of them have been printed at a reasonably constant price:
If we examine the variety of at-rules supported on every browser per 12 months, nonetheless, we will see the large distinction in browser exercise:
If we simply deal with the final 12 months a serious browser shipped every at-rule, we are going to discover that 2024 has introduced us a whopping seven at-rules up to now!
I like little thought experiments like this. One thing you’re researching results in researching about the identical matter; out of scope, however tangentially associated. It might not be the kind of factor you bookmark and reference each day, however it’s good cocktail chatter. If nothing else, it’s affirming the sensation that CSS is transferring 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 — 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 might be no coincidence that simply final week the Chrome Crew up to date the operate’s standing from New to Assigned!
One final notice: the rationale I’m even eager 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 at all times assist by changing into a visitor author.
