Media queries

Media Types

all
print
screen
speech

Media Features

prefers-color-scheme

To detect if the user has requested the system use a light or dark color theme.

@media (prefers-color-scheme: dark) {
  .dark-scheme {
    background: #222;
    color: white;
  }
}
 
@media (prefers-color-scheme: light) {
  .light-scheme {
    background: white;
    color: black;
  }
}

See also

prefers-reduced-motion

To detect if the user has requested that the system minimize the amount of non-essential motion it uses.

@media (prefers-reduced-motion: reduce) {
  /*  ...  */
}

See also

References

Formatting contexts min(), max(), and clamp()