Prefers-Color-Scheme e Prefers-Reduced-Motion
Rispetti le preferenze di sistema dell'utente per la modalità scura e la riduzione delle animazioni.
Prefers-Color-Scheme e Prefers-Reduced-Motion è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Funzionalità media delle preferenze dell'utente
Il CSS può interrogare le preferenze di sistema dell'utente oltre la dimensione dello schermo. Ciò consente di attivare automaticamente la modalità scura e animazioni compatibili con le esigenze di accessibilità, senza richiedere interazioni dell'utente sul sito.
prefers-color-scheme
Rileva se l'utente ha impostato il sistema operativo sulla modalità chiara o scura:
<p>This page follows your OS color-scheme preference.</p>
Implementazione della modalità scura automatica
L'implementazione più semplice usa variabili CSS che sostituiscono i propri valori in base alla preferenza:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Alcuni utenti provano nausea o disagio a causa delle animazioni. La funzionalità media prefers-reduced-motion: reduce rileva questa preferenza di accessibilità.
<div class="box spun"></div>
Rispettare le preferenze relative alle animazioni
Invece di eliminare tutte le animazioni, fornisci animazioni alternative e discrete:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Rileva se l'utente preferisce un contrasto più elevato, per l'accessibilità, o un contrasto più basso. Adatta di conseguenza i colori:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Alcuni utenti con disabilità visive preferiscono una trasparenza ridotta. Riduci gli effetti basati su backdrop-filter e opacity:
<div class="glass-card">Glass card</div>
Accesso alle preferenze da JavaScript
Interroga queste preferenze da JavaScript usando 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>
Preferenza di sistema + override manuale
Rispetta per impostazione predefinita la preferenza di sistema e consenti agli utenti di sostituirla con un interruttore. Memorizza l'override in localStorage e applica una classe a <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Rileva se l'utente ha attivato la modalità di risparmio dati. Fornisci immagini più piccole o evita le risorse non essenziali:
<div class="hero">Hero banner</div>
Test in DevTools
In Chrome DevTools, la scheda Rendering consente di simulare la modalità scura, la riduzione del movimento e altre funzionalità media relative alle preferenze, senza modificare le impostazioni del sistema operativo.
Verifica rapida
Qual è il modo migliore per implementare una modalità scura automatica che supporti anche un interruttore manuale per l'utente?
Riepilogo
prefers-color-scheme consente di attivare automaticamente la modalità scura. prefers-reduced-motion dovrebbe disabilitare o semplificare le animazioni per l'accessibilità. Implementa entrambe usando variabili CSS per ottenere codice chiaro e facilmente manutenibile. Fornisci sempre un override manuale, in modo che gli utenti possano controllare la propria preferenza indipendentemente dal sistema operativo.
Domande Frequenti
La lezione «Prefers-Color-Scheme e Prefers-Reduced-Motion» è gratuita?
Sì — il testo completo di «Prefers-Color-Scheme e Prefers-Reduced-Motion» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Prefers-Color-Scheme e Prefers-Reduced-Motion»?
Rispetti le preferenze di sistema dell'utente per la modalità scura e la riduzione delle animazioni. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Prefers-Color-Scheme e Prefers-Reduced-Motion»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Sintassi e breakpoint comuni
- Query per larghezza, altezza e orientamento
- Prefers-Color-Scheme e Prefers-Reduced-Motion
- Combinare più media query