Google and Microsoft have announced that they"re joining forces with other companies such as Igalia, as well as the "broader web community" to improve compatibility across different web browsers. The movement, called Compat2021, will see the effort focus on five major areas that draw complaints from the developer community.
The effort comes after a period of research, including surveys conducted by the Mozilla Developer Network (MDN). Other sources of information, such as the State of CSS and State of JS surveys, the most searched features on CanIUse, and test results from web-platform-tests all played a role in determining the areas of focus for this effort.
For 2021, the focus will be on these five areas: CSS Flexbox, CSS Grid, CSS sticky positioning, the CSS aspect-ratio property, and CSS Transforms. CSS Flexbox is a very widely used feature, but it can cause images to be stretched incorrectly in different browsers. It was chosen because it"s a top issue in the MDN Browser Compatibility Report for 2020, in addition to being the most widely used and known feature in the State of CSS report. Currently, 85% of browsers pass the test for the feature, and it appears in 75% of page loads on Chrome.
Another widely-used feature on the list is CSS Transforms, which appears on 80% of page loads on Chrome. This one only has a 55% rate of tests passed on web-platform-tests, though, so it may require some more work to get every browser on the same level. The video above shows a 3D transform having different issues in Chromium, Gecko, and WebKit, as demonstrated by David Baron.
The other features account for far fewer page loads, but they"re still widely known and used according to the State of CSS report. As the efforts to improve browser compatibility move forward, usage of these features should also increase due to them being more stable.
If you"d like to keep up with the progress on feature compatibility regarding these areas, you can do so here. Currently, Edge and Chrome"s Dev versions score the highest at 86, with Firefox Nightly slightly behind at 83. Apple"s Safari preview only has a score of 64. Switching to the stable releases, Chrome and Edge score 83 points, Firefox scores 68, and Safari scores 60.