How does @support work?

For Hacktoberfest I am currently working on an issue, where I did find the solution itself pretty fast, but stuck with CSS.

I never used Animation in CSS. I never used @support in CSS. Trying to figure out the right way slows the speed pretty down.

Codebase

{% codepen https://codepen.io/YuriDevAT/pen/NWoPwpx %}

When looking at the the element, it works as expected in Chrome and Firefox, but not in Safari. Turns out that the cool animation effect which is set via ::before and ::after selector on the component is not supported in Safari (yet).

Changing the background-size to 100% (instead) of 400% on the ::after seems to do the trick.

Solution

I do have a solution but I am not happy yet. I am using userAgent to see if the user is in Safari but this is not recommend.

"Browser identification based on detecting the user agent string is unreliable and is not recommended, [...]."

An idea would be to use the @supports CSS rule, but until now I could not find a correct way to write it that when animation on ::after is not supported then the background-size should be 100%. (or I misunderstood the supports rule)

If nothing works, I will suggest to the maintainers to set the background size to 100% in general, (so the cool effect would not be that enormous anymore), or to leave it and hope that Safari support animation on selectors soon.

I am open for any other ideas 😇

Find the thread about this issue on Twitter {% embed https://twitter.com/YuriDevAT/status/1716820993526960332 %}

Update

October 28th, 2023 I found a solution to write the support as follows

@supports selector(:nth-child(1 of x)) { ... }

But i am wondering if this is good practice 🤔

Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/::after https://developer.mozilla.org/en-US/docs/Web/API/WorkerNavigator/userAgent

Thanks for your help. I really appreciate it.