Browser makers Apple, Google, Microsoft and Mozilla, and software companies Bocoup and Igalia are working together on a web compatibility specification called Interop 2022 to make web technologies and code consistent across devices and browsers. Rendering effect ( good for front-end development ).
For the first time ever , all major browser vendors and stakeholders in the market have come together to address browser compatibility issues. Previously, competing browser manufacturers often disagreed on the compatibility of Web technologies, especially when IE was still alive, it was very common to have three sets of codes on a front-end page.
Over the past few years, as regulators have pressed Apple and Google over competition, these top browser makers have begun to collaborate more frequently, rather than focusing on features exclusive to their browsers. In 2019, Google and Microsoft jointly launched a web compatibility standard called Compat 2021 , which promotes the development of two technologies, CSS grid and CSS flexbox . Mozilla participated in the discussion of the plan, but Apple and its WebKit team did not agree. Not participating in this program.
The new Interop 2022 specification is overall biased towards 15 areas, 10 of which are based on a combination of last year’s CSS 2021 status survey and GitHub polls that most front-end developers believe will be particularly difficult to have cross-browser compatibility issues deal with:
- Cascade Layers
With this standard, a website can create a "frame" layer and a "custom" layer, then assign all third-party framework CSS styles to the framework layer, write custom styles in the custom layer, and have the custom layer 's CSS styles assigned to the framework layer. All CSS styles can take precedence over the frame layer (ignoring selectors) .
- Color Spaces and Functions
In the early days, web development used the sRGB color space, usually expressing colors in the hexadecimal, rgb(), rgba()or hsl()format. But as display technology evolves, sRBG is not enough, so Interop 2022 includes support tests for three extended color spaces (LAB, LCH, P3), and two ways to write colors in CSS via functions: color-mixand color-contrast:
color-mix(): Takes two colors and returns the result of mixing them by the specified amount in the specified color space.
color-contrast(): Select the color with the highest contrast to the specified solid color from the color list.
- Containment (CSS
containproperty)
containProperties are used to identify and measure the size of a specific container, and then apply different styles based on that container's size. Kind of like the media query @media, but instead of measuring the viewport size, it measures the size of the box that holds the content.
- Dialog Element
The Dialog element can create an overlay window, that is, a dialog. For example, a ::backdroppseudo- element can style the background below a modal. Learn about dialog elements on this blog .
- Form Fixes
Some operational aspects of the form, including appearanceproperties , disabling<form> events on form controls, and error handling for input elements, form submission, and form validation, etc.
- Scrolling
This article is about page scrolling compatibility. Scroll snap provides tools to control how the interface scrolls and how content is displayed. The scroll-behaviorproperty sets how the scroll box behaves when scrolling is triggered by navigation or the CSSOM scrolling API. overscroll-behaviorCSS properties determine what the browser does when it reaches the bounds of the scrolling area.
- Subgrid
Subgrid makes it easy to place descendant elements of a grid container on the grid without having to consider DOM structure when arranging items across complex layouts.
For example, the headers and footers of the following three card components are aligned, even though each card has a separate grid (grid), this is because each card is a three-line item that spans the parent grid, and then uses the child The grid Subgrid inherits these rows into each card.
- Typography and Encodings
Typography and Coding contains a series of tests that affect web typography, including font-variant-alternates, font-variant-position, ic units and CJK (Chinese-Japanese-Korean) text encoding. Font capabilities are a powerful property for optimizing typography, but only if it is cross-browser compatible.
- Viewport Units
New viewport units take into account layouts that include title bars, introduce maximum, minimum, and dynamic viewport units, such as 100svh100% of the smallest possible viewport height, 100lvh100% of the largest possible viewport height, and 100dvh100% of the dynamic viewport height - this value will vary with changes as the user scrolls.
Similarly, svw, lvw, and dvware used for width units.
- Web Compat
Specific bugs in browsers may not cause some websites to not render as expected, or a browser may differ from web standards, resulting in a website or web application user's experience, which Interop 2022 aims to capture and solve these problems.
These are the 10 new Web Compatibility Specifications, in addition to 5 that will be inherited from Compat 2021:
- Aspect Ratio
- Flexbox (flex box model)
- Grid
- Sticky Positioning
- Transforms (transform box model)
This part of the specification is already very commonly used and will not be introduced here.
Fundamentally, Interop 2022 is an evolving metric that evaluates browser compatibility with the aforementioned web standards. The Interop 2022 Dashboard has a scoring system that evaluates the overall compatibility of major browsers:
This thing is constantly updated throughout the year, and also shows the progress of the major browsers' engineers in fixing bugs, implementing new features and improving testing in real time, as well as the progress of engineering in each standard:
Off topic
And Apple web development evangelist Jen Simmons said in the Interop 2022 blog : "Apple is very concerned about the health of the Web and the interoperable (compatibility) implementation of Web standards." This seems to be a bit different from what most front-end people actually think. ...