2022 CSS Updates

It has been an extra jolly year for the advancement of CSS! Multiple long-awaited features were integrated into our evergreen browsers (Chrome, Edge, Firefox, and Safari) with a momentum that will stretch into 2023.

Let's take a quick look under the CSS tree and unwrap the gifts we received this year!

But first, here are three 2022 CSS features already covered in this series:

• Cascade layers landed after an impressive cross-browser effort in February/March this year, and spec author Miriam Suzanne contributed an in-depth guide to cascade layers on day 5
• :has() is considered the "parent" selector, but learn why that's not the whole story from Estelle Weyl on day 11
• New viewport units arrived in November for Chromium to round out the evergreen support, and on day 1, Eric A. Meyer reviewed the new dynamic viewport units

CSS container size queries are a way to move beyond media queries that are tied to the viewport and instead will enable us to modify an element's behavior based on the container it's within. Anticipate them becoming cross-browser when they are shipped in January in the upcoming Firefox 109. With the container queries polyfill, you can absolutely begin using them today!

I provided a preview of container queries in the 2021 series, but at that time they were still an experimental spec. However, I did update that article when the syntax stabilized later in the year, so go learn how to get started with container queries!

An upcoming feature often coupled with container queries is for the range syntax for media queries. At this time, it is supported in Chrome, Edge, and Firefox, and Safari Technical Preview 160. It's also supported via the container queries polyfill and by build processing tools like LightningCSS.

In 2023, look out for container style queries to stabilize, as well. Ahmad Shadeed has an excellent preview of ways we'll be able to use style queries.

In August, Chromium 104 completed the availability of the individual transform properties of rotate, scale, and translate. This means that when you define a transform and need to update one of those transform types, you can do so one-off instead of duplicating the rest of the transform definition, too.

This brings more control for creating transitions and animations, such as to scale an element with a keyframe animation. Previously you may have used custom properties to alleviate this pain point and achieve similar control, but having separate properties is definitely preferred!

In March, Safari 15.4 released the :focus-visible psuedo-class and shortly after, it became the default element focus behavior used in evergreen browsers. When using :focus-visible, based on heuristics, the browser will determine whether to show a "focus ring" - if you don't supply your own :focus styles as an override. In practice this means keyboard (tab) interaction on focusable elements like buttons will show a focus ring, but not mouse clicks.

You can review more about how this works and my favorite method to define focus styles with custom properties.

Also arriving in Safari 15.4 in March was the accent-color property. As the writer of a 4-part series on customizing form fields, I can tell you folks are really interested in this topic!

Using accent-color allows you to partially colorize four controls: progress, range, checkbox, and radio. Try changing the value of the accent-color in the following CodePen.

See the CodePen.

January brought color-scheme to Firefox to round out support. This property allows you to define which OS color modes your site elements support. It can be set on :root to affect a page, or on individual elements. It accepts one or two values for the definition, where setting only "light" means you only support a light theme. Using two values, such as setting "light dark", means your site prefers light mode but will also work with dark mode. This property does not require the use of the prefers-color-scheme media query to work.

When set on the :root (and without site overrides to related properties) it will opt-in your entire layout to automatic dark mode when that is the OS option. This includes changing the page background to black and text and form control colors to a lighter color for appropriate contrast. The CodePen demonstrates a page with some text and a few form fields and only the color-scheme property in use to adapt to light and dark modes.

See the CodePen.

Even if you want to create custom light and dark themes, this property is still beneficial and can be coupled with accent-color to adapt form controls and achieve a custom feel.

Sara Joy shares more about how `color-scheme` works including the related meta tag and altering it with JavaScript.

Have you ever been annoyed at a page of documentation beginning to scroll after you reached the end of scrolling the sidebar navigation? Controlling this "scroll chain" is the purpose of the overscroll-behavior property which became cross-browser with Safari 16 in September. The property accepts three values, where contain is what you'll want to use to prevent the scroll-chaining effect when the scroll boundary within a subpage element (like the sidebar nav example) is reached.

In the CodePen demo, the "Table of Contents" list area is scrollable and overscroll-behavior: contain will prevent scrolling of the background article until your mouse leaves the list container.

See the CodePen.

Subgrid is nearly cross-browser, with Chromium lagging just a tiny bit, but with a prototype in progress which shows their intent to stabilize the feature. Definitely, one to start becoming familiar with for use later in 2023!

Learn 10 ways subgrid makes grid layout even more powerful on day 12 from Rachel Andrew. 

I'll leave you with two places to bookmark to keep on top of changes in CSS:

• Interop 2023 will be collective browser benchmarks with areas including CSS where they plan to improve implementations and support. Review Interop 2022, and look out for the release of the 2023 dashboard.
• The CSSWG works in public on GitHub and you can look up issues and discussions and even provide feedback