CSS `interpolate-size` and `calc-size()`

[mkrause]

Description

The CSS interpolate-size property allows a page to opt in to animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, fit-content, etc. A common use case is to transition between height: 0 and height: auto, for example in accordion components.

:root {
    interpolate-size: allow-keywords; 
}

Closely related is the new calc-size() function, which allows you to perform calculations on intrinsic size values (not supported by the regular calc() function).

.foo {
  width: calc-size(min-content, size + 100px);
}

These features are supported in Chrome v129.

References:

• https://developer.chrome.com/docs/css-ui/animate-to-height-auto
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc-size

Specification

• https://www.w3.org/TR/css-values-5/#interpolate-size
• https://www.w3.org/TR/css-values-5/#calc-size

web-feature

• https://web-platform-dx.github.io/web-features-explorer/features/calc-size/
• https://web-platform-dx.github.io/web-features-explorer/features/interpolate-size/

Test Links

https://wpt.fyi/results/?label=master&aligned&q=feature%3Acalc-size%20or%20feature%3Ainterpolate-size

Additional Signals

• Mozilla standards position: positive
• WebKit standards position: pending
• Dev signal: last year's proposal got 81 likes: CSS calc-size() and interpolate-size #1008

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

Below is additional information about the web features (from the web-features project) which are referenced in your proposal.
If this doesn't accurately correspond to your proposal, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

calc-size()

Feature calc-size()

• ID: calc-size
• Name: calc-size()
• Description: The calc-size() CSS function computes mathematical expressions that include height and width keyword values, for example calc-size(fit-content, size / 2). Not to be confused with the calc() CSS function, which cannot use keyword values.
• Baseline status: Limited Availability
• Docs: calc-size() CSS function
• Standard positions: Mozilla (positive), WebKit
• Developer signals: 39 votes / 1 use case (details)
• Chrome use counter: chromestatus.com (~0.318% of page loads)
• State of CSS/JS/HTML surveys: State of CSS 2026 (usage question), State of CSS 2026 (usage question), State of CSS 2026 (reading_list question), State of CSS 2026 (layout question), State of CSS 2026 (layout question), State of CSS 2026 (_all_features question), State of CSS 2025 (usage question), State of CSS 2025 (reading_list question), State of CSS 2025 (features question)
• WPT tests: wpt.fyi results
• More information: See the web-features explorer

interpolate-size

Feature interpolate-size

• ID: interpolate-size
• Name: interpolate-size
• Description: The interpolate-size CSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length to auto or fit-content.
• Baseline status: Limited Availability
• Docs: interpolate-size CSS property
• Standard positions: Mozilla (positive), WebKit
• Developer signals: 77 votes / 1 use case (details)
• Chrome use counter: chromestatus.com (~11.047% of page loads)
• State of CSS/JS/HTML surveys: State of CSS 2026 (usage question), State of CSS 2026 (interactions question), State of CSS 2026 (interactions question)
• WPT tests: wpt.fyi results
• More information: See the web-features explorer