Reply To: Conditional CSS for touch screen devices?

[clayRay]

According to this article…
https://css-tricks.com/touch-devices-not-judged-size/
… we can now use the @media (hover: ... attribute.
Unfortunately it’s still not supported on all browsers (but luckily most)…
https://caniuse.com/#feat=css-media-interaction
But the last answer to this question…
https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover
… offers a very simple solution that allows for hover styling and non-hover-fallback styling.
With this bit of JS…
const canHover = !(matchMedia('(hover: none)').matches);
if(canHover) {
document.body.classList.add('can-hover');
}

And then this bit of CSS…

.myElement {
background: blue;
}
.can-hover .myElement:hover {
background: red;
}