Interop 2022: end of year update

We’ve reached the end of another year, and it’s time to look at the improvements made by browsers as we work together to improve the interoperability of the web platform. You can check out how things started in our post in March this year, as the initi…


This content originally appeared on web.dev and was authored by Rachel Andrew

We've reached the end of another year, and it's time to look at the improvements made by browsers as we work together to improve the interoperability of the web platform. You can check out how things started in our post in March this year, as the initiative was launched.

Scores showing Chrome and Edge Dev on 71, Firefox Nightly on 74, Safari Technology Preview on 73.
The scores for experimental browsers in March 2022.

The overall scores at the end of the year show a great improvement across all engines.

Scores showing Chrome and Edge Dev on 90, Firefox Nightly on 89, Safari Technology Preview on 94.
The scores for experimental browsers in December 2022.

In this post, learn about the progress made during 2022. In addition to these headline features, there were many smaller improvements made by all engines. Small issues that can cause inconsistencies between engines and trip you up during development, have been fixed. Seeing big features available cross-browser is definitely exciting, but it's sometimes the small things that cause the most problems, and it's great to see how much has been improved.

Cascade layers #

Cascade layers let you manage the cascade by grouping selectors into layers. It's the kind of feature that only becomes useful when it is supported everywhere. All major engines now support cascade layers, and the scores across all browsers reflect how interoperable the feature is, with just a few tests left to pass for Firefox.

Browser support: chrome 99, Supported 99 firefox 97, Supported 97 edge 99, Supported 99 safari 15.4, Supported 15.4 Source

The dialog element #

The dialog element allows the creation of modal dialogs. This is a common pattern on the web, and using this element gives you usability and accessibility that you would otherwise have to develop and test when creating your own components. In the article Building a dialog component, Adam Argyle explains how to build on top of this element to build different types of dialogs.

Browser support: chrome 37, Supported 37 firefox 98, Supported 98 edge 79, Supported 79 safari 15.4, Supported 15.4 Source

Subgrid #

At the beginning of 2022, the only browser supporting the subgrid value for grid-template-rows and grid-template-columns was Firefox. During 2022 Safari has landed support, and the feature is under development in Chrome. It's going to miss the end of year deadline for interoperability, but it's on the way.

Browser support: chrome, Not supported × firefox 71, Supported 71 edge, Not supported × safari 16, Supported 16 Source

Viewport units #

Viewport units are the only feature that has hit 100% of passing tests across all engines. This includes the concepts of the small and large viewport, that accounts for the changing viewport size on mobile as device UI elements appear and disappear. You can find out more about these units in the post the large, small, and dynamic viewport units.

Browser support: chrome 108, Supported 108 firefox 101, Supported 101 edge 108, Supported 108 safari 15.4, Supported 15.4

Color 4 #

This collection of color work enables CSS to not only specify colors in higher definition gamuts (for example, display p3, rec2020), but also provides new color functions that each have unique utilities for working with color. New color spaces are lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: try these in Canary today with this flag enabled. These changes also apply to gradients, allowing authors to specify which colorspace their gradients use. The same flag also enables color-mix() support, allowing you to mix two colors together in a space of your choice. The color-mix() function is also behind a flag in Safari and Firefox. More colors, better colors, better gradients, and better tools.

Interop 2023 #

I hope you'll be happy to know that we aren't intending to stop at the end of 2022, and Interop 2023 is already well through the initial planning stage. In the New Year we'll be able to announce the features that have been selected, and look forward to another year of making it easier to develop for the web.

Hero image by Ian Schneider.


This content originally appeared on web.dev and was authored by Rachel Andrew


Print Share Comment Cite Upload Translate Updates
APA

Rachel Andrew | Sciencx (2022-12-19T00:00:00+00:00) Interop 2022: end of year update. Retrieved from https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/

MLA
" » Interop 2022: end of year update." Rachel Andrew | Sciencx - Monday December 19, 2022, https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/
HARVARD
Rachel Andrew | Sciencx Monday December 19, 2022 » Interop 2022: end of year update., viewed ,<https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/>
VANCOUVER
Rachel Andrew | Sciencx - » Interop 2022: end of year update. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/
CHICAGO
" » Interop 2022: end of year update." Rachel Andrew | Sciencx - Accessed . https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/
IEEE
" » Interop 2022: end of year update." Rachel Andrew | Sciencx [Online]. Available: https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/. [Accessed: ]
rf:citation
» Interop 2022: end of year update | Rachel Andrew | Sciencx | https://www.scien.cx/2022/12/19/interop-2022-end-of-year-update/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.