Google is partnering with different trade distributors to enhance internet compatibility throughout numerous browsers by an initiative referred to as #Compat2021.
In response to Google, it would concentrate on addressing the highest 5 browser compatibility points: CSS Flexbox, CSS Grid, place:sticky, aspect-ratio, and CSS transforms. The #Compat2021 selected these focus areas primarily based on characteristic utilization information, the variety of bugs in every browser engine, survey outcomes from MDN surveys and the State of CSS, check outcomes from web-platform-tests, and CanIUse information.
CSS Flexbox is broadly used, however internet builders run into main points with it, akin to Chromium and WebKit having points with auto-height flex containers, leading to incorrectly sized photographs.
CSS Grid is a core constructing block for internet layouts, so it must be rock strong, Google defined, in order that variations between browsers don’t trigger builders to keep away from utilizing it.
The position-sticky property permits content material to “stick” to the sting of a viewport. It’s generally utilized in headers which might be seen on the prime of a viewport. It’s technically supported by all browsers, however there are specific use circumstances the place it doesn’t work as supposed, akin to sticky desk headers, which aren’t supported in Chromium.
The aspect-ratio property in CSS permits internet functions to keep up a constant width-to-height ratio, which eliminates the necessity to use padding-top to perform this.
The ultimate space of focus, CSS transforms, permits builders to rotate, scale, skew, or translate a component. It’s supported by all browsers, however doesn’t all the time work the identical throughout completely different browsers, particularly within the case of animations or 3D transforms.
“As we kick off this effort, we’d like your assist ensuring we catch a very powerful points and getting the phrase out! In case you are encountering compatibility points within the areas listed above, please proceed to file bugs within the applicable software (both by way of the “Ship Suggestions” software in Microsoft Edge, or instantly within the applicable venture: Chromium, Webkit, or Gecko),” Kyle Pflug, principal PM lead for the Edge Dev Ecosystem at Microsoft, wrote in a submit.