← Back to release summary

CSS aspect-ratio interpolation

Category

Miscellaneous

Type

Chromium catches up

Status

Enabled by default (Chrome 90)

Intent stage

Shipped

• Breaking change: No
• Enterprise impact: None
• Spec maturity: Incubation
• Web Platform Tests: Yes

WPT details: https://wpt.fyi/results/css/css-sizing/animation/aspect-ratio-interpolation.html?label=master&label=experimental&aligned

Summary

The aspect-ratio property allows automatically computing the other dimension if only one of width and height is specified on any element. This property was originally launched as non-interpolable (meaning that it would snap to the target value) when animated. This feature provides smooth interpolation from one aspect ratio to another.

Standards & signals

• Specification: https://drafts.csswg.org/css-values/#combine-ratio
• Firefox: No signal
• Safari: No signal
• Web developers: No signals
• Tracking bug: https://crbug.com/1156160

Ecosystem

• Web Platform Tests: https://wpt.fyi/results/?q=css%2Fcss-sizing%2Fanimation%2Faspect-ratio-interpolation
• Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
• GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
• chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20aspect-ratio%20interpolation
• MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20aspect-ratio%20interpolation
• Baseline status: https://webstatus.dev/?q=CSS%20aspect-ratio%20interpolation

View on chromestatus.com