DEV Community

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

Posted on β€’ Edited on

5 2 1

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.

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more β†’

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.

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay