preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej

Zapytanie o multimedia o ograniczonym ruchu wykrywa, czy użytkownik zażądał od systemu operacyjnego zminimalizowania ilości używanych animacji lub ruchu.

Thomas Steiner

Nie każdy lubi dekoracyjne animacje i przejścia, a niektórzy użytkownicy doświadczają choroby lokomocyjnej, gdy natrafią na przewijanie z paralaksą, efekty powiększania itp. Za pomocą zapytania o multimedia preferencji użytkownika prefers-reduced-motion możesz zaprojektować wersję witryny z mniejszą liczbą ruchu dla użytkowników, którzy wyrazili takie preferencje.

Obsługa przeglądarek

• 74
• 79
• 63
• 10.1

Źródło

Zbyt dużo ruchu w rzeczywistości i w internecie

Później jeździłem na łyżwach z dziećmi. To był piękny dzień, słońce świeciło, a lodowisko było zatłoczone ludzi ⛸. Jedyny problem to brak miejsca. Przy tak wielu ruchomych celach nie skupiam się na niczym, co powoduje zgubienie się i poczucie pełnego przeciążenia wzrokowego, prawie jak patrzenie na mrowisko 🐜.

Przeciążenie wizualne w rzeczywistości.

Czasami w internecie może coś się stać – np. migające reklamy, efektowne efekty paralaksy, zaskakujące animacje, autoodtwarzanie filmów itp. internet może czasem być przytłaczający... Na szczęście, w przeciwieństwie do prawdziwego życia, znajduje się na to rozwiązanie. Zapytanie o media CSS prefers-reduced-motion umożliwia programistom utworzenie wariantu strony przeznaczonej dla użytkowników, którzy preferują ograniczony ruch. Może to obejmować wszystko: od automatycznego odtwarzania filmów, przez wyłączenie niektórych czysto dekoracyjnych efektów po całkowite przeprojektowanie strony dla określonych użytkowników.

Zanim zajmę się tą funkcją, cofniemy się trochę w tej kwestii i zastanówmy się, do czego służą animacje w internecie. Jeśli chcesz, możesz też pominąć informacje ogólne i od razu przejść do szczegółów technicznych.

Animacje w internecie

Animacja jest często wykorzystywana do przekazania użytkownikowi informacji zwrotnych, na przykład aby poinformować go, że działanie zostało odebrane i jest w trakcie przetwarzania. Na przykład w witrynie sklepu animowanego produktu można wyświetlać w wirtualnym koszyku w formie ikony w prawym górnym rogu witryny.

Inny przypadek użycia to wykorzystanie ruchu do zachowania percepcji użytkownika za pomocą kombinacji ekranów szkieletowych, metadanych kontekstowych i niskiej jakości podglądów obrazów, które zajmują dużo czasu użytkownika i sprawiają szybsze wrażenia. Chodzi o to, aby dać użytkownikowi kontekst i jednocześnie jak najszybciej wczytywać treści.

Są też efekty dekoracyjne, takie jak animowane gradienty, przewijanie z paralaksą czy filmy w tle. Wielu użytkowników lubi takie animacje, ale niektórzy nie lubią, ponieważ rozpraszają one uwagę lub je zwalniają. W najgorszym razie choroba lokomocyjna może być niebezpieczna dla użytkowników, którzy odczuwają ich cierpienie jak w prawdziwym życiu. Dlatego w ich przypadku ograniczanie animacji jest potrzebą medyczną.

Zaburzenie spektrum przedsionków wywołane ruchem

U niektórych użytkowników mdłości lub rozpraszają uwagę podczas oglądania treści animowanych. Animacje przewijane mogą np. powodować zaburzenia przedsionków, gdy elementy inne niż główny element powiązany z przewijaniem często się poruszają. Na przykład animacje z przewijaniem paralaksy mogą powodować zaburzenia przedsionków, ponieważ elementy tła poruszają się z inną szybkością niż elementy na pierwszym planie. Reakcje na zaburzenia przedsionków (ucha wewnętrznego) obejmują zawroty głowy, nudności i migrenowe bóle głowy. Niekiedy w celu powrotu do zdrowia wymagane jest odpoczynek w łóżku.

Usuń ruch w systemach operacyjnych

Wiele systemów operacyjnych ma ustawienia ułatwień dostępu, które na długi czas określają preferowanie zmniejszonego ruchu. Na zrzucie ekranu poniżej widać opcję Reduce motion (Zmniejszanie ruchu) w systemie macOS Mojave i Usuń animacje na Androidzie Pie. Po zaznaczeniu tych preferencji system operacyjny nie będzie korzystać z efektów dekoracyjnych, np. animacji uruchamiających aplikacje. Same aplikacje również mogą i powinny uwzględniać to ustawienie oraz usuwać wszystkie niepotrzebne animacje.

Usuń ruch w przeglądarce

Opcja Zapytania o multimedia, poziom 5, umożliwia także dostęp do internetu w przypadku użytkowników z ograniczonym ruchem. Zapytania o multimedia umożliwiają autorom testowanie i wysyłanie zapytań dotyczących wartości lub funkcji klienta użytkownika bądź urządzenia do wyświetlania niezależnie od renderowanego dokumentu. Zapytanie o multimedia prefers-reduced-motion służy do wykrywania, czy użytkownik wybrał ustawienie systemu operacyjnego, aby zminimalizować ilość używanych animacji lub ruchu. Ten parametr może mieć 2 możliwe wartości:

• no-preference: oznacza, że użytkownik nie wybrał preferencji w używanym systemie operacyjnym. Ta wartość słowa kluczowego jest oceniana jako false w kontekście wartości logicznej.
• reduce: oznacza, że użytkownik ustawił ustawienie systemu operacyjnego, które wskazuje, że interfejsy powinny minimalizować ruch lub animację, najlepiej do tego momentu, w którym wszystkie zbędne ruchy są usuwane.

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

Tak jak w przypadku wszystkich zapytań o media, prefers-reduced-motion można sprawdzić zarówno w kontekście CSS, jak i w kontekście JavaScriptu.

Aby pokazać oba te elementy, załóżmy, że mam przycisk rejestracji, który ma kliknąć użytkownik. Mogłabym zdefiniować przyciągającą uwagę animację „wibracji”, ale jako dobry uczestnik internetu odtworzę ją tylko dla użytkowników, którym wyraźnie zależy na korzystaniu z animacji, ale nie do wszystkich użytkowników, czyli użytkowników, którzy zrezygnowali z animacji, lub użytkowników przeglądarek, które nie rozumieją zapytania dotyczącego multimediów.

/*
  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 stylów CSS związanych z animacjami, możesz uniknąć pobierania ich użytkownikom, którzy z nich zrezygnowali. Aby to zrobić, przenieś wszystkie powiązane z nimi CSS do osobnego arkusza stylów, który będzie wczytywany warunkowo za pomocą atrybutu media w elemencie link 😎: <link rel="stylesheet" href="animations.css" media="(prefers-reduced-motion: no-preference)">

Aby pokazać, jak korzystać z elementu prefers-reduced-motion za pomocą JavaScriptu, wyobraźmy sobie, że zdefiniowano złożoną animację za pomocą interfejsu Web Animations API. Chociaż reguły CSS są dynamicznie aktywowane przez przeglądarkę po zmianie preferencji użytkownika, w przypadku animacji JavaScript muszę wychwytywać zmiany, a potem ręcznie zatrzymać te animacje (lub uruchomić je ponownie, jeśli pozwoli mi 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

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

Tak

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

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

Ciekawym przypadkiem użycia jest uzależnienie odtwarzania animacji AVIF, WebP lub GIF od atrybutu media. Jeśli (prefers-reduced-motion: no-preference) zwraca wartość true, możesz bezpiecznie wyświetlić wersję animowaną, a w przeciwnym razie – statyczną:

<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>

Przykład znajdziesz poniżej. Zmień preferencje dotyczące ruchu na urządzeniu, aby zobaczyć różnicę.

Odkrywanie preferencji użytkownika w momencie wyświetlenia prośby

Nagłówek wskazówek dla klienta Sec-CH-Prefers-Reduced-Motion pozwala witrynom opcjonalnie uzyskiwać informacje o preferencjach dotyczących ruchu użytkownika w momencie żądania. Dzięki temu serwery mogą wbudować odpowiedni kod CSS, aby zwiększyć wydajność.

Wersja demonstracyjna

Przygotowałem tę prezentację w oparciu o niesamowite koty HTTP 🐈 autorstwa Rogério Vicentego. Po pierwsze, poświęć chwilę, żeby docenić ten dowcip, jest zabawny i zaczekam. Teraz, gdy już wróciłeś, chcę Ci przedstawić prezentację. Gdy przewiniesz stronę w dół, każdy tag stanu HTTP pojawi się na zmianę po prawej lub lewej stronie. Ta płynna animacja z 60 kl./sprefers-reduced-motion Działa to nawet dynamicznie, więc użytkownicy mogą zmieniać ustawienia na bieżąco, bez konieczności ponownego ładowania. Jeśli wolisz, żeby obraz był zredukowany, niepotrzebne animacje zniknęły i pozostaje jedynie zwykły ruch przewijania. Screencast poniżej pokazuje prezentację w praktyce:

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

Podsumowanie

W nowoczesnych witrynach szanowanie preferencji użytkowników ma kluczowe znaczenie, a przeglądarki udostępniają coraz więcej funkcji, aby umożliwić ich deweloperom tworzenie stron internetowych. Innym przykładem jest kod prefers-color-scheme, który wykrywa, czy użytkownik preferuje jasny czy ciemny schemat kolorów. Wszystkiego na temat: prefers-color-scheme przeczytasz w artykule Cześć, mój stary przyjaciel 🌒.

Grupa robocza CSS obecnie standaryzuje więcej zapytań o media dotyczące preferencji użytkownika, np. prefers-reduced-transparency (wykrywa, czy użytkownik woli zmniejszoną przezroczystość), prefers-contrast (wykrywa, czy użytkownik zażądał, czy system zwiększył lub zmniejszył kontrast między sąsiadującymi kolorami), oraz inverted-colors (wykrywa, czy użytkownik preferuje odwrócone kolory).

(Bonus) Wymuszanie zmniejszonego ruchu na wszystkich stronach internetowych

Nie każda strona korzysta z elementu prefers-reduced-motion lub może nie być wystarczająco wysoki. Jeśli z jakiegoś powodu chcesz wstrzymać animację we wszystkich witrynach, możesz to zrobić. Jednym ze sposobów jest wstawienie arkusza stylów z podanym niżej kodem CSS na każdej stronie, którą odwiedzasz. Jest kilka rozszerzeń do przeglądarek, które pozwalają na to (zalecamy korzystanie z nich 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 są już niewidoczne. Niektóre strony do prawidłowego działania wymagają animacji (np. zależnie od uruchomienia zdarzenia animationend), bardziej radykalne podejście animation: none !important; się nie uda. Nawet powyższy atak nie gwarantuje powodzenia we wszystkich witrynach (np. nie można zatrzymać ruchu rozpoczętego za pomocą interfejsu Web Animations API), więc jeśli zauważysz błąd, musisz go wyłączyć.

Powiązane artykuły

• Najnowsza wersja robocza specyfikacji Zapytania o multimedia na poziomie 5.
• prefers-reduced-motion w sekcji Stan platformy Chrome.
• prefers-reduced-motion Błąd Chromium.
• Blink Zamiar publikowania.

Podziękowania

Wyróżnienie dla Stephena McGruera, który wdrożył prefers-reduced-motion w Chrome i wraz z Robem Dodsonem sprawdził też ten artykuł. Baner powitalny autorstwa Hannah Cauhepe w aplikacji Unsplash.