What Interop 2022 Reveals About Browser Compatibility and New CSS Features
Leading browser vendors Apple, Google, Microsoft, and Mozilla, together with Bocoup and Igalia, launched Interop 2022 to benchmark and improve cross‑browser support for emerging web standards, revealing score gaps and highlighting fifteen priority areas such as cascade layers, color spaces, containment, dialog elements, form fixes, scrolling, subgrid, typography, and viewport units.
Apple, Google, Microsoft, Mozilla and the consulting firms Bocoup and Igalia have formed the Interop 2022 initiative to evaluate and improve the consistency of web design technologies across platforms.
The organization, named Interop 2022, publishes a benchmark to assess how browser vendors implement the same web standards, aiming to reduce differences in page rendering.
Current Interop 2022 scores for the four major browsers show Chrome and Edge (both Chromium‑based) scoring equally, while Safari lags with a score of 50.
Cascade Layers
With cascade layers, a site can create a “framework” layer and a “custom” layer, assigning third‑party CSS to the framework layer while custom styles in the custom layer always win, regardless of selector specificity.
Color Spaces and Functions
Beyond the traditional sRGB space, Interop 2022 tests support for LAB, LCH, and P3 color spaces, as well as the new CSS functions color-mix() and color-contrast().
Containment
The contain property lets developers define containment contexts, similar to media queries but based on the size of the content container rather than the viewport.
Dialog Element
The Dialog element enables modal windows, with the ::backdrop pseudo‑element styling the background behind the dialog.
Form Fixes
Improvements include the appearance property, disabling form controls, handling <form> events, and better input validation and error handling.
Scrolling
New scrolling features such as scroll-behavior and overscroll-behavior give developers control over scroll dynamics and edge behavior.
Subgrid
Subgrid allows grid descendants to align to the parent grid without altering the DOM structure, simplifying complex layout arrangements.
Typography and Encodings
Tests cover advanced typographic features such as font-variant-alternates, font-variant-position, and proper handling of CJK text encodings.
Viewport Units
New viewport units like 100svh, 100lvh, and 100dvh represent the smallest, largest, and dynamic viewport heights, with analogous width units svw, lvw, and dvw.
Web Compat
Interop 2022 also tracks specific browser bugs that affect rendering or deviate from web standards, aiming to capture and resolve these compatibility issues.
Inherited Standards from Compat 2021
Aspect Ratio
Flexbox
Grid
Sticky Positioning
Transforms
Overall, Interop 2022 provides an evolving metric to evaluate how major browsers support the listed web standards.
Representatives from Apple, Bocoup, Google, Igalia, Microsoft, and Mozilla agreed that the name Compat 2021 did not fully reflect the goal of addressing core interoperability gaps, and they are excited to work on the more aptly named Interop 2022.
Microsoft will focus on CSS Subgrid support, while Google remains optimistic that the collaborative effort will make the web platform more usable and reliable for developers.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.