🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEcss

css Documentation

LOADING ENGINE...

Device Characteristics

AI & DATA SCIENCE // ref-device-characteristics

Beyond width and orientation, media queries can also target other device characteristics, like whether a device supports hover, its primary input mechanism, and a user's preferred color scheme or reduced-motion setting.

Syntax

@media (hover: hover) { ... }
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }

Deep Dive Course

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.

editor.html
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }
}
localhost:3000

2Practical Example

Here is a real-world application of Device Characteristics showing how it is used in production CSS code.

editor.html
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
localhost:3000

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.

editor.html
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }
}
localhost:3000

Examples

Example 01Basic Usage
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }
}
Example 02Advanced Example
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Best Practices

  • Use hover: hover before relying on hover-based UI interactions for critical functionality, since touch-only devices have no reliable hovering capability at all
  • 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
  • Respect prefers-reduced-motion: reduce by disabling or minimizing non-essential animations, an important accessibility consideration for users with certain vestibular disorders

Interview Question

Why is respecting prefers-reduced-motion considered an accessibility requirement for some users, rather than simply a matter of aesthetic taste or personal preference?

Hint: Think about vestibular disorders specifically, and what kind of on-screen motion can actually trigger physical symptoms for people with that condition, not merely a matter of visual annoyance.

For people with certain vestibular disorders, conditions affecting the inner ear and balance system, excessive or intense on-screen motion, like large parallax scrolling effects, spinning elements, or rapid zooming animations, can trigger genuine physical symptoms, including dizziness, nausea, and disorientation, that go well beyond simply finding the motion visually distracting or aesthetically unappealing the way it might for an unaffected user. This means for these specific users, an animation-heavy website isn't merely a matter of personal stylistic taste they'd simply prefer to avoid, it can represent a genuine barrier to comfortably and safely using that website at all, similar in kind to how insufficient color contrast is a genuine barrier for users with low vision, not simply an aesthetic shortcoming. The prefers-reduced-motion media feature specifically lets a user indicate this need for reduced motion once at the system level, and respecting it in a website's CSS is exactly the mechanism that allows that user's genuine accessibility requirement to be automatically and consistently honored across any website that properly implements this media query, without that user needing to seek out and toggle a separate reduced-motion setting on every single site they visit.

Exercises

MediumPractice using Device Characteristics in a real scenario.
View Solution
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }
}

Frequently Asked Questions

Why is respecting prefers-reduced-motion considered an accessibility requirement for some users, rather than simply a matter of aesthetic taste or personal preference?

For people with certain vestibular disorders, conditions affecting the inner ear and balance system, excessive or intense on-screen motion, like large parallax scrolling effects, spinning elements, or rapid zooming animations, can trigger genuine physical symptoms, including dizziness, nausea, and disorientation, that go well beyond simply finding the motion visually distracting or aesthetically unappealing the way it might for an unaffected user. This means for these specific users, an animation-heavy website isn't merely a matter of personal stylistic taste they'd simply prefer to avoid, it can represent a genuine barrier to comfortably and safely using that website at all, similar in kind to how insufficient color contrast is a genuine barrier for users with low vision, not simply an aesthetic shortcoming. The prefers-reduced-motion media feature specifically lets a user indicate this need for reduced motion once at the system level, and respecting it in a website's CSS is exactly the mechanism that allows that user's genuine accessibility requirement to be automatically and consistently honored across any website that properly implements this media query, without that user needing to seek out and toggle a separate reduced-motion setting on every single site they visit.

Related Functions

Media-queriesOrientationCursor