According to the 2019 Web Developer Needs Assessment (Web Developer Needs Assessment) survey, the biggest need for feedback from more than 28,000 developers around the world is browser compatibility issues – websites look or behave differently on different web browsers, which can cause a lot of pain for developers.
As a result, MDN conducted a follow-up survey of browser compatibility in March 2020. This survey reveals the pain points that Web developers face when it comes to browser compatibility. The Chrome team shared it in a blog post and talked about Chrome’s own efforts on these issues.
Flexbox is a tool for network layout, providing an ergonomic way to define layouts that respond normally on viewportes of different sizes. However, if you can’t use this feature in all browsers, it’s not a good experience.
The Chrome team says Flexbox is one of their top priorities for browser compatibility this year and has invested heavily in it.
Specifically, the Chrome rendering team redesigned the architecture implemented by Chromium flexbox on top of the modern LayoutNG layout engine. This work is expected to be introduced in Chrome 84, which is expected to address many of the Flexbox compatibility issues in Chromium.
They are also working to provide flex-gap and fieldset-flex support for Chromium within this year. Flex-gap will also be available in Chrome 84.
Scrolling correctly on multiple browsers is not an easy task (for example, the entire library is required to lock body scrolling consistently). The Chrome team is still working on feedback on rolling compatibility, and so far, several key areas have been highlighted:
How the virtual keyboard affects (or does not affect) the viewport units in different browsers. (The Chrome team is a reminder: Microsoft Edge’s latest work on the VirtualKeyboard API may be helpful.) )
There is a lack of consistency in the events associated with the input and the results that interact with it.
It is difficult to control the scrolling behavior across browsers (for example, by scrolling anchoring).
Forms are a very old part of the Web, even before CSS. Form controls are designed to mimic the appearance of native platforms, but they do not consistently do so or meet the needs of modern web development. The compatibility survey reveals two main problems in this regard: inconsistent styles and behavioracross across browsers.
In terms of style form controls, the Microsoft Edge and Google Chrome teams recently completed this project, updating the default form style in chromium-based browsers.
In terms of behavior, there seems to be widespread concern that the behavior of form controls is not well-specified, or that browsers do not always follow these specifications. Some specific examples are examples of some types, autofill behaviors, and content recovery behaviors when they navigate back and forth between pages that contain forms.
Like Flexbox, CSS Grid is an important part of modern layout. The results of the survey show that the support for CSS Grid in Chromium is good. With one exception, Chromium still does not support subgrid.
The Chrome team revealed that a team at Microsoft Edge is reconstructing Grid support for Chromium to use the new LayoutNG engine. As part of this program, Chrome also plans to add support for subgrid.
Finally, the Chrome team points out that when it comes to browser compatibility, there are still too many missing features and edge errors. Everything will get better if the browser vendor can understand the causes of the trouble and take steps to fix them. Chrome will also become more compatible over the next few days. If you would like to participate in the browser compatibility survey and provide feedback, you can fill out this form.