DEV Community

Julia πŸ‘©πŸ»β€πŸ’» GDE
Julia πŸ‘©πŸ»β€πŸ’» GDE

Posted on • Updated on

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

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

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.

Top comments (2)

Collapse
 
moopet profile image
Ben Sinclair

Silly question: does it need to be the same in all browsers? Animations sound like a classic example of progressive enhancement (which should be under some sort of prefers-reduced-motion clause anyway). If there's no specific criteria for it to be animated, make it look nice static and don't worry about browsers that don't support more. If and when Safari catches up, it'll start working.

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’» GDE

Thank you for your comment, @moopet !

Sorry if I get your question wrong. No, it does not have to be the same in all browsers, that’s why I am looking for a solution on how to make it different in Safari!
The original code used prefers-reduced-motion. The sole focus of this codebase is to generate different output in different browsers.