In a nutshell: In the past, building a website that looked great in all browsers was a pain. Web 2.0, HMTL5, and CSS3 alleviated a lot of the hassle of trying to make websites look the same between browsers, but it is still not perfect. Browser makers, headed by Microsoft and Google are hoping to fix the five biggest problems facing today’s web developers.
On Tuesday, Microsoft announced #Compat2021, an effort to improve cross-browser compatibility. It has partnered with Google and other browser vendors to alleviate the most persistent compatibility issues facing web developers. The joint project looks to fix five key areas—CSS Flexbox, CSS Grid, position: sticky, aspect-ratio, and CSS transforms.
It chose these “pain points” based on work done on Google’s Developer Satisfaction (DevSAT) and the MDN DNA (Developer Needs Assessment) surveys conducted in 2019 and 2020. It also pulled from the 2020 MDN Browser Compatibility Report to prioritize the most pressing issues for individual focus in Chromium and WebKit.
You told us what you needed, and we listened!
In 2021, we aim to eliminate the five top compatibility pain points on the web:
— Chrome Developers (@ChromiumDev) March 22, 2021
For example, three-quarters of all websites use CSS Flexbox, but developers often struggle with auto-height resizing images incorrectly between browsers. While CSS Grid has not been adopted as much as Flexbox, the coalition hopes to add the ability to animate grid layouts in WebKit and Chromium. Grid animation is currently supported in Gecko.
CSS properties position: sticky and aspect-ratio, and CSS transforms all have similar compatibility issues, with each passing browser tests 66, 27, and 55 percent of the time, respectively. With Microsoft and Google contributing to Chromium for Chrome and Edge browsers and others working on their respective platforms, the joint effort hopes to get each problem area to a 100-percent passing rate by the end of the year.