Is CSS alive?
Essay
Spoiler alert: More than ever!
But let me go back in time a bit.
Thirteen years ago
In January 2011 I wrote und published my first essay, the one that got me into blogging. It had the provocative title »CSS3 is dead«.
To give you an idea of that time, Apple’s first iPhone had only been three years old, and I had not yet learned about Responsive Web Design. Google Chrome gained traction, but had not been the dominant browser. And I had to call the title of my first essay provocative, because the concept of clickbait was unknown to me back then.
A different world today
The Second Browser War is long over. We undid the mistake that were vendor prefixes. New CSS features are shipped at an incredible pace, and thanks to initiatives like Interop, cross-browser support is better than ever. And let’s not forget that support for Internet Explorer ended almost two years ago.
[L]et us go out there and use the freshest CSS available.
This has been the call to action in my first essay, and given the vast amount of new features that have landed in CSS, it is more important than ever, albeit for different reasons.
In the “real world”, you obviously cannot use something that is supported in one browser behind a flag. A quick look at caniuse.com will give you an idea if a feature is ready for prime time. If you didn’t take a look in a while, you may be pleasantly surprised.
How about we go through some of the CSS features that have become available and take a closer look?
I’ll share my personal opinions along the way. I may be biased, but let me tell you: Not all CSS features are equally important, and the size of a project usually has an impact in that regard. I get paid to work on a product used by millions of people. In my spare time I work on pet projects that usually have an audience of one[1], myself already included. So I know both ends of the spectrum.
(New) CSS Features
Grid
Luckily, in 2024 this is old news. If you haven’t used Grid layout yet, you are obviously forced to support the latest three versions of a dead browser.
Remember, Grid is not a replacement for Flexbox and other layouting methods. Make sure to use the right tool for the problem at hand.
Verdict: Important.
Subgrid
If you work on the web, chances are you already needed Subgrid before September 2023, i.e. before we got full support.
Verdict: Not daily business, but still kind of important.
Colors
I still need to get my head around colors, even though I’ve seen Chris Lilley talk enthusiastically about them. Lack of extensive knowledge aside, no longer being stuck in the sRGB color space and instead embracing the abilities of wide-gamut displays should be a no-brainer.
Browser support is splendid, but this is also a hardware topic. I usually don’t see colors beyond sRGB[2], as I do not own a capable display.
My recommendation would be that you get accustomed to all things color, if you didn’t already. Start off by using rgb()—or even better hsl()—instead of rgba() when you need transparency. Space-separated rgb() of course. Then take it from there all the way to color functions like color-mix().
Verdict: Niche? First world problem?
Container Queries
The long-awaited Container Queries are a big topic, even without throwing the not-yet-supported Container Style Queries into the mix.
I use them at work, but for my pet projects, querying the viewport size is enough. I think the importance of Container Queries grows with the size of your project. Eventually you’ll reach the point where you need to display a single component in multiple ways on the same viewport.
Verdict: Overrated. Useful in complex or large products.
Cascade Layers
The elephant in the room when it comes to new CSS features: Cascade Layers are the proper way to manage specificity. Large projects will obviously benefit, but unlike Container Queries, even that CodePen of yours could make use of them.
Using them requires clever planning upfront, especially in large teams. And retrofitting them into existing projects is quite often a painful story.
Verdict: Fundamental.
Nesting
Full support of CSS Nesting surprised me when writing this piece. And not just me, most syntax highlighters are not up to the task just yet. If this is one of the things you need SASS for, you will be happy.
Even the parsing engine limitations seem to be gone, so using the & symbol is no longer required.
Verdict: Take it or leave it.
Logical properties and values
Yes, the ability to control layout through logical, rather than physical, direction and dimension mappings.
It’s tempting to think this is only important if you deal with truly international websites, but I encourage you to make the switch.
While we still lack a logical equivalent for the four-value shorthands (margin, padding, etc.), the days of top/right/bottom/left are numbered.
Verdict: Use them, and ditch the old ways.
Viewport units
More old news. They came to fix a bug on handheld devices. Now even the logical counterparts are fully supported, which gives us 20 new viewport units.
Verdict: Needed when needed.
Comparison functions
To fully understand min(), max(), and clamp(), it’s a good idea to simply search the web for interesting and clever ways on how people use them.
Verdict: Seemingly unimportant, but only at first glance.
:is() and :where()
To quote MDN, :is() and :where() are useful for writing large selectors in a more compact form.
While this is nice, their true power lies in the way they affect specificity. Quite often I resort to :where() when I need to downplay a selector’s specificity.
Verdict: They come in handy.
:has()
All those years we’ve been told parent selectors will never be a reality. But two weeks ago, Christmas came early, when Mozilla shipped Firefox 121 and enabled us to finally use :has().
What becomes possible with :has() would require a dedicated blog post. Again, search the web. Bonus points for the fact that it also gives us the previous sibling selector.
Verdict: Game changer! Bigger than all of the above.
Anything else?
There is more on the horizon, like Scoping, but to my list I’ve only added topics that have reached Baseline browser support.
What about conic gradients and all the new pseudo-classes and pseudo-elements? Well, I deliberately left out smaller features, and also things related to Web Components, but there is still a chance I missed something entirely.
For more depth, I encourage you to dive into #100DaysOfMoreOrLessModernCSS by Manuel Matuzović.
Your voice matters
This is how I see it, your mileage may vary. More importantly, we should all be vocal about how far CSS has come. About its features. About what we like, and use.
What if you wrote something similar on your blog?
Footnotes
- This website is among those pet projects, and if you are reading this, 1. thank you, and 2. at least this pet project is apparently for more than “one people”. ↩︎
- Chris Lilley reached out to me, so I’ve revised this part: Initially I concluded that’ve never seen any, but I can’t be sure about that, even if we’d limit this to computer monitors and phone screens. ↩︎