Re: [csswg-drafts] [css-transitions] Transition to height (or width) "auto" (#626)

@SetTrend wrote:

> Moreover, if this thought took roots, the following (currently invalid transition) should become valid, too:
> 
> ```css
> p   /* rule #1 */
> {
>   height: 10px;
>   transition: height 2s;
> }
> 
> p:hover   /* rule #2 */
> {
>   height: 20em;
> }
> ```

As @Loirooriol wrote, this is _already_ valid. See https://jsfiddle.net/SebastianZ/hk059ad1/. What's not working is transitioning to or from an `auto` value (or possible other keyword values of properties that resolve to a numeric value in the end).

@danegraphics wrote:

> When we are talking about the "computed" value of `auto`, we are talking about the final pixel/length value of the layout with `auto` applied.

It seems the difference between "computed values" and "used values" still isn't clear to everyone. There's a simple [example in the CSS Cascading and Inheritance specification](https://drafts.csswg.org/css-cascade-5/#used) which clarifies this:

> For example, a declaration of [`width: auto`](https://drafts.csswg.org/css-sizing-3/#propdef-width) can’t be resolved into a length without knowing the layout of the element’s ancestors, so the [computed value](https://drafts.csswg.org/css-cascade-5/#computed-value) is [`auto`](https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto), while the [used value](https://drafts.csswg.org/css-cascade-5/#used-value) is an absolute length, such as `100px`.

So the used value is the actual numeric value that authors are referring to. And this is also the reason why @Loirooriol suggested a `used()` function to get that numeric value.

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1054662995 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 February 2022 21:07:59 UTC