CSS interpolate-size property and calc-size() function #348
Labels
from: Google
Proposed, edited, or co-edited by Google.
topic: animation
Spec relates to animation (including transitions)
topic: css
Spec relates to CSS (Cascading Style Sheets)
venue: W3C CSS WG
WebKittens
No response
Title of the spec
CSS calc-size() function
URL to the spec
https://drafts.csswg.org/css-values-5/#calc-size
URL to the spec's repository
https://github.com/w3c/csswg-drafts/issues
Issue Tracker URL
No response
Explainer URL
https://github.com/w3c/csswg-drafts/blob/main/css-values-5/calc-size-explainer.md
TAG Design Review URL
w3ctag/design-reviews#955
Mozilla standards-positions issue URL
mozilla/standards-positions#1022
WebKit Bugzilla URL
https://bugs.webkit.org/show_bug.cgi?id=274177
Radar URL
No response
Description
Animation to or from auto heights is commonly requested by web developers. It is important for animation of elements (such as the contents of disclosure widgets) opening/closing between a content-based height (or width) and a small (often zero) height (or width). This
calc-size()
proposal fits the desire to do such animations into the way that CSS transitions and animations work. More generally, this allows animating between a fixed length and almost any type of height (or width, or min/max-height/width) that can currently be specified in CSS.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., in the cases where we can animate those keywords.The CSS
calc-size()
function is a CSS function similar tocalc()
, but that also supports operations on exactly one of the valuesauto
,min-content
,max-content
,fit-content
,stretch
, orcontain
, which are the intrinsic sizing keywords. This function is used to represent the values in the middle of the animations allowed by the interpolate-size property.The text was updated successfully, but these errors were encountered: