preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej

Zapytanie o multimedia: preferuje zmniejszony ruch i wykrywa, czy użytkownik zażądał od systemu operacyjnego ograniczenia ilości animacji lub ruchu.

Thomas Steiner

Nie każdy lubi dekoracyjne animacje i przejścia, a niektórzy użytkownicy, m.in. z przewijaniem paralaksy czy efektami powiększenia, mogą mieć chorobę lokomocyjną. Zapytanie o multimedia „prefers-reduced-motion” pozwala zaprojektować z ograniczeniem ruchu wersję witryny dla użytkowników, którzy wyrazili taką zgodę.

Obsługa przeglądarek

• 74
• 79
• 63
• 10.1

Źródło

Zbyt dużo ruchu w świecie rzeczywistym i w internecie

Kiedyś jeździłam na łyżwach z dziećmi. To był cudowny dzień, słońce świeciło, a lodowisko było pełne ludzi ⛸. Jedyny problem: nie radzę dobrze z tłumami. Przy tak wielu ruchomych celach, nie mogę się na niczym skupić i gubię się w samopoczuciu,

Wizualne przeciążenie w rzeczywistości.

Czasami to samo może się zdarzyć w internecie: w przypadku migających reklam, fantazyjnych efektów paralaksy, zaskakujących animacji odsłaniających, automatycznie odtwarzane filmy itp. sieć czasem może być przytłaczająca... Na szczęście, w przeciwieństwie do rzeczywistości, jest takie 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ć: powstrzymywanie od autoodtwarzania filmów, wyłączanie określonych efektów dekoracyjnych, całkowite przeprojektowanie strony dla określonych użytkowników.

Zanim zagłębimy się w jej funkcję, przyjrzyjmy się temu, do czego służą animacje w internecie. Jeśli chcesz, możesz też pominąć podstawowe informacje i przejść od razu do szczegółów technicznych poniżej.

Animacje w internecie

W animacjach często używa się informacji zwrotnych od użytkownika, np. aby poinformować go, że odebrano działanie i jest ono w trakcie przetwarzania. 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 przykładem zastosowania ruchu 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 sprawić, że całość będzie szybciej. Chodzi o to, aby jak najszybciej przekazać użytkownikowi kontekst tego, co pojawi się na ekranie.

Dostępne są też efekty dekoracyjne, takie jak animowane gradienty, przewijanie paralaksy czy filmy w tle. Wielu użytkowników lubi takie animacje, ale niektórym się nie podobają, bo są przez to rozproszone lub spowalniające. W najgorszym przypadku użytkownicy mogą nawet cierpieć na chorobę lokomocyjną, jakby to było prawdziwe przeżycie, więc dla takich użytkowników ograniczenie animacji jest koniecznością medyczną.

Zaburzenie spektrum przedsionków wywołanych 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 układu przedsionkowego, gdy elementy inne niż główny element powiązany z przewijaniem poruszają się często. 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. Reakcje przedsionkowe (ucho wewnętrzne) obejmują zawroty głowy, nudności i bóle migrenowe. Czasem regeneracja wymaga leżenia w łóżku.

Usuń ruch w systemach operacyjnych

Wiele systemów operacyjnych ma ustawienia ułatwień dostępu, które przez długi czas pozwalają określić preferencję zmniejszonego ruchu. Zrzuty ekranu poniżej pokazują ustawienie Zmniejsz ruch w systemie macOS Mojave i opcję Usuń animacje w Androidzie Pie. Gdy ta opcja jest zaznaczona, system operacyjny nie używa efektów dekoracyjnych, takich jak animacje uruchamiania aplikacji. Same aplikacje też mogą i powinny przestrzegać tego ustawienia oraz usuwać wszystkie niepotrzebne animacje.

Usuń ruch w internecie

Zapytania o multimedia na poziomie 5 umożliwiają też użytkownikom internetu korzystanie ze zmniejszonych preferencji w zakresie ruchu. Zapytania o multimedia umożliwiają autorom testowanie wartości i funkcji klienta użytkownika oraz wyświetlanie zapytań o te wartości niezależnie od renderowanego dokumentu. Zapytanie o media prefers-reduced-motion służy do wykrywania, czy użytkownik ustawił w systemie operacyjnym opcję minimalizacji ilości animacji lub ruchu. Może przyjmować 2 wartości:

• no-preference: oznacza, że użytkownik nie ustawił żadnych preferencji w podstawowym systemie operacyjnym. W kontekście wartości logicznych ta wartość słowa kluczowego jest obliczana jako false.
• reduce: oznacza, że użytkownik ustawił w systemie operacyjnym preferencje, że interfejsy powinny ograniczać do minimum ruch i animacje, najlepiej do momentu, gdy usunięto niepotrzebne elementy.

Praca z zapytaniami o media z kontekstów CSS i JavaScript

Tak jak w przypadku wszystkich zapytań o media, pole prefers-reduced-motion można sprawdzić z kontekstu CSS i z kontekstu JavaScriptu.

Aby zilustrować oba te elementy, załóżmy, że mam ważny przycisk rejestracji, który powinien kliknąć użytkownik. Mogę zdefiniować przyciągającą uwagę animację „wibracyjną”, ale będąc dobrym obywatelem internetu odtwarzam ją tylko tym użytkownikom, którzy się na to zgadzają, ale nie wszystkim innym, czyli użytkownikom, którzy zrezygnowali z animacji, lub użytkownikom przeglądarek, które nie rozumieją zapytań 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;
  }
}

Uwaga: jeśli masz dużo arkuszy CSS związanych z animacjami, możesz zapobiec ich pobieraniu przez użytkowników, którzy zrezygnowali z ich pobierania, zlecając przekazanie całego kodu CSS związanego z animacjami do osobnego arkusza stylów, który jest ładowany warunkowo tylko warunkowo przez atrybut media w elemencie link 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Aby pokazać, jak korzystać z prefers-reduced-motion za pomocą JavaScriptu, załóżmy, że w interfejsie Web Animations API mam zdefiniowaną złożoną animację. 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ół zapytania o media są obowiązkowe:

Nie wolno

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

Tak

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

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

Ciekawym przypadkiem użycia jest uzależnienie odtwarzania animacji AVIF, WebP lub GIF od atrybutu media. Jeśli (prefers-reduced-motion: no-preference) otrzyma wartość true, można bezpiecznie wyświetlić wersję animowaną. W przeciwnym razie 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>

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

Odkrywanie preferencji użytkownika w momencie wysłania żądania

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

Pokaz

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. Skoro jesteś z powrotem, czas zaprezentować prezentację. Gdy przewijasz w dół, każdy stan HTTP pojawia się na przemian z prawej lub lewej strony. Choć jest to płynna animacja z szybkością 60 kl./s, może się ona nie podobać niektórym użytkownikom lub po prostu odczuwać chorobę ruchomą, więc prezentacja została zaprogramowana w taki sposób, by uwzględniała prefers-reduced-motion. Działa ono nawet dynamicznie, więc użytkownicy mogą zmieniać swoje ustawienia w dowolnym momencie, bez potrzeby ponownego wczytywania strony. Jeśli użytkownik preferuje ograniczenie ruchu, niepotrzebne animacje odsłaniania nie będą potrzebne i pozostanie tylko zwykły ruch przewijany. Oto jak to działa:

Film przedstawiający prefers-reduced-motion demonstracyjną aplikację

Podsumowanie

Uwzględnienie preferencji użytkowników w nowoczesnych witrynach ma kluczowe znaczenie, a przeglądarki udostępniają coraz więcej funkcji, które umożliwiają programistom tworzenie takich stron. Innym przykładem jest prefers-color-scheme, który pokazuje, czy użytkownik preferuje jasny czy ciemny schemat kolorów. Wszystko na temat prefers-color-scheme przeczytasz w moim artykule Cześć, mój stary przyjaciel 🌒.

Zespół roboczy CSS standaryzuje obecnie 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 ograniczenia ruchu na wszystkich stronach

Nie każda strona będzie korzystać z prefers-reduced-motion lub może nie być wystarczająco dużo, żeby dostosować do Twojego gustu. Jest to możliwe, jeśli z jakiegoś powodu chcesz zatrzymać ruch na wszystkich stronach internetowych. Aby to osiągnąć, możesz na każdej stronie, którą odwiedzasz, wstrzykiwać arkusz stylów z podanym niżej kodem CSS. Możesz w tym celu skorzystać z kilku rozszerzeń 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;
  }
}

Działa to tak, że powyższy kod CSS zastępuje czasy trwania wszystkich animacji i przejść do tak krótkiego czasu, że nie są one już zauważalne. Prawidłowe działanie niektórych witryn wymaga uruchomienia animacji (np. gdy określony krok zależy od uruchamiania zdarzenia animationend), więc bardziej radykalne podejście animation: none !important; się nie sprawdzi. Nawet ten atak nie gwarantuje powodzenia we wszystkich witrynach (np. nie może powstrzymać animacji zainicjowanej przez interfejs Web Animations API), więc pamiętaj, by wyłączyć go, gdy zauważysz awarie.

Powiązane artykuły

• Najnowsza wersja robocza specyfikacji zapytań o multimedia na poziomie 5.
• prefers-reduced-motion o stanie platformy Chrome.
• prefers-reduced-motion Błąd Chromium.
• Blink Zamiar wdrożenia publikowania

Podziękowania

Wielkie brawa dla Stephena McGruera, który wdrożył prefers-reduced-motion w Chrome, i wraz z Robem Dodsonem przeczytał ten artykuł. Baner powitalny: Hannah Cauhepe – Unsplash.