hover: hover matches devices that can genuinely hover, like a mouse, letting you conditionally apply hover-based effects only where they'll actually work reliably, since a touch-only device has no real hovering capability at all; pointer: coarse/fine distinguishes an imprecise touch input from a precise mouse or stylus, useful for making touch targets appropriately larger on coarse-pointer devices; prefers-color-scheme: dark/light detects the user's system-level theme preference, letting a site offer an automatic dark mode without needing a manual, in-page toggle; and prefers-reduced-motion: reduce detects a user's accessibility preference for minimized animation, letting a site respect that choice by reducing or removing potentially uncomfortable or distracting motion effects.
1Understanding Device Characteristics
hover: hover matches devices that can genuinely hover, like a mouse, letting you conditionally apply hover-based effects only where they'll actually work reliably, since a touch-only device has no real hovering capability at all; pointer: coarse/fine distinguishes an imprecise touch input from a precise mouse or stylus, useful for making touch targets appropriately larger on coarse-pointer devices; prefers-color-scheme: dark/light detects the user's system-level theme preference, letting a site offer an automatic dark mode without needing a manual, in-page toggle; and prefers-reduced-motion: reduce detects a user's accessibility preference for minimized animation, letting a site respect that choice by reducing or removing potentially uncomfortable or distracting motion effects.
Always respect prefers-reduced-motion: reduce by disabling or significantly toning down non-essential animations for users who've enabled it — for some users, this isn't a mere aesthetic preference but a genuine accessibility need, since certain vestibular disorders can make excessive on-screen motion physically uncomfortable or disorienting.
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: #eee;
}
}2Practical Example
Here is a real-world application of Device Characteristics showing how it is used in production CSS code.
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}3Best Practices
Follow these guidelines when working with Device Characteristics:
1. Use hover: hover before relying on hover-based UI interactions for critical functionality, since touch-only devices have no reliable hovering capability at all
2. Support prefers-color-scheme to offer an automatic dark mode matching the user's system-level preference, without requiring a separate, manual in-page toggle
3. Respect prefers-reduced-motion: reduce by disabling or minimizing non-essential animations, an important accessibility consideration for users with certain vestibular disorders
Tip: Always respect prefers-reduced-motion: reduce by disabling or significantly toning down non-essential animations for users who've enabled it — for some users, this isn't a mere aesthetic preference but a genuine accessibility need, since certain vestibular disorders can make excessive on-screen motion physically uncomfortable or disorienting.
@media (prefers-color-scheme: dark) {
body {
background: #121212;
color: #eee;
}
}