State Of CSS Survey: Influence The Future Of CSS

• 3 min read
• CSS, Events
• Share on Twitter, LinkedIn

About The Author

Lea is currently busy doing research in Human-Computer Interaction at MIT CSAIL. She has previously written an advanced CSS book for O’Reilly (CSS Secrets) and … More about Lea ↬

Email Newsletter

Your (smashing) email

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

This year, I joined the team and helped design the survey together with the community which led to a number of improvements. If you write CSS frequently, investing a few minutes to fill it in could come back to you hundredfold, since implementers make decisions on what to work on based on the developer pain points identified through the survey every year. In fact, Chrome is funding work on the survey for this very reason.

Past Surveys

So, how did past surveys help web developers? Let’s look at the impact in Chrome, as described to us by Nicole Sullivan, Product Manager for Chrome at Google:

“I showed the ‘Missing features’ section to my team before the pandemic and we got to work on it. Several things on that list are underway.”

Indeed, literally everything in that list is now being worked on or finished unless there was no (stable) specification for it:

• ✅ Container queries
  Size queries have shipped in Chrome 106 , style queries behind a flag.
• ✅ Parent selector/:has selector
  Shipped in Chrome 105.
• ✅ Nesting
  Currently underway, delayed a bit due to discussions in the CSS Working Group about last minute changes to the syntax.
• 🟡 Functions
  No specification to implement yet, but is being worked on in the CSS WG.
• ✅ Scoping
  Experimental implementation in Chrome 105 behind a flag.
• 🟡 Mixins
  No specification to implement yet, but ideas are being explored in the CSS WG.
• ✅ Subgrid
  Implementation underway.

Let’s look at the corresponding section in the 2020 results. A lot of overlap, but some additional items:

• ✅ Form elements styling
  Work is underway on a stylable <selectmenu> element to replace <select>, and an experimental implementation exists in Chrome behind a flag.
• 🟡 Conditional logic
  No specification to implement, but several proposals are being explored in in the CSS WG.
• ✅ Masonry layout
  Already worked on, experimental implementation in Firefox Nightly.

The 2021 corresponding section includes roughly the same items, with one new thing: color functions. And lo and behold, the color functions for which there is a stable specification are being implemented in Chrome as we speak, and Chrome has funded specification work on the rest.

And it’s not just Chrome. The focus of Interop 2022 was largely shaped by these results.

What’s Next?

We’re taking on the world of styles and selectors to try and identify upcoming trends, and figure out what featurs and tools to learn next. What’s more, the survey results will also help browser vendors prioritize their roadmaps and work towards better compatibility between browsers.

What do you want to see more of in CSS? Better typography? New responsive layout features? New features to improve maintainability? Layout? Components? Something else? The sky is the limit! Make sure to share your CSS dreams with us in the survey, and they may well start coming true.

(vf, il)