Prefers-Color-Scheme i Prefers-Reduced-Motion
Nauczy się Pan/Pani respektować systemowe preferencje użytkownika dotyczące trybu ciemnego i ograniczenia animacji ruchu.
Prefers-Color-Scheme i Prefers-Reduced-Motion to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Cechy mediów dotyczące preferencji użytkownika
CSS może odczytywać preferencje systemowe użytkownika wykraczające poza rozmiar ekranu. Umożliwia to automatyczny tryb ciemny i animacje uwzględniające dostępność, bez interakcji użytkownika z witryną.
prefers-color-scheme
Wykrywa, czy użytkownik ustawił w systemie operacyjnym jasny, czy ciemny tryb:
<p>This page follows your OS color-scheme preference.</p>
Implementowanie automatycznego trybu ciemnego
Najczystsza implementacja wykorzystuje zmienne CSS, które zamieniają wartości w zależności od preferencji:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Niektórzy użytkownicy odczuwają nudności lub dyskomfort z powodu animacji. Cecha mediów prefers-reduced-motion: reduce wykrywa tę preferencję ułatwień dostępu.
<div class="box spun"></div>
Uwzględnianie preferencji dotyczących ruchu
Zamiast wyłączać wszystkie animacje, należy zapewnić alternatywne, subtelne animacje:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Wykrywa, czy użytkownik preferuje większy kontrast (ze względów dostępności) lub mniejszy kontrast. Należy odpowiednio dostosować wybór kolorów:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Niektórzy użytkownicy z niepełnosprawnościami wzroku preferują mniejszą przezroczystość. Należy ograniczyć efekty oparte na backdrop-filter i opacity:
<div class="glass-card">Glass card</div>
Dostęp JavaScript do preferencji
Preferencje te można odczytywać z JavaScriptu za pomocą 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>
Preferencja systemowa i ręczne zastępowanie
Należy domyślnie respektować preferencję systemową i umożliwić użytkownikom jej zastąpienie za pomocą przełącznika. Zastąpienie należy zapisać w localStorage i zastosować klasę do elementu <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Wykrywa, czy użytkownik włączył tryb oszczędzania danych. Należy dostarczać mniejsze obrazy lub pomijać nieistotne zasoby:
<div class="hero">Hero banner</div>
Testowanie w DevTools
W Chrome DevTools karta Rendering umożliwia emulowanie trybu ciemnego, ograniczonego ruchu i innych cech mediów dotyczących preferencji bez zmieniania ustawień systemu operacyjnego.
Szybkie sprawdzenie
Jaki jest najlepszy sposób implementacji automatycznego trybu ciemnego, który obsługuje również ręczny przełącznik użytkownika?
Podsumowanie
prefers-color-scheme umożliwia automatyczny tryb ciemny. prefers-reduced-motion powinno wyłączać lub upraszczać animacje ze względów dostępności. Obie funkcje należy implementować za pomocą zmiennych CSS, aby kod był przejrzysty i łatwy w utrzymaniu. Należy zawsze zapewnić ręczne zastępowanie, aby użytkownicy mogli niezależnie od systemu kontrolować swoje preferencje.
Ucz się CSS dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 40
- Lekcje
- 159
Często zadawane pytania
Czy lekcja „Prefers-Color-Scheme i Prefers-Reduced-Motion” jest bezpłatna?
Tak — pełny tekst „Prefers-Color-Scheme i Prefers-Reduced-Motion” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Prefers-Color-Scheme i Prefers-Reduced-Motion”?
Nauczy się Pan/Pani respektować systemowe preferencje użytkownika dotyczące trybu ciemnego i ograniczenia animacji ruchu. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Prefers-Color-Scheme i Prefers-Reduced-Motion”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia i typowe breakpointy
- Zapytania o szerokość, wysokość i orientację
- Prefers-Color-Scheme i Prefers-Reduced-Motion
- Łączenie wielu media queries