prefers-reduced-motion w CSS i JS
Wykrywaj ustawienie użytkownika dotyczące ruchu i respektuj je.
prefers-reduced-motion w CSS i JS to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 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 Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Ustawienie, które można odczytać
Systemy operacyjne pozwalają użytkownikom poprosić o ograniczenie ruchu. Funkcja multimedialna prefers-reduced-motion udostępnia tę decyzję bezpośrednio witrynie. 🎚️
Gdzie użytkownicy to włączają
Użytkownicy włączają opcję reduce motion w ustawieniach systemów macOS, iOS, Windows i Android. Państwa zadaniem jest zareagować na ten wybór, a nie go podważać.
Dwie wartości
Ta funkcja zwraca jeden z dwóch stanów. Może to być reduce, czyli ograniczenie animacji, albo no-preference dla pozostałych użytkowników.
Zapytanie w CSS
Spokojniejsze style należy umieścić w zapytaniu medialnym. Gdy użytkownik poprosi o reduce motion, można niemal całkowicie wyłączyć przejścia.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Ograniczaj, nie zawsze usuwaj
Ograniczenie ruchu nie oznacza zamrożenia strony. Duży przesuwający się element można zastąpić delikatnym fade, aby interfejs nadal był żywy, ale nigdy nie powodował gwałtownych wrażeń.
Najpierw zaprojektuj ruch
Najpierw należy zbudować standardowe animowane style, a następnie dodać zapytanie, które je ograniczy. Takie progresywne podejście pozwala zachować bogate domyślne doświadczenie.
Odczyt w JavaScript
W przypadku animacji sterowanych skryptem należy zapytać bezpośrednio przeglądarkę. matchMedia zwraca informację, czy użytkownik aktualnie preferuje ograniczenie ruchu.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Reagowanie na zmiany w czasie rzeczywistym
Użytkownicy mogą zmienić to ustawienie w trakcie sesji. Należy nasłuchiwać zmian, aby animacje JavaScript respektowały nową preferencję bez ponownego wczytywania strony.
mq.addEventListener('change', e => updateMotion(e.matches));Uwzględnij zachowanie przewijania
Płynne przewijanie również jest ruchem. W zapytaniu należy ustawić scroll-behavior na auto, aby dla tych użytkowników skoki były natychmiastowe.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}To rzeczywista potrzeba
Nie jest to opcjonalne udogodnienie. U niektórych użytkowników intensywny ruch wywołuje prawdziwe nudności lub zawroty głowy, dlatego respektowanie tej prośby ma znaczenie.
Domyślne wyłączenie jest najbezpieczniejsze
W razie wątpliwości należy domyślnie wybrać najbezpieczniejsze rozwiązanie. Skierowanie się ku spokojnemu ruchowi nikomu nie zaszkodzi i zapewni wszystkim wygodniejsze korzystanie ze strony.
Szybkie sprawdzenie
W jaki sposób witryna dowiaduje się, że użytkownik chce ograniczyć ruch?
Podsumowanie
Należy odczytywać prefers-reduced-motion w CSS lub za pomocą matchMedia, a następnie uspokajać animacje zamiast całkowicie pozbawiać stronę życia. Trzeba też respektować zmiany ustawienia w czasie rzeczywistym. ✅
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
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „prefers-reduced-motion w CSS i JS” jest bezpłatna?
Tak — pełny tekst „prefers-reduced-motion w CSS i JS” 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 Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „prefers-reduced-motion w CSS i JS”?
Wykrywaj ustawienie użytkownika dotyczące ruchu i respektuj je. Ćwiczysz Web Accessibility 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ąć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility 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 1 z 4.
Ile czasu zajmuje lekcja „prefers-reduced-motion w CSS i JS”?
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 Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility 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
- prefers-reduced-motion w CSS i JS
- Zaburzenia przedsionkowe i zagrożenia związane z paralaksą
- Próg trzech błysków a napady padaczkowe
- Wstrzymywanie, zatrzymywanie i ukrywanie automatycznie przesuwanej treści