Prefers-Color-Scheme et Prefers-Reduced-Motion
Respectez les préférences système de l’utilisateur pour le mode sombre et la réduction des animations de mouvement.
Prefers-Color-Scheme et Prefers-Reduced-Motion est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Fonctionnalités média des préférences utilisateur
Le CSS peut interroger les préférences système de l’utilisateur au-delà de la taille de l’écran. Cela permet d’activer automatiquement le mode dark et de proposer des animations adaptées à l’accessibilité, sans interaction de l’utilisateur sur votre site.
prefers-color-scheme
Détecte si l’utilisateur a configuré son OS en mode clair ou dark :
<p>This page follows your OS color-scheme preference.</p>
Mise en œuvre du mode dark automatique
La mise en œuvre la plus claire utilise des variables CSS dont les valeurs sont remplacées selon la préférence :
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Certaines personnes ressentent des nausées ou de l’inconfort à cause des animations. La fonctionnalité média prefers-reduced-motion: reduce détecte cette préférence d’accessibilité.
<div class="box spun"></div>
Respect des préférences de mouvement
Au lieu de supprimer toutes les animations, proposez des animations alternatives et discrètes :
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Détecte si l’utilisateur préfère un contraste plus élevé, pour des raisons d’accessibilité, ou un contraste plus faible. Ajustez les choix de couleurs en conséquence :
<p>Contrast-aware text</p>
prefers-reduced-transparency
Certaines personnes malvoyantes préfèrent une transparence réduite. Réduisez les effets fondés sur backdrop-filter et opacity :
<div class="glass-card">Glass card</div>
Accès JavaScript aux préférences
Interrogez ces préférences depuis JavaScript à l’aide de window.matchMedia() :
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Préférence système et remplacement manuel
Respectez par défaut la préférence système et permettez aux utilisateurs de la remplacer avec un toggle. Stockez ce remplacement dans localStorage et appliquez une classe à <html> :
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Détecte si l’utilisateur a activé le mode d’économie de données. Fournissez des images plus petites ou ignorez les ressources non essentielles :
<div class="hero">Hero banner</div>
Vérification dans DevTools
Dans Chrome DevTools, l’onglet Rendu permet de simuler le mode dark, la réduction des mouvements et d’autres fonctionnalités média de préférence sans modifier les réglages de votre OS.
Vérification rapide
Quelle est la meilleure manière de mettre en œuvre un mode dark automatique qui prend également en charge un toggle manuel pour l’utilisateur ?
Récapitulatif
prefers-color-scheme permet d’activer automatiquement le mode dark. prefers-reduced-motion doit désactiver ou simplifier les animations pour l’accessibilité. Implémentez les deux à l’aide de variables CSS afin d’obtenir un code clair et facile à maintenir. Prévoyez toujours un remplacement manuel pour que les utilisateurs puissent contrôler leur préférence indépendamment de leur OS.
Questions Fréquemment Posées
La leçon « Prefers-Color-Scheme et Prefers-Reduced-Motion » est-elle gratuite ?
Oui — le texte complet de « Prefers-Color-Scheme et Prefers-Reduced-Motion » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Prefers-Color-Scheme et Prefers-Reduced-Motion » ?
Respectez les préférences système de l’utilisateur pour le mode sombre et la réduction des animations de mouvement. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Prefers-Color-Scheme et Prefers-Reduced-Motion » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Syntaxe et points d’arrêt courants
- Requêtes de largeur, de hauteur et d’orientation
- Prefers-Color-Scheme et Prefers-Reduced-Motion
- Combinaison de plusieurs requêtes média