imba icon indicating copy to clipboard operation
imba copied to clipboard

CSS @media(hover: hover) rule

Open MartinElsaesser opened this issue 3 years ago • 1 comments

I recently found the CSS @media(hover: hover) rule, and it is quite awesome for only applying hover styles to devices which can hover.

This helps with hover styles "getting" stuck on touch devices, by which I mean that whenever you click a link, or button with a hover style it will remain active, as long as you do not click anywhere else on the page. I wrote a quick demo on Codepen Codepen Demo, just go into the google chrome dev tools and try it through their responsive devices feature, this will emulate touches.

Here is the MDN Documentation for the feature I request MDN Documentation.

P.S.: I hope I was precise enough, this is my first feature request ever, so I am a little worried.

MartinElsaesser avatar Feb 14 '22 16:02 MartinElsaesser

Through some more playing around I found out, that you can write @media(hover:hover), to accomplish the exact behaviour I want. Still, I think a shorthand would be great.

MartinElsaesser avatar Feb 15 '22 14:02 MartinElsaesser