The State of CSS 2023: Reflection
July 5, 2023
Last week, I took the State of CSS 2023 survey. This is the fourth year that I have participated.
The purpose of the survey is to understand developers’ awareness, knowledge, and usage of newer CSS features. I always benefit from taking the survey as it helps me identify CSS features that I need to learn more about.
This year, they added a new feature in which you can create a custom reading list of the different features to learn more about them. This is a great new addition to helping make this a teaching tool.
This year’s survey focused on these areas:
- Layout
- Shapes & Graphics
- Colors
- Interactions
- Typography
- Accessibility
- Other Features
- CSS Frameworks
- CSS-in-JS
- Other Tools
- CSS Usage
- Resources
- About You
And as last year, for the features you answer of the following:
- “Never heard of it/Not sure what it is”
- “Know of what it is, but haven’t used it”
- “I’ve used it”
This year, my features score was much higher than last year. This year I scored an 84% compared to the 61% I scored last year. This year’s score was more on par with the first two years that I took the survey, 81% in 2021 and 93% in 2020.
Keeping up better
As I mentioned in the post I wrote last year, I believe I had a lower feature score last year because CSS has evolved a lot in the past few years. I think I was more attuned in my reading this year and was able to keep up a bit better with the new features.
I have been starting to incorporate newer features sooner in my project work. I utilized both container queries and the :has()
selector in projects last summer before they were in the stable releases of the browsers.
I have also been quick to experiment and play around with new features as I learn about them. A great example of that is text-balance
. I built a quick Codepen after reading about it.
CSS is continuing to evolve quickly but I have done a better job of keeping an eye out for things. A lot of the newer features are ones that I am more interested in. As I mentioned last year, I tend to invest more time and pay more attention to features that will have more of an impact on the work I do.
For example, I have not invested much time in color spaces or color functions because those do not have as much practical value for me in the projects I am working on. But something like text-balance
is something I could use on any project that I build today.
One other reason that I scored better this year is that I was more confident to answer I know about it with features that I am aware of but might still need to do more research before using.
Here is a list of things I want to learn more about:
- content-visibility
- anchor positioning
linear()
easing function- relative colors
- overscroll-behavior
- touch-action
- line-clamp
- image() – This was on my list from last year.
- image-set – Also was on my list from last year.
Resources
- What’s new in CSS and UI: I/O 2023 Edition – An overview of what’s new in CSS and UI from the Google I/O 2023. This article is good to read and catch up with what is happening. I read this one a couple of weeks ago.
- Ahmad Shadeed’s blog – Ahmad consistently writes about new CSS features and does a great job explaining and demonstrating them.
- CSS in Real Life – Michelle Barker is another great source of information about new features. She always has very practical examples and great explanations.
- Una – Una has made several short videos that introduced me to new features. I learned about
text-balance
from one of those videos. Her Twitter feed and personal site are a wealth of information.