preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej

Zapytanie o media prefers-reduced-motion wykrywa, czy użytkownik poprosił system operacyjny o zminimalizowanie ilości animacji lub ruchu.

Thomas Steiner

Nie każdy lubi dekoracyjne animacje i przejścia, a niektórzy użytkownicy odczuwają chorobę lokomocyjną, gdy widzą przewijanie z efektem paralaksy, efekty powiększenia itp. Zapytanie o media dotyczące preferencji użytkownika prefers-reduced-motion umożliwia zaprojektowanie wersji witryny z ograniczonym ruchem dla użytkowników, którzy wyrazili takie preferencje.

Zbyt dużo ruchu w prawdziwym życiu i w internecie

Ostatnio jeździłem na łyżwach z dziećmi. Był piękny dzień, słońce świeciło, a lodowisko było pełne ludzi ⛸. Jedyny problem polegał na tym, że nie radzę sobie z tłumami. Przy tak wielu ruchomych celach nie mogę się na niczym skupić i w końcu gubię się, czując całkowite przeciążenie wizualne, prawie jakbym wpatrywał się w mrowisko 🐜.

Czasami podobnie jest w internecie: migające reklamy, efektowne efekty paralaksy, zaskakujące animacje, automatycznie odtwarzane filmy i inne elementy sprawiają, że internet może być przytłaczający… Na szczęście w przeciwieństwie do życia codziennego istnieje na to rozwiązanie. Zapytanie o media CSSprefers-reduced-motion umożliwia deweloperom tworzenie wariantu strony dla użytkowników, którzy wolą ograniczone animacje. Może to obejmować wszystko, od powstrzymania się od automatycznego odtwarzania filmów po wyłączenie niektórych czysto dekoracyjnych efektów i całkowite przeprojektowanie strony dla niektórych użytkowników.

Zanim przejdę do tej funkcji, cofnę się o krok i zastanowię się, do czego służą animacje w internecie. Jeśli chcesz, możesz też pominąć informacje ogólne i przejść od razu do szczegółów technicznych.

Animacja w internecie

Animacje są często używane do przekazywania użytkownikowi informacji zwrotnych, np. aby poinformować go, że działanie zostało odebrane i jest przetwarzane. Na przykład w witrynie sklepu internetowego produkt może być animowany tak, aby „wleciał” do wirtualnego koszyka na zakupy, przedstawionego jako ikona w prawym górnym rogu witryny.

Inny przypadek użycia polega na wykorzystaniu ruchu do manipulowania percepcją użytkownika poprzez użycie mieszanki ekranów szkieletowych, metadanych kontekstowych i podglądów obrazów niskiej jakości, aby zająć dużo czasu użytkownika i sprawić, że całe działanie będzie wydawało się szybsze. Chodzi o to, aby dać użytkownikowi kontekst tego, co się pojawi, i jednocześnie jak najszybciej załadować elementy.

Wreszcie są dekoracyjne efekty, takie jak animowane gradienty, przewijanie z efektem paralaksy, filmy w tle i inne. Wielu użytkowników lubi takie animacje, ale niektórzy ich nie lubią, ponieważ rozpraszają ich lub spowalniają. W najgorszym przypadku użytkownicy mogą nawet cierpieć na chorobę lokomocyjną, tak jak w rzeczywistości, więc dla tych osób ograniczenie animacji jest koniecznością medyczną.

Zaburzenie ze spektrum przedsionkowego wywołane ruchem

Niektórzy użytkownicy odczuwają rozproszenie uwagi lub mdłości z powodu animowanych treści. Na przykład animacje przewijania mogą powodować zaburzenia równowagi, gdy elementy inne niż główny element powiązany z przewijaniem poruszają się w dużym stopniu. Na przykład animacje przewijania paralaksy mogą powodować zaburzenia równowagi, ponieważ elementy tła poruszają się z inną prędkością niż elementy pierwszego planu. Reakcje związane z zaburzeniami błędnika (ucha wewnętrznego) obejmują zawroty głowy, nudności i migrenowe bóle głowy, a czasami wymagają odpoczynku w łóżku.

Usuwanie ruchu w systemach operacyjnych

Wiele systemów operacyjnych od dawna ma ustawienia ułatwień dostępu, które pozwalają określić preferencje dotyczące ograniczenia ruchu. Poniższe zrzuty ekranu pokazują ustawienie Ogranicz ruch w systemie macOS Mojave i ustawienie Usuń animacje w systemie Android Pie. Gdy ta opcja jest zaznaczona, system operacyjny nie używa efektów dekoracyjnych, takich jak animacje uruchamiania aplikacji. Aplikacje również mogą i powinny uwzględniać to ustawienie oraz usuwać wszystkie niepotrzebne animacje.

Usuwanie ruchu w przeglądarce

Media Queries Level 5 wprowadza do internetu preferencje użytkownika dotyczące ograniczonego ruchu. Zapytania o media umożliwiają autorom testowanie i odpytywanie wartości lub funkcji agenta użytkownika lub urządzenia wyświetlającego niezależnie od renderowanego dokumentu. Zapytanie o media prefers-reduced-motion służy do wykrywania, czy użytkownik ustawił w systemie operacyjnym preferencje dotyczące minimalizowania ilości animacji lub ruchu. Może przyjmować 2 wartości:

• no-preference: oznacza, że użytkownik nie określił preferencji w systemie operacyjnym. Wartość tego słowa kluczowego jest w kontekście logicznym interpretowana jako false.
• reduce: oznacza, że użytkownik ustawił preferencje systemu operacyjnego wskazujące, że interfejsy powinny minimalizować ruch lub animację, najlepiej do tego stopnia, aby usunąć wszystkie nieistotne ruchy.

Korzystanie z zapytania o media w kontekście CSS i JavaScript

Podobnie jak w przypadku wszystkich zapytań o media, warunek prefers-reduced-motion można sprawdzić w kontekście CSS i JavaScript.

Aby to zilustrować, załóżmy, że mam ważny przycisk rejestracji, który użytkownik ma kliknąć. Mogę zdefiniować przyciągającą uwagę animację „wibracji”, ale jako odpowiedzialny twórca stron internetowych będę ją odtwarzać tylko tym użytkownikom, którzy wyraźnie się na to zgodzili, a nie wszystkim pozostałym. Mogą to być użytkownicy, którzy zrezygnowali z animacji, lub użytkownicy przeglądarek, które nie obsługują zapytania o media.

/*
  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 używać prefers-reduced-motion w JavaScript, wyobraź sobie, że mam zdefiniowaną złożoną animację za pomocą Web Animations API. Reguły CSS będą dynamicznie wywoływane przez przeglądarkę, gdy zmienią się preferencje użytkownika. W przypadku animacji JavaScript muszę samodzielnie nasłuchiwać zmian, a następnie ręcznie zatrzymywać animacje, które mogą być w toku (lub ponownie je uruchamiać, jeśli użytkownik na to zezwoli):

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)');

Korzystanie z zapytania o media w kontekstach <picture>

Ciekawym przypadkiem użycia jest uzależnienie odtwarzania animowanego pliku AVIF, WebP lub GIF od atrybutu media. Jeśli (prefers-reduced-motion: no-preference) ma wartość true, można 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>

Przyjrzyj się temu przykładowi. Spróbuj włączyć i wyłączyć ustawienia ruchu na urządzeniu, aby zobaczyć różnicę.

Odkrywanie preferencji użytkownika w momencie wysłania prośby

Nagłówek wskazówki klienta Sec-CH-Prefers-Reduced-Motion umożliwia witrynom opcjonalne uzyskiwanie preferencji użytkownika dotyczących ruchu w momencie wysyłania żądania, co pozwala serwerom wstawiać odpowiedni kod CSS ze względu na wydajność.

Prezentacja

Przygotowałem małą wersję demonstracyjną na podstawie niesamowitej strony 🐈 HTTP status cats Rogério Vicente. Najpierw poświęć chwilę na docenienie żartu. Jest zabawny, poczekam. Skoro już wróciłeś(-aś), pozwól, że zaprezentuję Ci wersję demonstracyjną. Podczas przewijania każdy kot stanu HTTP pojawia się na przemian z prawej lub lewej strony. Jest to płynna animacja 60 kl./s, ale jak wspomnieliśmy wcześniej, niektórym użytkownikom może się ona nie podobać, a nawet powodować chorobę lokomocyjną, dlatego wersja demonstracyjna jest zaprogramowana tak, aby uwzględniać prefers-reduced-motion. Działa to nawet dynamicznie, więc użytkownicy mogą zmieniać swoje ustawienia na bieżąco, bez konieczności ponownego wczytywania strony. Jeśli użytkownik woli ograniczone animacje, niepotrzebne animacje ujawniania znikają i pozostaje tylko zwykłe przewijanie. Poniższy screencast pokazuje działanie wersji demonstracyjnej:

Podsumowanie

Respektowanie preferencji użytkowników jest kluczowe w przypadku nowoczesnych witryn, a przeglądarki udostępniają coraz więcej funkcji, które umożliwiają deweloperom internetowym realizację tego celu. Innym przykładem jest prefers-color-scheme, która wykrywa, czy użytkownik woli jasny czy ciemny schemat kolorów. Wszystko na ten temat znajdziesz w moim artykule Hello Darkness, My Old Friend 🌒.prefers-color-scheme

Grupa robocza CSS standaryzuje więcej zapytań o media dotyczących preferencji użytkownika, takich jak prefers-reduced-transparency (wykrywa, czy użytkownik preferuje mniejszą przezroczystość), prefers-contrast (wykrywa, czy użytkownik poprosił system o zwiększenie lub zmniejszenie kontrastu między sąsiednimi kolorami) i inverted-colors (wykrywa, czy użytkownik preferuje odwrócone kolory).

(Bonus) Wymuszanie ograniczenia animacji na wszystkich stronach

Nie każda witryna używa prefers-reduced-motion lub może nie w wystarczającym stopniu. Jeśli z jakiegoś powodu chcesz zatrzymać ruch na wszystkich stronach internetowych, możesz to zrobić. Jednym ze sposobów na to jest wstrzykiwanie arkusza stylów z tym kodem CSS na każdej odwiedzanej stronie. Istnieje kilka rozszerzeń przeglądarki (korzystasz z nich na własne ryzyko!), które to umożliwiają.

@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;
  }
}

Działa to w ten sposób, że poprzedni kod CSS zastępuje czas trwania wszystkich animacji i przejść tak krótkim czasem, że nie są one już zauważalne. Niektóre witryny wymagają uruchomienia animacji, aby działać prawidłowo (być może dlatego, że określony krok zależy od wywołania zdarzenia animationend), więc bardziej radykalne podejście animation: none !important; nie sprawdzi się. Nawet poprzedni sposób nie gwarantuje sukcesu we wszystkich witrynach (np. nie może zatrzymać ruchu zainicjowanego za pomocą interfejsu Web Animations API), więc gdy zauważysz, że coś nie działa, wyłącz go.

Zasoby

• Najnowsza wersja robocza specyfikacji Media Queries Level 5.
• prefers-reduced-motion na stronie Stan platformy Chrome.
• prefers-reduced-motion Błąd w Chromium.
• Blink Intent to Implement posting

Podziękowania

Ogromne podziękowania dla Stephena McGruera, który wdrożył prefers-reduced-motion w Chrome i wraz z Robem Dodsonem sprawdził ten dokument.