Detect a touch device with only CSS

PHOTO EMBED

Sat Nov 19 2022 17:24:10 GMT+0000 (Coordinated Universal Time)

Saved by @Kristi #css

//if the primary input mechanism system of the device can hover over elements with ease, we use hover
@media (hover: hover) {
    /* ... */
}

//if the primary input mechanism system of the device cannot hover over elements with ease or they can but not easily (for example a long touch is performed to emulate the hover) or there is no primary input mechanism at all, we use none
@media (hover: none) {
    /* ... */
}
content_copyCOPY

https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134