The year 2022 is set to be one of CSS's greatest years, in both features and cooperative browser feature releases, with a collaborative goal to implement 14 features!
This post is the article form of the talk given at Google IO 2022. It's not meant to be an in-depth guide on each feature, rather an introduction and brief overview to pique your interest, providing breadth instead of depth.
Unsurprisingly, the state of CSS 2022 is dramatically impacted by the Interop 2022 work.
Before cascade @layer, the discovered order of loaded stylesheets was very important, as styles loaded last can overwrite previously loaded styles. This led to meticulously managed entry stylesheets, where developers needed to load less important styles first and more important styles later.
Before @subgrid, a grid inside of another grid couldn't align itself to its parent cells or grid lines. Each grid layout was unique. Many designers place a single grid over their whole design and constantly align items within it, which couldn't be done in CSS.
Before @container, elements of a webpage could only respond to the size of the whole viewport. This is great for macro layouts, but for micro layouts, where their outer container isn't the whole viewport, it's impossible for the layout to adjust accordingly.
Some random images.
The texts below are for example only.
A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts.
The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five features
This year, browsers met together to discuss the features and priorities they intended to work on, uniting their efforts. They planned to deliver the following web features for developers
This post is the article form of the talk given at Google IO 2022. It's not meant to be an in-depth guide on each feature, rather an introduction and brief overview to pique your interest, providing breadth instead of depth.
| Compat 2021 | Interop 2022 | ||
|---|---|---|---|
| sticky positioning | @layer | ||
| aspect-ratio sizing | Color spaces | ||
| flex layout | Containment | ||
| grid layout | Form compatibility | ||
| And more... | |||
We would love to hear from you! Whether you have a question about our products, services, or just want to say hello, please don't hesitate to contact us. Our team of experts is ready to assist you in any way they can. Simply fill out the form below, and we will get back to you as soon as possible. Thank you for considering us, and we look forward to hearing from you!
