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

When writing an article, I often unexpectedly dig into some interesting topics that are slightly related to the topic. Eventually, I had to endure the pain of deleting or archiving hours of research and writing, because I knew most readers would expect something when clicking on an article, and my essays that were not related to CSS were obviously not in line with expectations.

This happened when I wrote my article on At-rules on Monday. I was originally just focusing on several ways to test browser support for CSS At-rules. In the process, I began to realize, Wow, we have so many new At-rules now-I wonder how many of them are new additions this year. This is the rabbit hole I fell into after finishing my article.

It turns out that my intuition is right:

The number of new At-rules added in 2024 exceeds the sum of CSS over the past decade.

It all started with my self-question: Why does the At-rule have the

wrapper function, but is still waiting for the @supports version? I can't tell the exact reason, but I'm sure it's not urgent to check the supportive demand for At-rules because, well, there weren't many At-rules at that time - until recently, we've had a blowout in At-rules. selector() at-rule()Some historical background

Around the time when the CSS 2 recommendation was released in 1998,

and

were the only At-rules that entered the CSS specification. This situation continued until the introduction of @import in 2011 by CSS 2.1. Of course, there are some other At-rules, such as @page, @media and @font-face, etc., which have made their debut in their respective modules. At this time, CSS gave up semantic versioning, and the specification did not present the overall situation, but instead organized various modules according to functions. @namespace @keyframes Off topic: The latest

accepted consensus believes that we are in the "CSS 3" stage, but this was ten years ago, and some people even said that we should enter the CSS 5 stage. No matter which stage we are at, it doesn't matter, although it's a topic under discussion. Is it really useful to have a named version?

At-rule was released in 2011 in CSS Conditional Rules Module Level 3—Levels 1 and 2 do not officially exist, but refers to the original CSS 1 and 2 recommendations. It wasn't until 2015 that most browsers really supported it, by then, existing At-rules had been widely supported.

For new properties and values ​​only, it is designed to test browser support for CSS functionality before trying to apply styles.

@supportsData@supports

As of today, there are 18 At-rules in CSS supported by at least one major browser. If we look at the year each At-rule was originally defined in the CSSWG working draft, we can see that they are all published at a fairly steady pace:

However, if we check the number of At-rules supported per browser per year, we will see a huge difference in browser activity:

If we only focus on the last year of each At-rule being released by the main browser, we will notice that 2024 has brought an amazing seven At-rules so far!

I like this kind of thinking experiment. What you are working on will lead to research on the same topic; out of scope, but related to the topic. It may not be something you will bookmark and reference every day, but it is a good topic of conversation. At least, it confirms the feeling of CSS developing rapidly, just like a really fast development that has never been seen since CSS 3 was first released.

It also provides a background for the CSS features we have and do not own. There was no at-rule() function at first, because there were very few At-rules at that time. Now we have added more At-rules than the last decade, so it is no surprise that the Chrome team updated the function's state from "New" to "Assigned" just last week. Last point: I'm considering At-rules because we've updated CSS Almanac to extend it to include more CSS features, including At-rules. I'm working on perfecting it, and you can also help by being a guest writer.

The above is the detailed content of 2024: More CSS At-Rules Than the Past Decade Combined. For more information, please follow other related articles on the PHP Chinese website!