Some styles missing in firefox
Some of my element's styles are not being applied in firefox,
as you can see, the highlighted element has classes .primary and .button-like,
I am applying a display: flex, seen in the highlighted line of the stylesheet but it does not show in the style inspector
It works on other browsers
pls help
8 Replies
the site is res-pawn.com and its the blue "play puzzles" button if that helps
OH NVM
i found it
its because firefox does not support :has()
ah, yes. that's a really awfull concequence. it will break the whole selector.
btw, my compliments on the overall look of the site
thank you 😊
i spent too much time designing lol
btw i little suggestion for on the cards container ("How it works")
if you hover the container, but not the card, all are greyed out
you could fix this by setting
pointer-events: none on the container and pointer-events: all on the childs
could also be done with the has selector, but we know its has not full support yetThanks, nice trick. I actually did that using the has selector (as you mentioned) before, but moving the cursor across cards made them all flicker, and I didn't like it
i get what you mean. but there is an option for that too.
you could bridge the grid-gap by putting a pseudo element behind each card that is half the gap bigger at each side
here an example with has and the pointer-events trick
https://codepen.io/MarkBoots/pen/dyaZZBz
what the...
youre a css wizard
I will do that thanks
haha, no problem mate ✌️