Revisiting “Features CSS Needs” from 2020
Back in 2020, I wrote an article titled “Features CSS Needs”
I wanted to revisit it since so much of it has already come true, and to update my list for 2023.
A More Powerful calc #
Support for dividing units has been part of the official specification for years now, yet no browser has implemented it.
calc(100% / 100px) still doesn’t work. This is unfortunate as this simple enhancement would make CSS so much more powerful without the need to use much more verbose concepts such as Container Queries
More CSS functions — floor, ceil and round #
The round function is a reality and supported in Firefox today! Better yet, it lets you do floor and ceil as well!
Logical Operations in calc #
There’s some discussions about this, but nothing yet. At least we’re getting “Container Style” queries which handle many of the use-cases
ScrollTimeline #
ScrollTimeline, (animation-timeline) is real and in Chromium today. Firefox has it behind a flag. This is going to be a huge improvement to the state of animations on the web and I can wait for it to be implemented across all three browsers!
Directional-Docking #
Actually, ScrollTimelines already enable this!
Hover and Swipe Timelines #
I still think that these would be nice to have. However, ScrollTimelines solve a large subset of problems itself, and I’m happy to wait a few more years before even asking for this again.
Container Queries!! #
This wasn’t even on my wishlist anymore. I had given up. But somehow, like a phoenix rising from the ashes, Container Queries appeared out of nowhere and are already implemented cross-browser.
Container (Style) queries aren’t as well supported, but let’s be honest, size queries is what we really wanted anyway!
:has() #
This again, came out of nowhere and is almost supported cross-browser (still behind a flag in Firefox for now). This also has huge ramifications for reducing the amount of JS needed for styling puposes.
View Transitions #
Jake Archibald has done it again! View Transitions are god-tier API for the web and the entire web-community is literally foaming at the mouth looking at all the cool demos built with it.
What do I even ask for anymore!? #
I literally have nothing more to ask of CSS anymore. Sure, there’s little things we could come up with if we really thought about it, but there so much awesome stuff that has landed in CSS in recent years that I just want cross-browser support for it all. The main three things that needs support ASAP are:
- View Transitions
- Scroll/Animation Timelines
- Container (Style) Queries
The rest can wait.