In the opening talk of the Amsterdam based conference CSS Day Conference, Google Chrome’s Una Kravets described the current state of CSS & Web UI as a “Golden Era.” She discussed that the past couple of years have been referred to as the banner years for CSS with a constant and steady stream of new features appearing at a pace that does not appear to be slowing down. With all this momentum, many of us in the developer community have expressed how hard it is to keep up with the constant innovation.
This leads me to CSS Day 2023, which was filled with exciting talks on the new and upcoming features frontend developers need to know about. Here are a few of my personal highlights from the conference, but definitely make sure to check out the individual talks (filled with mind-blowing content).
Dialogs & Popovers
Have you ever made a modal? A tooltip? How about a search autocomplete? If you have, chances are you’ve encountered various issues with accessibility, stacking context, or positioning…to name a few. In his talk, Hidde de Vries defined what dialogs, modals and popovers actually are, how users can interact with them and what tools/methods are currently available to developers as well as touching on upcoming features like anchor positioning.
The session is one to watch and stick around for the Q&A so you don’t miss the terribly brilliant dad joke for developers from MC Adam Argyle.
CSS Containers, What Do They Know?
Finally… the feature all frontend developers have been waiting for! Since the dawn of the @media query, developers have been asking for a way to query not just the viewport, but the elements themselves! In this talk Miriam Suzanne finally gave some insights into why container queries took so long, as well as discussing their usage and the hidden powers they possess. In a lot of cases, you’ll probably just straight-up replace @media with @container, but as with most things in CSS, there’s nuances that you’ll need to get your head around.
I’m incredibly excited for container queries as they’ll make writing components a lot easier and combined with @scope, they may just eliminate a lot of overrides and workarounds like generated component instance IDs in frameworks like Vue/React/Svelte.
Scroll-Driven Animations & View Transitions
Bramus Van Damme’s session was so jam-packed with new animation features like scroll-driven animations and View Transitions, it could’ve probably been split into two. He discussed scroll-driven animations, which are pretty straight-forward; they link your CSS animations to the scroll position of a container without JavaScript (JS), thereby achieving a smoother end and more seamless result.
He then went on to talk about View Transitions, which are more of a mixed bag.
As MDN puts it “The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states, while also updating the DOM contents in a single step.”
What this means is that elements can smoothly transition from one state to another, creating a more fluid user experience. This has been possible for some time in Single-Page Applications (SPAs), but this web-platform native solution can improve site performance and reduce the need for a lot of FLIP code. That being said, this API is currently only usable for SPAs, but in the pipeline for traditional websites ( and currently behind a flag in Chrome Canary).
In Summary - We are in a “renaiCSSance”
I’m in agreement with Una, we are in a golden era of CSS, a “renaiCSSance,” if you will. There hasn’t been this much excitement around the language since CSS3, so much so that there’s even been talks of branding this new crop of features as CSS4.
While some hotly requested features may take a while to be released, they now seem to show up with more capabilities than we asked for in the first place, further reducing our need for JS in many scenarios. Additionally, Interop 2023 is pushing browser vendors to create a more predictable target for developers, and the CSS Working Group is actively getting feedback from the community on what we need and how it should be implemented.
However, this breakneck pace does come with a downside, CSS is becoming much more complex. At the time of writing, we have 50 ways just to declare how big something is, an ever growing list of mathematical functions, and so many blog posts, videos, and specs to understand everything. This ever-increasing surface area had a significant number of people wondering what’s on the horizon for CSS. I don’t know, but I’m excited to find out.
Photo Credits: https://cssday.nl/2023/photos
