[css-conditional-4] Detecting "@starting-style" via @supports #10648
Description
https://drafts.csswg.org/css-conditional-4/
https://drafts.csswg.org/css-transitions-2/
@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 progress bar.
.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:
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:
#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
Might be related: