Skip to content

Commit 5c21b07

Browse files
committed
[css-sizing-5][editorial] Add/tweak notes in interpolation-size.
1 parent 66a5b4b commit 5c21b07

1 file changed

Lines changed: 21 additions & 3 deletions

File tree

css-values-5/Overview.bs

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3983,15 +3983,33 @@ Automatically interpolating sizing keywords: the 'interpolate-size' property</h3
39833983
as though it is ''calc-size(<var>keyword</var>, size)''
39843984
and applying the rules in [[#interpolate-calc-size]].
39853985
In other cases,
3986-
an <<size-keyword>> still cannot be interpolated.
3986+
a <<size-keyword>> still cannot be interpolated.
39873987
</dd>
39883988
</dl>
39893989

3990-
Note: If we had a time machine, this property wouldn't exist.
3990+
Note: Setting ''allow-keywords'' allows <em>most</em> size values to be interpolated,
3991+
but not all;
3992+
different keywords are still not interpolable with each other,
3993+
as layout algorithms can change their behavior
3994+
based on precisely which sizing keyword a descendant is using,
3995+
in a way that can't be represented during interpolation.
3996+
3997+
Note: Setting ''allow-keywords'' <em>mostly</em> removes the need to use ''calc-size()'' manually,
3998+
but there are still some cases that can benefit from using it.
3999+
For example, if the [=containing block=] size is [=indefinite=],
4000+
naively interpolating ''width: 100%'' to ''width: 0px'' won't work as expected
4001+
(since the intermediate values might [=behave as auto=],
4002+
making them the same size as ''100%''),
4003+
but manually writing ''width: calc-size(100%, size);'' and/or ''width: calc-size(any, 0px);'' will,
4004+
causing the element to smoothly interpolate between the two values.
4005+
4006+
Note: If we had a time machine, this property wouldn't exist;
4007+
the ''allow-keywords'' behavior would just be how things worked by default.
39914008
It exists because many existing style sheets assume that
39924009
the sizing keywords
39934010
(''width/auto'', ''width/min-content'', etc.)
3994-
cannot interpolate at all.
4011+
cannot interpolate at all,
4012+
and would produce broken behavior if they started interpolating.
39954013
For compatibility with this assumption,
39964014
allowing this interpolation requires an opt-in.
39974015
Because the property inherits,

0 commit comments

Comments
 (0)