[css-conditional-4] Detecting "@starting-style" via @supports

[Krinkle]

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:

• [css-conditional-4] Feature detection for descriptors #2463
• [mediaqueries-5] Allow @custom-media inside @supports or add @custom-supports #6611
• [css-nesting] keeping track of what can and can not be nested #9114
• [css-cascade] What is a valid at-rule? Or what is an invalid at-rule? #9175

[nt1m]

Pretty sure it's a duplicate of #2463

[bramus]

This can be done using at-rule(), as resolved on in #2463 (comment)

It currently has no browser support though, which is very unfortunate. In the meantime, you can use this workaround: https://www.bram.us/2024/07/11/feature-detect-css-starting-style-support/