Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

CSS pointer @media queries

✅ style if mobile
✅ style if desktop
✅ style if stylus
✅ style if controller
✅ combine together 🎉

spec https://t.co/U4QWyw76kR

caniusehttps://t.co/ig9ONaQJAI pic.twitter.com/u0lA0UQreU

— Adam Argyle (@argyleink) April 21, 2020
/* Laptop/desktop styles */
@media (hover: hover) {
}

/* smartphones/touchscreens */
@media (hover: none) and (pointer: coarse) {
}

/* device with stylus */
@media (hover: none) and (pointer: fine) {
}

/* Wii/Kinext/etc. */
@media (hover: hover) and (pointer: coarse) {
}

/* mouse/touchpad */
@media (hover: hover) and (pointer: fine) {
}

Tags