@media (prefers-*)

Definition

Media queries qui détectent les préférences utilisateur du système : prefers-color-scheme (thème), prefers-reduced-motion (animations), prefers-contrast (contraste élevé).

Analogie

Comme un restaurant qui adapte automatiquement le menu selon les allergies déclarées du client.

Exemple de code

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a1a; --fg: #eee; }
}
@media (prefers-contrast: more) {
  .btn { border: 2px solid; }
}

Cas d'usage

Respecter les préférences système pour l'accessibilité, le confort visuel et les performances.

Anti-pattern

Termes lies