With the Compat2021 initiative, Google, Microsoft, and other companies are making an attempt to standardize how browsers display some CSS properties. The group analyzed the main concerns of the developers. The items were defined based on searches by organizations such as the Mozilla Developer Network and the most common searches on the CanIUse website, which indicates which properties are supported by each browser.
CSS properties
Google, Microsoft, and Igalia, the company responsible for the rendering engine WebKit, will work so that browsers give fewer problems. This year, the focus will be on CSS properties that are displayed differently in each browser. Compat2021 should improve the following properties:
- CSS Flexbox
- CSS Grid
- CSS Positition: sticky
- CSS Aspect-ratio
- CSS Transform
Flexbox, for example, is focused on creating page structures. The property is the most well-known and used by developers, according to the 2020 State of CSS survey. However, it is pointed out as the main problem in the Mozilla Developer Network’s annual compatibility survey.
The Transform property, in turn, serves to rotate and scale elements on the page, for example. Google claims that it is used on 80% of pages loaded in Chrome. Despite this, it passes only 55% of compatibility tests between browsers.
Google says the goal for 2021 is to “eliminate browser compatibility issues” in these five areas so that developers can work with reliable foundations. Microsoft says the Edge team “intends to contribute corrections to Chromium to pass 100% of the CSS Grid tests”.
Note that these compatibility improvements are being applied over Chromium, which will be the basis for a large majority of browsers on the market, such as Edge, Chrome, Brave, Vivaldi, among others.
