preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej

Zapytanie dotyczące multimediów z preferencją ograniczonego ruchu wykrywa, czy użytkownik poprosił system operacyjny o zminimalizowanie ilości animacji lub ruchu.

Thomas Steiner

Nie każdy lubi dekoracyjne animacje lub przejścia, a niektórzy użytkownicy odczuwają chorobę lokomocy na widok przewijania paralaksy, efektów powiększania itp. Zapytanie dotyczące preferencji użytkownika dotyczące multimediów prefers-reduced-motion umożliwia tworzenie wersji witryny z ograniczoną animacją dla użytkowników, którzy wyrazili taką preferencję.

zbyt dużo ruchu w rzeczywistości i w internecie;

Ostatnio jeździłam na łyżwach z dziećmi. Był to piękny dzień, świeciło słońce, a tafla lodowa była pełna ludzi ⛸. Jedyny problem: nie znoszę tłumów. Z tak dużą liczbą ruchomych celów nie mogę się na niczym skupić. W końcu gubię się i czuję całkowite przeciążenie wzrokowe, prawie jakbym wpatrywał się w mrowisko 🐜.

Czasami to samo może się zdarzyć w internecie: migające reklamy, efektowne animacje, zaskakujące animacje odsłaniania, automatycznie odtwarzane filmy i inne elementy mogą sprawić, że internet może być przytłaczający. Na szczęście, w odróżnieniu od rzeczywistości, istnieje na to rozwiązanie. Zapytanie o media CSS prefers-reduced-motion umożliwia programistom utworzenie wariantu strony dla użytkowników, którzy preferują ograniczenie ruchu. Może to obejmować wszystko, od rezygnacji z automatycznego odtwarzania filmów po wyłączenie niektórych efektów czysto dekoracyjnych czy całkowite przeprojektowanie strony dla określonych użytkowników.

Zanim zagłębię się w jej funkcję, zastanówmy się, do czego służą animacje w internecie. Jeśli chcesz, możesz pominąć informacje ogólne i przejść od razu do szczegółów technicznych.

Animacja w internecie

Animacja jest często używana do przekazywania opinii użytkownikowi, np. aby poinformować go, że działanie zostało odebrane i jest przetwarzane. Na przykład w witrynie zakupowej produkt może być animowany w taki sposób, aby „przelatował” do wirtualnego koszyka na zakupy, przedstawiony jako ikona w prawym górnym rogu witryny.

Innym przypadkiem użycia jest wykorzystanie ruchu do zhakowania wrażeń użytkownika przez połączenie szkieletowych ekranów, metadanych kontekstowych i podglądów obrazów niskiej jakości, aby zajmować dużo czasu i przyspieszyć cały proces . Chodzi o to, aby poinformować użytkownika o tym, co się wydarzy, i jednocześnie jak najszybciej załadować treści.

Dostępne są też efekty dekoracyjne, takie jak animowane gradienty, przewijanie paralaksy czy filmy w tle. Chociaż wielu użytkowników lubi takie animacje, niektórzy ich nie lubią, ponieważ uważają, że rozpraszają lub spowalniają działanie. W najgorszym przypadku użytkownicy mogą odczuwać chorobę lokomocy, tak jak w rzeczywistości. W takim przypadku ograniczenie animacji jest koniecznością medyczną.

Zaburzenia narządu równowagi wywołane ruchem

U niektórych użytkowników treści animowane rozpraszają uwagę lub wywołują nudności. Na przykład animacje przewijania mogą powodować zaburzenia równowagi, gdy elementy inne niż główny element związany z przewijaniem poruszają się bardzo intensywnie. Na przykład animacje przewijania z efektem paralaksy mogą powodować zaburzenia układu przedsionków, ponieważ elementy tła przesuwają się w innym tempie niż elementy na pierwszym planie. Zaburzenia błędnika (ucha wewnętrznego) objawiają się zawrotami głowy, nudnościami i migreną. Czasami konieczne jest leżenie w łóżku.

Usuwanie funkcji Motion w systemach operacyjnych

Wiele systemów operacyjnych ma od dawna ustawienia ułatwień dostępu, które umożliwiają określenie preferencji dotyczących ograniczonego ruchu. Na tych zrzutach ekranu widać ustawienia Zmniejsz ruch w systemie macOS Mojave i Usuń animacje w Androidzie Pie. Jeśli te opcje są zaznaczone, system operacyjny nie będzie używać efektów dekoracyjnych, takich jak animacje uruchamiania aplikacji. Aplikacje mogą i powinny uwzględniać to ustawienie oraz usuwać wszystkie niepotrzebne animacje.

Usuwanie ruchu w internecie

Zapytania o multimedia na poziomie 5 umożliwiają też użytkownikom korzystanie z internetu przy ograniczeniu ruchu w swoich preferencjach. Zapytania o multimedia pozwalają autorom testować wartości i funkcje klienta użytkownika lub urządzenia wyświetlającego oraz wykonywać na nich zapytania niezależnie od renderowanego dokumentu. Zapytanie o multimedia prefers-reduced-motion służy do wykrycia, czy użytkownik ustawił w systemie operacyjnym preferencje, które minimalizują ilość używanych animacji lub efektów. Może przyjmować 2 wartości:

• no-preference: oznacza, że użytkownik nie ustawił żadnych preferencji w podstawowym systemie operacyjnym. Ta wartość słowa kluczowego jest interpretowana jako false w kontekście logicznym.
• reduce: oznacza, że użytkownik ustawił w systemie operacyjnym preferencje, które wskazują, że interfejsy powinny minimalizować ruch lub animacje, najlepiej do tego stopnia, że wszystkie nieistotne ruchy zostaną usunięte.

Praca z zapytaniem o media w kontekście CSS i JavaScript

Podobnie jak w przypadku wszystkich zapytań o multimedia, prefers-reduced-motion może być sprawdzany w kontekście CSS i JavaScript.

Aby zilustrować oba przypadki, załóżmy, że mam ważny przycisk rejestracji, który użytkownik ma kliknąć. Mogę zdefiniować przyciągającą uwagę animację „wibracji”, ale jako dobry obywatel internetu odtworzę ją tylko dla użytkowników, którzy wyraźnie wyrazili zgodę na animacje, a nie dla wszystkich innych. Mogą to być użytkownicy, którzy zrezygnowali z animacji, lub użytkownicy korzystający z przeglądarek, które nie rozumieją zapytania o multimedia.

/*
  If the user has expressed their preference for
  reduced motion, then don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use animations on buttons.
*/
@media (prefers-reduced-motion: no-preference) {
  button {
    /* `vibrate` keyframes are defined elsewhere */
    animation: vibrate 0.3s linear infinite both;
  }
}

Aby zilustrować, jak pracować z elementem prefers-reduced-motion w JavaScript, wyobraź sobie, że zdefiniowałem złożoną animację za pomocą interfejsu Web Animations API. Chociaż reguły CSS są dynamicznie wywoływane przez przeglądarkę, gdy zmieni się preferencja użytkownika, w przypadku animacji JavaScript muszę samodzielnie wysłuchać zmian, a następnie ręcznie zatrzymywać potencjalne animacje (lub ponownie je uruchomić, jeśli pozwala na to użytkownik):

const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
mediaQuery.addEventListener('change', () => {
  console.log(mediaQuery.media, mediaQuery.matches);
  // Stop JavaScript-based animations.
});

Pamiętaj, że nawiasy wokół rzeczywistego zapytania o multimedia są obowiązkowe:

window.matchMedia('prefers-reduced-motion: reduce');

window.matchMedia('(prefers-reduced-motion: reduce)');

Praca z zapytaniem o multimedia z kontekstów <picture>

Ciekawym przypadkiem użycia jest odtwarzanie animowanych plików AVIF, WebP lub GIF zależne od atrybutu media. Jeśli (prefers-reduced-motion: no-preference) ma wartość true, można bezpiecznie wyświetlić wersję animowaną, w przeciwnym razie wyświetlana jest wersja statyczna:

<picture>
  <!-- Animated versions. -->
  <source
    srcset="nyancat.avifs"
    type="image/avif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <source
    srcset="nyancat.gif"
    type="image/gif"
    media="(prefers-reduced-motion: no-preference)"
  />
  <!-- Static versions. -->
  <img src="nyancat.png" alt="Nyan cat" width="250" height="250" />
</picture>

Poniżej znajdziesz przykład. Spróbuj przełączyć ustawienia ruchu na urządzeniu, aby zobaczyć różnicę.

Poznawanie preferencji użytkownika w momencie wysyłania żądania

Nagłówek podpowiedzi dla klienta Sec-CH-Prefers-Reduced-Motion umożliwia witrynom opcjonalnie uzyskiwanie preferencji dotyczących ruchu użytkownika w momencie żądania. Pozwala to serwerom na wbudowanie odpowiedniego kodu CSS ze względu na wydajność.

Prezentacja

Przygotowałem małą wersję demonstracyjną na podstawie niesamowitych funkcji 🐈 HTTP cats przygotowanych przez Rogério Vicente'a. Po pierwsze, poświęcajcie chwilę, żeby docenić ten dowcip. Jest zabawny. Zaczekam. Teraz, gdy już wrócisz, pokażę Ci prezentację. Podczas przewijania każda kategoria stanu HTTP pojawia się naprzemiennie po prawej lub lewej stronie. To płynna animacja z szybkością 60 FPS, ale jak już wspomnieliśmy, niektórym użytkownikom może się ona nie podobać lub może sprawiać wrażenie ruchów, dlatego demonstracja jest zaprogramowana tak, by uwzględniała prefers-reduced-motion. Działa ono nawet dynamicznie, więc użytkownicy mogą zmieniać swoje ustawienia w dowolnym momencie, bez konieczności ponownego ładowania strony. Jeśli użytkownik preferuje zmniejszony ruch, niepotrzebne animacje odsłaniania nie będą potrzebne i pozostanie tylko zwykły ruch przewijania. Oto jak to działa:

Podsumowanie

Współpraca z preferencjami użytkownika jest kluczowa w przypadku nowoczesnych witryn, a przeglądarki udostępniają coraz więcej funkcji, które umożliwiają to deweloperom. Innym przykładem jest prefers-color-scheme, która wykrywa, czy użytkownik preferuje jasną czy ciemną kolorystykę. Więcej informacji o prefers-color-scheme znajdziesz w moim artykule Hello Darkness, My Old Friend 🌒.

Zespół roboczy CSS standaryzuje więcej zapytań o multimedia z preferencją użytkownika, np. prefers-reduced-transparency (wykrywa, czy użytkownik preferuje mniejszą przezroczystość), prefers-contrast (wykrywa, czy użytkownik poprosił o zwiększenie czy zmniejszenie kontrastu między sąsiadującymi kolorami) i inverted-colors (wykrywa, czy użytkownik preferuje odwrócone kolory).

(Bonus) Wymuszanie ograniczonego ruchu na wszystkich stronach

Nie każda witryna będzie używać prefers-reduced-motion lub może nie będzie ona wystarczająco dokładna. Jeśli z jakiegokolwiek powodu chcesz zatrzymać animacje we wszystkich witrynach, możesz to zrobić. Jeden ze sposobów, aby to osiągnąć, to wstrzykiwanie arkusza stylów z poniższym kodem CSS na każdej stronie, którą odwiedzasz. Możesz w tym celu skorzystać z kilku rozszerzeń do przeglądarki (używasz ich na własne ryzyko).

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
  }
}

W praktyce oznacza to, że poprzedni plik CSS zastępuje czas trwania wszystkich animacji i przejść tak krótkim czasem, że nie są one już zauważalne. Niektóre strony wymagają uruchomienia animacji, aby działać prawidłowo (być może dlatego, że pewien krok zależy od wywołania zdarzenia animationend). W takim przypadku bardziej radykalne podejście animation: none !important; nie zadziała. Nawet poprzednie rozwiązanie nie działa na wszystkich stronach (np. nie może zatrzymać animacji rozpoczętej za pomocą interfejsu Web Animations API), więc pamiętaj, aby je dezaktywować, gdy zauważysz problem.

Powiązane artykuły

• Najnowsza wersja robocza specyfikacji Media Queries Level 5 przygotowana przez edytującego.
• prefers-reduced-motion na stronie Stan platformy Chrome.
• prefers-reduced-motion Błąd w Chromium.
• Blink Intencja wdrożenia publikacji.

Podziękowania

Wielkie podziękowania dla Stephena McGruera, który wdrożył prefers-reduced-motion w Chrome, a także (wraz z Robem Dodsonem) sprawdził ten dokument. Baner powitalny: Hannah Cauhepe – Unsplash.