Respektowanie prefers-reduced-motion
Proszę wykrywać zapytanie media prefers-reduced-motion oraz wyłączać lub ograniczać animacje dla użytkowników, którzy poprosili o mniej ruchu.
Respektowanie prefers-reduced-motion to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Funkcja multimedialna prefers-reduced-motion
U niektórych użytkowników ruch w interfejsach może wywoływać nudności, zawroty głowy lub napady drgawek. Ustawiają oni w systemie operacyjnym ograniczenie ruchu. Funkcja multimedialna prefers-reduced-motion wykrywa tę preferencję, aby CSS mógł na nią zareagować.
Wykrywanie ograniczenia ruchu w CSS
Animacje należy umieścić w odwrotnym zapytaniu: stosować je domyślnie, a następnie nadpisywać lub wyłączać dla użytkowników preferujących mniejszą ilość ruchu.
/* Apply animation by default */
.spinner {
animation: spin 1s linear infinite;
}
/* Disable for users who want less motion */
@media (prefers-reduced-motion: reduce) {
.spinner {
animation: none;
}
}Zasada „ograniczyć, a nie wyłączyć”
prefers-reduced-motion: reduce nie oznacza całkowitego braku ruchu. Niektóre ruchy przekazują ważne zmiany stanu interfejsu. Zamiast całkowicie usuwać animacje, należy je spowolnić albo uprościć do przenikań.
@media (prefers-reduced-motion: reduce) {
.modal {
/* Replace scale + fade with just fade */
animation: fadeOnly 0.1s linear;
}
@keyframes fadeOnly {
from { opacity: 0; }
to { opacity: 1; }
}
}Opcja awaryjna: wyłączenie wszystkich animacji
Często stosowanym wzorcem jest globalne wyłączenie wszystkich przejść i animacji dla użytkowników ograniczających ruch. To bezpieczna konfiguracja bazowa, nawet jeśli nie dostosowano osobno każdej animacji.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Wykrywanie ograniczenia ruchu w JavaScript
Do wykrywania tej preferencji w JavaScript należy użyć interfejsu API matchMedia — jest to przydatne przy sterowaniu animacjami canvas, ruchem sterowanym przez JavaScript lub automatycznym odtwarzaniem wideo.
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReduced.matches) {
// skip gsap or canvas animations
} else {
startAnimation();
}
// React to preference changes:
prefersReduced.addEventListener('change', (e) => {
if (e.matches) stopAnimations();
else startAnimations();
});Zachowanie przewijania i automatyczne odtwarzanie
Dla użytkowników ograniczających ruch należy również wyłączyć płynne przewijanie: scroll-behavior: auto. Należy zatrzymać automatyczne odtwarzanie filmów. Nie należy migać ani strobować treści.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
// In JS:
if (!prefersReduced.matches) {
element.scrollIntoView({ behavior: 'smooth' });
} else {
element.scrollIntoView(); // instant
}WCAG 2.3.3 — Animacje wywoływane interakcjami
WCAG 2.3.3 (poziom AAA) wymaga, aby można było wyłączyć ruch wywoływany interakcją użytkownika. Respektowanie prefers-reduced-motion pozwala spełnić to kryterium i poprawia dostępność dla użytkowników z zaburzeniami przedsionkowymi.
Testowanie ograniczenia ruchu
W Chrome DevTools: otwórz panel renderowania (menu z trzema kropkami → Więcej narzędzi → Renderowanie) i włącz opcję „Emulate CSS media feature prefers-reduced-motion”. Przed wdrożeniem przetestuj interfejs w tym trybie.
Praktyka: bezpieczny wzorzec animacji
Animacja bezpieczna dla użytkowników wrażliwych na ruch jest stosowana domyślnie i opakowana tak, aby można ją było łatwo wyłączyć globalnie.
@keyframes slideIn {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
.alert {
animation: slideIn 0.3s ease;
}
}Animacja fokusu powinna pozostać
Wskaźników fokusu (obramowania pokazującego, który element ma fokus) NIE należy usuwać nawet dla użytkowników ograniczających ruch. Są niezbędne do nawigacji za pomocą klawiatury i zazwyczaj nie wywołują zaburzeń przedsionkowych.
Biblioteki a prefers-reduced-motion
Popularne biblioteki animacji (Framer Motion, GSAP, Anime.js) mają wbudowaną obsługę ograniczenia ruchu. Funkcja useReducedMotion() w Framer Motion ułatwia warunkowe wyłączanie złożonych animacji w React.
Szybkie sprawdzenie
Jaka funkcja multimedialna CSS wykrywa preferencję użytkownika dotyczącą mniejszej ilości ruchu w interfejsie?
Powtórka: prefers-reduced-motion
Niektórzy użytkownicy potrzebują mniejszej ilości ruchu ze względów związanych ze zdrowiem przedsionkowym i neurologicznym. Używaj @media (prefers-reduced-motion: reduce), aby wyłączać lub upraszczać animacje. W JavaScript wykrywaj tę preferencję za pomocą matchMedia. Opcja awaryjna: globalne ustawienie animation/transition-duration na 0.01ms. WCAG 2.3.3 to zaleca. Testuj za pomocą panelu renderowania w DevTools.
Ucz się HTML 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
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Respektowanie prefers-reduced-motion” jest bezpłatna?
Tak — pełny tekst „Respektowanie 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Respektowanie prefers-reduced-motion”?
Proszę wykrywać zapytanie media prefers-reduced-motion oraz wyłączać lub ograniczać animacje dla użytkowników, którzy poprosili o mniej ruchu. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 4 z 4.
Ile czasu zajmuje lekcja „Respektowanie 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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Właściwości niestandardowe CSS: deklarowanie i aktualizowanie
- Przejścia: właściwość, czas trwania, funkcja czasowa
- Animacje @keyframes
- Respektowanie prefers-reduced-motion