[csswg-drafts] [css-conditional-4] Detecting "@starting-style" via @supports (#10648)

Krinkle has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional-4] Detecting "@starting-style" via @supports ==
https://drafts.csswg.org/css-conditional-4/
https://drafts.csswg.org/css-transitions-2/

```css
@supports not (@starting-style) {
 #qunit-banner {
  background: orange;
 }
}
@supports (@starting-style) {
 #qunit-banner {
  background: blue;
 }
}
```

This renders orange in Firefox/Safari/Chrome despite the latter two supporting it.

### Use case

I'm styling the [QUnit](https://qunitjs.com/) progress bar.

```css
.qunit-banner {
 --qunit-progress: 20%;

 height: 5px;
 background-image: linear-gradient(#0769AD, #0769AD);
 background-repeat: no-repeat;
 background-size: var(--qunit-progress);
 transition: background-size 1000ms ease-out;

 @starting-style {
  --qunit-progress: 0%;
 }
}
```

In JavaScript, each test does something like the folowing:

```js
 if (banner.style.setProperty) {
  var pc = Math.ceil((i / steps) * 100);
  banner.style.setProperty("--qunit-progress", Math.max(20, pc) + "%");
 }
```

We smooth out the first 20% to account for application code and unit tests loading, as well as for the first whole second we run tests synchronously back-to-back for maximum throughput, which means the above style write doesn't (and shouldn't, this is a good thing!) get applied to rendering until we yield anyway. When running non-headless, we yield about once every whole second.

The above works reasonably well when `@starting-style` is supported. However, when it isn't supported, it would start statically at 20% and sit still for a whole second. As a fallback I'd like to set the initial value to 0% when it isn't supported, and let the first test yield point set it to 20% which then utilizes the transition. Like so:

```css
#qunit-banner:not([style]) {
 --qunit-progress: 0%;
}
```

Unfortunately, this effectively cancels out `@starting-style` because it means it will "start" at 0% and goes to 0%, which is the same as only having the fallback, which means the first second no progress appears to happen until the first yield point.

**Demo: <https://codepen.io/Krinkle/pen/JjQWdoe>**

<img width="516" alt="Screenshot" src="https://github.com/user-attachments/assets/401052ab-97f7-479e-b243-39fbbbf2657b">

Might be related:
* https://github.com/w3c/csswg-drafts/issues/2463
* https://github.com/w3c/csswg-drafts/issues/6611
* https://github.com/w3c/csswg-drafts/issues/9114
* https://github.com/w3c/csswg-drafts/issues/9175

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10648 using your GitHub account


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

Received on Wednesday, 31 July 2024 15:11:10 UTC