I am not that excited about new CSS features

I have a confession: I am not that excited about all these new CSS features. Let me tell you why.

CSS in 2022

The year 2022 has been pretty wild for CSS. There has been a significant number of new features that have rolled out, like:

• container queries
• parent selector
• accent color, and
• cascade layers.

These are just the big ones, the game changers. The problem is they are not game changers for everyone. Or maybe for just me.

Problem #1

Let’s use the :has pseudo-class. It is a long-wanted CSS parent selector that might radically change how we write CSS.

While all major browsers are pushing new versions that support these new features, some users still don’t use the latest version of their browsers. That certainly brings down the excitement.

Šime Vidas put it nicely as a comment on Bramus Van Damme’s Twitter post on :has supported:

Forget Firefox. The :has() selector also doesn’t work in Safari 14, 13, and below, which combined currently have a 5 to 6 times higher usage share on mobile than Firefox.

— Šime Vidas

Problem #2

Since we didn’t have all these features for ages, we learned to accept CSS limitations, and we had to make sacrifices in our HTML documents. So, not only do we need to know how and where to apply these new features, we should learn how to adapt our HTML structure to these changes.

Maybe this is not a problem but a blessing in disguise. Maybe we could finally have a flat HTML structure, ditch wrappers, and similar techniques. Who knows?

Problem #3

Adopting new features is not an easy task. When CSS Flexbox was rolled out, everyone was so excited, including me. It was a huge deal. But we didn’t immediately jump in and start to use it.

First, we read all the articles that showed us how to use it. Then we need to understand the axes. After that, we needed to wait for browser support. In the meantime, some of us brave enough used float fallbacks. On top of all that, we needed to deal with bugs. Those were the happy times, but they got us to this point in the frontend development phase.

Conclusion

Sacha Greif made a great point by asking a question on Twitter today:

Should we worry that CSS risks being overwhelmed by niche features and properties that end up make learning it a lot more confusing?
Or is it good to support as many use cases as possible?

— Sacha Greif

I honestly don’t know, but I predict that using all these features will be a slow process. We are in the early phase of learning how to use it, but we are fortunate that we don’t need to wait for major browser support that long.

Comments

[Alex Lohr]

I'm still happy to have them, because at some point, we can use them in production, which is great. Yes, standards and their adoptions are moving a lot slower than modern frameworks, but they don't need extra downloads or installations.

[Ingo Steinke, web developer]

Thanks for making a point about backward compatibility. Although Apple fans tell me not to claim that "Safari is the new Internet Explorer", this is what I see as today's biggest obstacle holding back progress. While we can use an old Android phone and install a recent Firefox, Chrome, or Vivialdi browser, this is not possible on older iPhones. This is only Apple's fault, and that's called planned obsolescence.

Like JavaScript, CSS is now making fast progress, while the core language remains backward compatible, which is an achievement hard to find apart from frontend languages, taking the breaking changes in PHP 8 for example. We can handle backward compatibility conceptually by using progressive enhancement, or if we have required features, we must - as you said - either not use the latest language features, or provide a compatibility solution like rewriting Syntax (using postCSS) where it is possible, and using JavaScript-based CSS polyfills where it isn't (like parent selectors).

I don't feel that the recent upgrades to CSS are niche features, quite the contrary! And then, those are just options, nobody is required to use it, and the core language will not be "overwhelmed" by new features. Just like we can decide to use or not to use grid, flex box, float or table layouts, we can choose to use or not use new color spaces, improved selectors, helpful pseudo classes or even layers (which is something that does not excite me, for example).

There are more possible syntax upgrades that I would wish for CSS, like pseudo classes to detect the :stuck state of a position: sticky element or the :visbility of an element inside the viewport without having to use JavaScript IntersectionObserver.

P.S. probably no coincidence that we have this discussion right now, as The State of CSS survey 2022, an annual developer survey about the latest trends in CSS, is currently awaiting our input, so check stateofcss.com if you haven't done already.

[Sergey Khomushin]

"Safari is the new Internet Explorer", even worse. Updates are very rare, and new features appear after a very long time (web Crypto). Some existing features are simply killed by its sole decision (web SQL for example).

[Silvestar Bistrović]

using JavaScript-based CSS polyfills

I hate those.

those are just options, nobody is required to use it

This is very well put.

P.S. I might steal your :stuck and :visibility suggestions for my side project: Invalid CSS.

[Ingo Steinke, web developer]

Thanks again for your post, @starbist ! Now at the end of the year, with a review of the state of css 2022 and many positive reviews of a year where tech finally released some noteworthy CSS and AI features, we can't emphasize enough the importance of long-term perspectives, stability, and progressive enhancement.

[Tobias Nickel]

yes, for me css also feels like learning vocabulary. I will not learn.everything about css.

Flex boxes is a topic i only studied last christmas, when browsersupport is ok.

for now I never learned tailwind, but in personal projects usually I use mini.css. not sure if or when I study tailwind.

[Silvestar Bistrović]

Well, Tailwind is framework and I am not bothered with those these days.

[panosEmmanouilidis]

Im sorry, but this post is kinda irrelevant.
The new features are NOT todays problem, but tomorrows solution.
The more CSS advances, the less we need preprocessors like sass.
Does constant updates make a language more complicated? Absolutely!
Do we learn everything 100%? F*ck no.
Go to a senior FE react developer, he knows like 50% of react, excluding reacts extra packages.
Does that mean we should stop updating react? Hell no!
Overall, I completely disagree. I dont expect you to know everything about css, I expect you to understand css and use that understanding with modern solutions.

[Adam Crockett 🌀]

I've always had a 5 year grace period before trying this stiluff out, works for me

[D7460N]

Niche features?

Really?

It's not like these CSS features are the next Flash or JS framework fad that are here today gone tomorrow.

CSS written 10 years ago still work today and will work 10 years from now. These CSS features are foundational, to which all other standards compliant fads cater.

What is the alternative? Stay where we are with all these unintuitive workarounds and brittle hacks? Should we not improve how we write DRY, flexible, intuitive code?

Let the CSS renaissance begin!

[Terenze]

These new features will start to alter the scope of CCS - it feels like it’s moving away from presentation control to a kind of interaction design javascript.

My job is to ensure all digital experiences work for everyone no matter what device or browser. So what happens to those of us that design proper systems built on progressive enhancement principles? Are all the fallbacks in place for IE6?
No - thought not.

[eshimischi]

Well, it is your personal opinion, whether you like it or not it will head in direction that community chose. To use or not to use these features it is the question.

[Ravavyr]

Funny you mention flexbox, but not css grid lol....the irony in that as it's another "newer" feature almost no one uses day to day, even though browsers support it.