Repository navigation
CSS interpolate-size and calc-size() #1373
Description
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
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
Additional Signals
- Mozilla: CSS interpolate-size property and calc-size() function mozilla/standards-positions#1022
- WebKit: CSS interpolate-size property and calc-size() function WebKit/standards-positions#348
- Dev signal: last year's proposal got 81 likes: CSS
calc-size()andinterpolate-size#1008
Activity
github-actions commentedon Sep 5, 2026
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()
calc-size()CSS function computes mathematical expressions that includeheightandwidthkeyword values, for examplecalc-size(fit-content, size / 2). Not to be confused with thecalc()CSS function, which cannot use keyword values.calc-size()CSS functioninterpolate-size
Feature interpolate-size
interpolate-sizeCSS property sets whether animations and transitions interpolate between a numeric value and a keyword value, such as from a fixed length toautoorfit-content.interpolate-sizeCSS propertyiankduffy commentedon Oct 8, 2026
Looks like WebKit is implementing this https://bugs.webkit.org/show_bug.cgi?id=274177#c5
phantomxx29474 commentedon Oct 9, 2026
Yes, you're right.
https://webkit.org/blog/18420/release-notes-for-safari-technology-preview-254/