Preferreds-Reduced-motion: Terkadang lebih sedikit gerakan lebih baik

Kueri media Preferreds-reduced-motion mendeteksi apakah pengguna telah meminta sistem operasi untuk meminimalkan jumlah animasi atau {i>motion <i}yang digunakannya.

Thomas Steiner

Tidak semua orang menyukai animasi atau transisi dekoratif, dan beberapa pengguna langsung merasakan {i>motion<i} sakit saat dihadapkan pada scroll paralaks, efek zoom, dan banyak lagi. Media preferensi pengguna kueri prefers-reduced-motion memungkinkan Anda mendesain varian situs dengan pengurangan gerakan untuk pengguna yang telah menyatakan preferensi ini.

Dukungan Browser

  • Chrome: 74.
  • Edge: 79.
  • Firefox: 63.
  • Safari: 10.1.

Sumber

Terlalu banyak gerakan di kehidupan nyata dan di web

Beberapa hari yang lalu, saya bermain seluncur es dengan anak-anak saya. Hari yang indah, matahari bersinar, dan es arena dipenuhi orang ⛸. Satu-satunya masalah: Saya tidak bisa menangani keramaian dengan baik. Dengan begitu banyak sasaran bergerak, saya gagal fokus pada apa pun, dan akhirnya tersesat dan dengan perasaan lengkap visualnya berlebihan, hampir seperti menatap sarang semut 🏅.

Kerumunan kaki orang yang bermain seluncur es.
Kelebihan visual dalam kehidupan nyata.

Terkadang, hal yang sama dapat terjadi di web: dengan iklan yang berkedip, efek paralaks yang keren, dan yang tidak terduga menampilkan animasi, video yang diputar otomatis, dan banyak lagi, web terkadang bisa cukup merepotkan... Untungnya, tidak seperti di kehidupan nyata, ada solusinya. Kueri media CSS prefers-reduced-motion memungkinkan developer membuat varian halaman untuk pengguna yang lebih menyukai mengurangi gerakan. Mulai dari berhenti menggunakan video {i>autoplaying <i}hingga menonaktifkan efek dekoratif tertentu, untuk mendesain ulang laman secara menyeluruh untuk pengguna tertentu.

Sebelum saya mempelajari lebih lanjut fitur ini, saya akan mundur selangkah dan memikirkan jenis animasi yang digunakan di web. Jika mau, Anda juga dapat melewati informasi latar belakang dan langsung membahas detail teknis.

Animasi di web

Animasi sering kali digunakan untuk memberikan masukan kepada pengguna, misalnya, untuk memberi tahu mereka bahwa tindakan diterima dan sedang diproses. Misalnya, di {i>website<i} belanja, produk dapat dianimasikan untuk "terbang" ke dalam keranjang belanja virtual, yang digambarkan sebagai ikon di sudut kanan atas situs tersebut.

Kasus penggunaan lainnya melibatkan penggunaan {i>motion <i}untuk meretas persepsi pengguna dengan menggunakan kombinasi layar kerangka, metadata kontekstual, dan pratinjau gambar berkualitas rendah untuk menghabiskan banyak waktu pengguna dan membuat seluruh pengalaman terasa lebih cepat. Idenya adalah untuk memberikan konteks kepada pengguna tentang apa yang akan datang dan memuat hal-hal secepat mungkin.

Terakhir, ada efek dekoratif seperti gradien animasi, scroll paralaks, latar belakang video, dan beberapa lainnya. Meskipun banyak pengguna menikmati animasi seperti itu, beberapa pengguna tidak menyukainya karena mereka merasa teralihkan atau diperlambat oleh mereka. Dalam kasus terburuk, pengguna bahkan mungkin mengalami {i>motion<i} sakit seolah-olah itu adalah pengalaman kehidupan nyata, sehingga bagi pengguna ini yang mengurangi animasi adalah kedokteran kebutuhan.

Gangguan spektrum vestibular yang dipicu gerakan

Beberapa pengalaman pengguna gangguan atau mual dari konten animasi. Contohnya, animasi yang bergulir dapat menyebabkan gangguan vestibular ketika elemen selain elemen yang terkait dengan {i>scrolling<i} sering bergerak. Misalnya, animasi scroll paralaks dapat menyebabkan gangguan vestibular karena elemen latar belakang bergerak dengan kecepatan yang berbeda dari latar depan yang kurang penting. Reaksi gangguan vestibular (telinga bagian dalam) termasuk pusing, mual, dan migrain sakit kepala, dan terkadang membutuhkan istirahat di tempat tidur untuk pemulihan.

Menghapus gerakan pada sistem operasi

Banyak sistem operasi memiliki setelan aksesibilitas untuk menentukan preferensi terhadap {i>motion <i}untuk waktu yang lama. Screenshot berikut menunjukkan preferensi Reduce motion pada macOS Mojave dan Preferensi Remove animation Android Pie. Bila dicentang, preferensi ini menyebabkan sistem untuk tidak menggunakan efek dekoratif seperti animasi peluncuran aplikasi. Aplikasi itu sendiri bisa dan harus mengikuti pengaturan ini juga, dan menghapus semua animasi yang tidak diperlukan.

Layar setelan macOS dengan &#39;Reduce motion&#39; dicentang.
Layar setelan Android dengan &#39;Hapus animasi&#39; dicentang.

Menghapus gerakan di web

Kueri Media Level 5 menghasilkan gerakan yang lebih rendah preferensi pengguna terhadap web. Kueri media memungkinkan penulis menguji dan mengkueri nilai atau fitur agen pengguna atau perangkat tampilan yang terpisah dari dokumen yang dirender. Kueri media prefers-reduced-motion digunakan untuk mendeteksi apakah pengguna telah mengatur preferensi sistem operasi untuk meminimalkan jumlah animasi atau {i>motion <i}yang digunakannya. Mungkin ada dua kemungkinan nilai:

  • no-preference: Menunjukkan bahwa pengguna tidak membuat preferensi di operasi dasar sistem file. Nilai kata kunci ini dievaluasi sebagai false dalam konteks boolean.
  • reduce: Menunjukkan bahwa pengguna telah menetapkan preferensi sistem operasi yang menunjukkan bahwa antarmuka harus meminimalkan gerakan atau animasi, terutama ke titik di mana semua hal yang tidak penting gerakan dihilangkan.

Menangani kueri media dari konteks CSS dan JavaScript

Seperti semua kueri media, prefers-reduced-motion dapat diperiksa dari konteks CSS dan dari Konteks JavaScript.

Untuk menggambarkan keduanya, asumsikan saya memiliki tombol pendaftaran penting yang saya inginkan agar diklik pengguna. diri bisa mendefinisikan "getaran" yang menarik perhatian animasi, tapi sebagai warga web yang baik, saya hanya akan memainkan itu untuk pengguna yang secara eksplisit setuju dengan animasi, tetapi tidak semua orang, yang bisa yang telah memilih untuk tidak ikut animasi, atau pengguna di browser yang tidak memahami kueri 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;
  }
}

Untuk menggambarkan cara menggunakan prefers-reduced-motion dengan JavaScript, bayangkan saya memiliki menentukan animasi yang kompleks dengan Web Animations API. Meskipun aturan CSS akan dipicu secara dinamis oleh browser saat preferensi pengguna berubah, untuk JavaScript animasi saya harus mendengarkan perubahan sendiri, kemudian menghentikan secara manual animasi (atau memulai ulang jika pengguna mengizinkan saya):

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

Perhatikan bahwa tanda kurung di sekitar kueri media yang sebenarnya bersifat wajib:

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

Menangani kueri media dari konteks <picture>

Kasus penggunaan yang menarik adalah membuat pemutaran AVIF, WebP, atau GIF animasi yang bergantung pada Atribut media. Jika (prefers-reduced-motion: no-preference) bernilai true, Anda dapat tampilkan versi animasi, atau versi statis:

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

Anda dapat melihat contoh berikut. Coba alihkan preferensi gerakan perangkat Anda untuk melihat perbedaannya.

Kucing Nyan yang terkenal.

Menemukan preferensi pengguna pada waktu permintaan

Header petunjuk klien Sec-CH-Prefers-Reduced-Motion memungkinkan situs memperoleh preferensi {i>motion <i}pengguna secara opsional pada waktu permintaan, memungkinkan server untuk menyejajarkan CSS yang tepat untuk alasan kinerja.

Demo

Saya telah membuat demo kecil berdasarkan penampilan luar biasa Rogério Vicente 🐈 Status HTTP HTTP. Pertama, luangkan waktu sejenak untuk menghargai leluconnya, ini lucu dan saya akan menunggu. Setelah kembali lagi, saya akan memperkenalkan demo. Saat Anda men-scroll, setiap kucing status HTTP muncul dari sisi kanan atau kiri secara bergantian. 60 FPS nyaris lancar animasi, tetapi seperti yang diuraikan sebelumnya, beberapa pengguna mungkin tidak menyukainya atau bahkan menjadi mual karenanya, sehingga demo diprogram untuk mematuhi prefers-reduced-motion. Ini bahkan bekerja secara dinamis, sehingga pengguna dapat mengubah preferensi dengan cepat, tidak perlu memuat ulang. Jika pengguna lebih menyukai gerakan yang dikurangi, animasi pengungkapan yang tidak diperlukan hilang, dan hanya gerakan scroll reguler yang tersisa. Tujuan screencast berikut menunjukkan cara kerja demo:

Video Demo prefers-reduced-motion aplikasi

Kesimpulan

Menghormati preferensi pengguna adalah kunci bagi {i>website<i} modern, dan {i>browser<i} mengekspos untuk memungkinkan pengembang web melakukannya. Contoh lain yang diluncurkan adalah prefers-color-scheme, yang mendeteksi apakah pengguna lebih menyukai skema warna terang atau gelap. Anda dapat membaca semua hal tentang prefers-color-scheme di artikel saya Hello Darkness, My Old Friend.

CSS Working Group menstandarkan lebih kueri media preferensi pengguna seperti prefers-reduced-transparency (mendeteksi apakah pengguna menginginkan transparansi yang lebih rendah), prefers-contrast (mendeteksi apakah pengguna meminta sistem menambah atau mengurangi jumlah kontras di antara warna yang berdekatan), dan inverted-colors (mendeteksi apakah pengguna lebih suka warna terbalik).

(Bonus) Memaksa pengurangan gerakan di semua situs

Tidak semua situs akan menggunakan prefers-reduced-motion, atau mungkin tidak cukup signifikan untuk selera Anda. Jika Anda, untuk alasan apa pun, ingin menghentikan {i>motion <i}di semua situs web, Anda sebenarnya bisa melakukannya. Salah satu cara untuk membuat ini terjadi adalah dengan memasukkan {i>style sheet<i} dengan CSS berikut ke dalam setiap laman web yang Anda kunjungi. Ada adalah beberapa ekstensi browser di luar sana (gunakan dengan risiko Anda sendiri!) yang memungkinkan hal ini.

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

Cara kerjanya adalah bahwa CSS sebelumnya mengganti durasi semua animasi dan transisi dalam waktu yang sangat singkat sehingga tidak akan terlihat lagi. Karena beberapa situs web bergantung pada animasi untuk dijalankan agar bekerja dengan benar (mungkin karena langkah tertentu tergantung pada pengaktifan peristiwa animationend), pendekatan animation: none !important; yang lebih radikal tidak akan berhasil. Bahkan peretasan sebelumnya pun tidak dijamin berhasil di semua situs (misalnya, tidak dapat menghentikan gerakan yang diinisiasi menggunakan Web Animations API), jadi pastikan untuk menonaktifkannya saat Anda melihat kerusakan.

Ucapan terima kasih

Terima kasih banyak kepada Stephen McGruer yang telah mengimplementasikan prefers-reduced-motion di Chrome dan—bersama dengan Rob Dodson—juga telah meninjau dokumen ini. Banner besar oleh Hannah Cauhepe di Unsplash.