CSS media queries are amazing. One rarely used one is the pointer query that can be used to detect if a user is using a touchscreen or a non-touchscreen device. More specifically, it allows us to detect how a user is interacting with our site. This can be done like this:
@media screen and (pointer: fine) {
/* The user is using a mouse or trackpad */
}
@media screen and (pointer: coarse) {
/* The user is using some sort of touch input */
}
When setting up interactions we can use this to be smart about what kind of feedback we give to someone using our site. For example, we don't want a hover effect on a touch device. You can do something like this to get a much nicer hover effect.
button {
color: white;
background: hotpink;
}
@media screen and (pointer: fine) {
button {
height: 40px;
}
button:hover {
background: red;
}
}
@media screen and (pointer: coarse) {
button {
height: 45px;
}
button:active {
background: red;
}
}
This let's us apply specific styles between the two different types of interactions.