What @media properties are available beyond screen?

The short answer

Most developers only use @media for screen-size breakpoints, but media queries can target much more: color scheme preference (prefers-color-scheme), motion preference (prefers-reduced-motion), print styles (@media print), hover capability, and pointer precision. These help you build accessible, user-friendly interfaces.

prefers-color-scheme

Detects if the user prefers light or dark mode:

Copy
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}

prefers-reduced-motion

Detects if the user has requested less motion (for accessibility):

Copy
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

This is important for users with vestibular disorders who get dizzy from animations.

print

Styles for when the page is printed:

Copy
@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
  a::after {
    content: ' (' attr(href) ')';
  }
}

hover and pointer

Detects if the device supports hover and what kind of pointer it has:

Copy
/* Only show hover effects on devices that support hover */
@media (hover: hover) {
  .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}
/* Larger touch targets on devices with coarse pointers (touchscreens) */
@media (pointer: coarse) {
  button {
    min-height: 44px;
    padding: 12px 24px;
  }
}

prefers-contrast

Detects if the user has requested more contrast:

Copy
@media (prefers-contrast: more) {
  .subtle-text {
    color: black;
  }
  .border {
    border: 2px solid black;
  }
}

Why interviewers ask this

This tests if you know CSS media queries beyond just min-width/max-width. Knowing about prefers-reduced-motion and prefers-color-scheme shows you build accessible, user-friendly interfaces that respect user preferences.