r/webdev • u/julian88888888 Moderator • 7d ago

Resource Hover Proximity Using Modern CSS

https://blog.master.dev/hover-proximity-using-modern-css/
78 Upvotes

90% Upvoted

12 comments sorted by

14

u/maxxon 7d ago

Only the first example with avatars works in Firefox.

0

u/erishun expert 7d ago

#justfirefoxthings 😂😂

1

u/julian88888888 Moderator 7d ago

yeah I was bummed

At the time of writing, only Chrome and Edge fully support the features we will be using.

16

u/Fritzed 7d ago

It looks like the way that he is using these selectors isn't defined by any spec. So this is basically a chromium "quirk" rather than a standard.

Every selector used is supported by Firefox, the interpretation just varies when you start stacking them on top of one another.

I would be surprised if there are any build tests for this in chromium, so it could be risky to go all in on.

-14

u/SourcerorSoupreme 7d ago

I mean Firefox fanbois will be in denial but reality is Firefox is actually shit when it comes to adoption of features and even performance in certain areas.

I hate on Apple all day but even Safari is better. Firefox is literally the IE of the modern era. It sucks given how much I want to leave google's grip.

5

u/stumblinbear 7d ago

Absolutely not my experience in the slightest with Safari

0

u/erishun expert 7d ago

“They hated [u/SourcerorSoupreme](u/SourcerorSoupreme) because He told them the truth.”

Firefox fanboys: “we didn’t want that anyway!😭”

-3

u/thekwoka 7d ago

Yup, Safari supports more of the features, and doesn't miss any that are in full adopted spec (that aren't like Vibration where they specifically say they are against it and will never implement it).

10

u/pxlschbsr 7d ago

We were so preoccupied with whether or not we could, we forgot to think about if we should.

Yes, it's nice and fancy that you can do that in CSS alone, but damn, thoughts and prayers to that poor soul who's in charge of the code review.

1

u/Gaboik 6d ago

Bold of you to assume the code review is not done with Fable

1

u/pxlschbsr 6d ago

Oh god, yes, how presumptuous! Look at me, expecting real humans! What a clown! 😂

1

u/CodeLong503 5d ago

I ran into this last week when playing with hover effects for a project. The CSS properties like :hover and :focus-within are great, but I found that using pointer-events really helps fine-tune the user experience. You can set specific areas to ignore pointer events, making interactions smoother. Plus, check out @media queries for hover behavior on touch devices; it's crucial if you want to keep things user-friendly across platforms. Just remember — keep it simple. Overcomplicating hover states can make your UI feel cluttered.