preferowanie zmniejszonego ruchu: czasami mniej ruchu oznacza więcej

Zapytanie o multimedia typu „prefers-redudued-motion” sprawdza, czy użytkownik poprosił system operacyjny, by zminimalizować ilość animacji lub ruchu.

Thomas Steiner

Nie każdy lubi dekoracyjne animacje i przejścia, a niektórzy użytkownicy od razu widzą ruch m.in. przewijanie paralaksy czy efekty powiększania. Multimedia wybrane przez użytkownika Zapytanie prefers-reduced-motion pozwala zaprojektować wersję strony z ograniczeniem ruchu dla użytkowników, którzy nie życzą sobie tego.

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

Kiedyś jeździłam na łyżwach z dziećmi. To był wspaniały dzień, słońce świeciło, a lód lodowisko było pełne ludzi ⛸. Jedyny problem: nie radzę sobie dobrze z tłumami. Z tym nie mogę się na niczym skupić, zagubionym i niezrealizowanych celów. wizualne przeciążenie, prawie jak wpatrywanie się w mrowisko 🐜.

Czasami to samo może się zdarzyć w internecie: z migoczącymi reklamami, efektami paralaksy, zaskakującymi ujawniania animacji, autoodtwarzania filmów i innych funkcji, sieć bywa przytłaczająca... Na szczęście, w przeciwieństwie do życia, jest na to rozwiązanie. Zapytanie o media CSS prefers-reduced-motion umożliwia programistom utworzenie wariantu strony dla użytkowników, którzy wolą ograniczenie ruchu. Mogą to być: od powstrzymania się od autoodtwarzania filmów po Wyłączamy niektóre efekty czysto dekoracyjne, a nawet całkowicie zmieniamy wygląd strony w przypadku niektórych użytkowników.

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

Animacje w internecie

Animacja jest często używana do przekazywania opinii użytkownikowi, na przykład aby poinformować go, Odebrano działanie i jest ono przetwarzane. Na przykład w witrynie sklepu można oznaczyć produkt jako być animowany, aby „latać” do wirtualnego koszyka na zakupy, co przedstawia ikona w prawym górnym rogu do witryny.

Innym przypadkiem użycia jest ruch, wrażenia użytkowników tworząc szkieletowe ekrany, metadane kontekstowe i podglądy obrazów niskiej jakości, pochłaniają dużo czasu użytkownika i sprawiają, że cały proces działa szybciej. Chodzi o to, aby z odpowiednim kontekstem dla użytkownika.

Istnieją też efekty dekoracyjne, takie jak animowane gradienty, przewijanie paralaksy czy tło. filmy i kilka innych. Choć wielu użytkownikom podobają się takie animacje, niektórym one się nie podobają, czują się przez to rozproszeni lub spowolnieni. W najgorszym razie może dojść do pogorszenia ruchu jak w prawdziwym życiu. Dla takich użytkowników ograniczanie animacji to problem medyczny .

Zaburzenie spektrum przedsionków wywołanych ruchem

Niektórzy użytkownicy rozpraszanie lub nudności związane z animowanymi treściami. Na przykład animacje przewijania mogą powodować zaburzenia układu przedsionkowego, gdy elementy inne niż główne który jest często przewijany. Na przykład animacje z przewijaniem z efektem paralaksy może powodować zaburzenia wieńcowe, ponieważ elementy tła przesuwają się w innym tempie niż pierwszy plan . Reakcje przedsionkowe (ucho wewnętrzne) obejmują zawroty głowy, nudności i migrenę bóle głowy, a czasami regeneracja wymaga leżenia w łóżku.

Usuń ruch w systemach operacyjnych

Wiele systemów operacyjnych ma ustawienia ułatwień dostępu, które umożliwiają określenie preferencji dotyczących ruchu i ruchu. Na tych zrzutach ekranu widać ustawienie Zmniejsz ruch w systemie macOS Mojave Ustawienie Usuń animacje w Androidzie Pie. Gdy ta opcja jest zaznaczona, ustawienia te powodują aby nie używać efektów dekoracyjnych, takich jak animacje uruchamiania aplikacji. Same aplikacje mogą powinna uwzględniać to ustawienie i usuwać wszystkie niepotrzebne animacje.

Usuń ruch w internecie

Zapytania o multimedia na poziomie 5 zapewniają ograniczenie ruchu. preferencjami użytkownika w internecie. Zapytania o multimedia umożliwiają autorom testowanie wartości lub funkcji oraz wysyłanie dotyczących ich zapytań klienta użytkownika lub urządzenia do wyświetlania niezależnie od renderowanego dokumentu. Zapytanie o multimedia Użyto prefers-reduced-motion wykrywać, czy użytkownik ustawił w systemie operacyjnym opcję minimalizacji animacji lub ruchu. Może przyjmować 2 wartości:

• no-preference: oznacza, że użytkownik nie wybrał preferencji w bazowym systemie operacyjnym. systemu. W kontekście wartości logicznych ta wartość słowa kluczowego jest obliczana jako false.
• reduce: oznacza, że użytkownik ustawił preferencję systemu operacyjnego, co oznacza, że: powinny ograniczać do minimum ruch i animację, najlepiej do punktu, w którym wszystkie nieistotne elementy ruch zostaje usunięty.

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 poziomu kontekstu CSS i kontekstu JavaScript.

Aby zilustrować oba te elementy, załóżmy, że mam ważny przycisk rejestracji, który powinien kliknąć użytkownik. Ja może zdefiniować przyciągające uwagę „wibracje” ale jako dobry obejmujący internet odtworzę Trzeba się zgodzić na animacje tylko tym użytkownikom, którzy mogą którzy zrezygnowali z animacji, lub użytkownicy 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 pokazać, jak korzystać z prefers-reduced-motion za pomocą JavaScriptu, załóżmy, że zdefiniowaliśmy złożoną animację za pomocą funkcji Web Animations API. Chociaż reguły CSS będzie dynamicznie wywoływany przez przeglądarkę, gdy zmienią się preferencje użytkownika, np. JavaScript musisz samodzielnie wyłapać zmiany, a następnie ręcznie zatrzymać (lub uruchom je ponownie, 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:

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

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

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

Ciekawym zastosowaniem jest uzależnienie odtwarzania animacji AVIF, WebP lub GIF od media. Jeśli (prefers-reduced-motion: no-preference) przyjmuje wartość true, jest bezpiecznie wyświetl wersję animowaną, a w przeciwnym razie wersję 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>

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 uzyskiwanie preferencji użytkownika dotyczących ruchu opcjonalnie w momencie żądania co pozwala serwerom na wbudowanie właściwego kodu CSS ze względu na wydajność.

Prezentacja

Przygotowałem małą prezentację na podstawie cudownego, twórczego filmu Rogério Vicentego, 🐈 Koty w stanie HTTP. Po pierwsze, poświęć chwilę, aby docenić ten żart. jest zabawne. Zaczekam. Skoro jesteś z powrotem, przedstawię teraz demo. Podczas przewijania każdy kot o stanie HTTP naprzemiennie pojawia się po prawej lub lewej stronie. Świetny wynik przy 60 FPS ale jak już mówiliśmy, niektórym użytkownikom może się ona nie podobać albo wywoływać u nich chorobę ruchomą. wersja demo jest zaprogramowana tak, aby respektowała prefers-reduced-motion. Działa ono nawet dynamicznie, więc użytkownicy zmienić swoje ustawienia w mgnieniu oka, bez konieczności ponownego ładowania. Jeśli użytkownik preferuje ograniczenie ruchu, niepotrzebnych animacji ujawniania znika i pozostały tylko zwykły ruch przewijania. Oto screencast pokazujący, jak działa wersja demonstracyjna:

Podsumowanie

Respektowanie preferencji użytkowników jest kluczowe we współczesnych witrynach, a przeglądarki udostępniają coraz więcej informacji które pozwalają programistom stron internetowych na to. Innym przykładem wprowadzonych zmian jest prefers-color-scheme, czyli wykrywa, czy użytkownik woli jasny czy ciemny schemat kolorów. Możesz dowiedzieć się wszystkiego na temat: prefers-color-scheme w moim artykule Cześć Ci ciemność, Mój stary przyjaciel 🌒.

Grupa robocza ds. usług porównywania cen standaryzuje zapytania o multimedia związane z preferencjami użytkownika, na przykład prefers-reduced-transparency. (wykrywa, czy użytkownik preferuje mniejszą przezroczystość), prefers-contrast (określa, czy użytkownik zażądał systemu zwiększenia lub zmniejszenia 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. Jednym ze sposobów Tak się dzieje, gdy na każdej stronie, którą odwiedzasz, wstrzykujesz arkusz stylów z poniższym kodem CSS. OK jest kilka rozszerzenia do przeglądarki (korzystasz na własne ryzyko!), które Ci 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 tak, że poprzedni kod CSS zastępuje czasy trwania wszystkich animacji i przejść. w tak krótkim czasie, że nie są już zauważalne. Ponieważ niektóre witryny zależą od animacji który należy uruchomić, aby działać prawidłowo (np. dlatego, że określony krok zależy od polecenia uruchomienia animationend), bardziej radykalne podejście animation: none !important; nie sprawdzi się. Nawet poprzedni atak nie jest będzie skuteczna we wszystkich witrynach (nie może np. powstrzymać ruchu zainicjowanego za pomocą metody Web Animations API), więc koniecznie wyłącz je, gdy zauważysz awarię.

Powiązane artykuły

• Najnowsza wersja robocza programu Zapytania o multimedia – poziom 5 specyfikacja.
• prefers-reduced-motion włączona Stan platformy Chrome.
• prefers-reduced-motion Błąd Chromium.
• Mrugnięcie Zamiar wdrożenia publikowania.

Podziękowania

Wielkie brawa dla Stephena McGruera, który wdrożył wdrożenie prefers-reduced-motion w Chrome i – razem z Rob Dodson – również sprawdził ten dokument. Baner powitalny: Hannah Cauhepe – Unsplash.