Feature detect CSS @starting-style support

~

The Code

The code I landed on is this:

@property --supported {
	syntax: "*";
	initial-value: ;
	inherits: false;
}

:root {
	--supported: initial;
	transition: --supported 0s calc(infinity * 1s) step-end;
	transition-behavior: allow-discrete;
}

@starting-style {
	:root {
		--supported: ;
	}
}

/* Usage: */
:root {
  --bg-if-support: var(--supported) green;
  --bg-if-no-support: var(--supported, red);
}
body { 
  background: var(--bg-if-support, var(--bg-if-no-support));
}

The code uses @starting-style to set up a Space Toggle with the --supported property. In browsers without support the value is initial. You can use the computed value of --supported as a classic Space Toggles but also with Style Queries or other types of conditionals.

~

How it works

The code works by registering a custom property with an initial-value that is not initial. The value of that property gets changed to initial in :root but @starting-style also changesit.

To prevent the value from swapping back to initial, the property is given a transition delay that lasts for all eternity. For this to work, it relies on transition-behavior.

~

Demo

Embedded below is a demo that uses this technique. In browsers with support for @starting-style the background is green, otherwise it will be red.

See the Pen
Detect @starting-style support by Bramus (@bramus)
on CodePen.

Note that it doesn’t properly detect Chrome versions 117-118 because of the @property bug I detailed in the previous post on feature detecting @property. I think this is acceptable.

~

Alternative Approach: Style Queries

The following demo is a variant that uses Style Queries to respond to the change instead of a Space Toggle. The core mechanism under the hood is still the the same: a transition-delay mechanism on the custom property.

See the Pen Detect @starting-style support by Bramus (@bramus) on CodePen.

Unfortunately, because Style Queries are not widely supported at this moment, the test is incomplete and incorrectly excludes many browser versions because they simply don’t support Style Queries. On the other hand the code is easier to read and understand.

@property --supported {
	syntax: "<number>";
	initial-value: 0;
	inherits: false;
}
:root {
	transition: --supported 0s calc(infinity * 1s);
}
@starting-style {
	:root {
		--supported: 1;
	}
}

~