The other day on Mastodon, Ryan wondered how hey can detect support for @starting-style. While in theory you could use @supports at-rule() for this, in practice you can’t because it has no browser support (😭).
Drawing inspiration from my previous post on how to detect support for @property, I came up with a similar method to detect @starting-style support
~
The Code
The code I landed on is this:
@property --supported {
syntax: "<number>";
initial-value: 0;
inherits: false;
}
:root {
transition: --supported 0s calc(infinity * 1s);
}
@starting-style {
:root {
--supported: 1;
}
}In browsers with support for @starting-style, the value of --supported will be 1. In browsers without support the value is 0. You can use that value with Style Queries, Space Toggles, etc.
~
How it works
The code works by registering a custom property with an initial-value of 0. The value of that property gets changes to 1 in @starting-style.
To prevent the value from swapping back to 0, it is given a transition delay that lasts for all eternity.
🌟 Shout-out to Schepp who mentioned this “long transition delay”-approach at CSS Day. The idea got stuck in my head and I’m happy I was able to use it shortly after discussing it.
~
Demos
Embedded below is a demo that uses this technique along with Style Queries, my preferred way of responding to custom property values.
See the Pen Detect @starting-style support by Bramus (@bramus) on CodePen.
In browsers with @starting-style and Style Queries support, the body has a green background. In all others the background is red. Go take a peek at the previous post on @property on how to adjust this to use a Space Toggle instead.
~
🔥 Like what you see? Want to stay in the loop? Here's how: