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 gerakan yang digunakannya.

Tidak semua orang menyukai animasi atau transisi dekoratif, dan beberapa pengguna langsung mengalami mabuk gerak saat dihadapkan dengan scroll paralaks, efek zoom, dan sebagainya. Kueri media preferensi pengguna prefers-reduced-motion memungkinkan Anda mendesain varian situs yang dikurangi gerakannya bagi pengguna yang telah menyatakan preferensi ini.

Dukungan Browser

  • 74
  • 79
  • 63
  • 10.1

Sumber

Terlalu banyak gerakan dalam kehidupan nyata dan di web

Suatu hari, saya bermain seluncur es bersama anak-anak saya. Hari itu hari yang indah, matahari bersinar, dan arena seluncur es penuh dengan orang-orang ⛸. Satu-satunya masalah dengan itu: Saya tidak mengatasi keramaian dengan baik. Dengan begitu banyak target yang bergerak, saya gagal untuk fokus pada apa pun, dan akhirnya tersesat dan dengan perasaan visual yang berlebihan, hampir seperti menatap sarang semut 📊.

Kerumunan kaki orang-orang seluncur es.
Visual yang berlebihan di kehidupan nyata.

Terkadang, hal yang sama dapat terjadi di web: dengan iklan yang berkedip, efek paralaks yang rumit, animasi penyingkapan yang mengejutkan, video yang diputar otomatis, dan sebagainya, web terkadang bisa sangat membebani... Untungnya, tidak seperti di kehidupan nyata, ada solusinya. Kueri media CSS prefers-reduced-motion memungkinkan developer membuat varian halaman untuk pengguna yang lebih memilih gerakan yang dikurangi. Hal ini dapat mencakup apa saja, mulai dari tidak memutar video secara otomatis, menonaktifkan efek dekoratif tertentu, hingga mendesain ulang halaman untuk pengguna tertentu sepenuhnya.

Sebelum mempelajari fitur ini lebih jauh, mari mundur selangkah dan pikirkan tentang penggunaan animasi di web. Jika mau, Anda juga dapat melewati informasi latar belakang dan langsung membuka detail teknis di bawah.

Animasi di web

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

Kasus penggunaan lainnya melibatkan penggunaan gerakan untuk meretas persepsi pengguna dengan menggunakan campuran layar kerangka, metadata kontekstual, dan pratinjau gambar berkualitas rendah agar menempatkan banyak waktu pengguna dan membuat seluruh pengalaman terasa lebih cepat. Idenya adalah untuk memberikan konteks kepada pengguna tentang apa yang akan datang dan pada saat yang sama memuat sesuatu secepat mungkin.

Terakhir, ada efek dekoratif seperti animasi gradien, scroll paralaks, video latar belakang, dan beberapa lainnya. Meskipun banyak pengguna menikmati animasi seperti itu, beberapa pengguna tidak menyukainya karena mereka merasa terganggu atau diperlambat oleh animasi tersebut. Dalam kasus terburuk, pengguna bahkan mungkin mengalami mabuk gerak seolah-olah itu adalah pengalaman nyata. Jadi, bagi pengguna ini, mengurangi animasi adalah kebutuhan medis.

Gangguan spektrum vestibular yang dipicu gerakan

Beberapa pengguna mengalami gangguan atau mual akibat konten animasi. Misalnya, animasi scroll dapat menyebabkan gangguan vestibular jika elemen selain elemen utama yang terkait dengan scroll sering bergerak. Misalnya, animasi scroll paralaks dapat menyebabkan gangguan vestibular karena elemen latar belakang bergerak dengan kecepatan yang berbeda dibandingkan elemen latar depan. Reaksi gangguan vestibular (telinga bagian dalam) meliputi pusing, mual, dan sakit kepala migrain, dan terkadang memerlukan istirahat untuk memulihkan diri.

Menghapus {i>motion <i}pada sistem operasi

Banyak sistem operasi memiliki setelan aksesibilitas untuk menentukan preferensi gerakan yang dikurangi dalam waktu yang lama. Screenshot di bawah ini menunjukkan preferensi Reduce motion macOS Mojave dan preferensi Remove animation Android Pie. Jika dicentang, preferensi ini menyebabkan sistem operasi tidak menggunakan efek dekoratif seperti animasi peluncuran aplikasi. Aplikasi juga dapat dan harus mengikuti setelan ini, serta menghapus semua animasi yang tidak diperlukan.

Screenshot layar setelan macOS dengan kotak centang &#39;Reduce motion&#39; dicentang.
Screenshot layar setelan Android dengan kotak &#39;Hapus animasi&#39; dicentang.

Menghapus gerakan di web

Kueri Media Level 5 juga menghadirkan pengurangan preferensi pengguna gerakan ke web. Kueri media memungkinkan penulis menguji dan mengkueri nilai atau fitur agen pengguna atau perangkat tampilan, terlepas dari dokumen yang dirender. Kueri media prefers-reduced-motion digunakan untuk mendeteksi apakah pengguna telah menetapkan preferensi sistem operasi untuk meminimalkan jumlah animasi atau gerakan yang digunakannya. Class ini dapat memiliki dua kemungkinan nilai:

  • no-preference: Menunjukkan bahwa pengguna tidak membuat preferensi pada sistem operasi yang mendasarinya. 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, sebaiknya ke titik penghapusan semua gerakan yang tidak penting.

Menggunakan 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, katakanlah saya memiliki tombol pendaftaran penting yang harus diklik pengguna. Saya dapat mendefinisikan animasi "getaran" yang menarik perhatian, tetapi sebagai pengguna web yang baik, saya hanya akan memutarnya untuk pengguna yang secara eksplisit menyukai animasi, tetapi tidak untuk semua orang lainnya, yang bisa jadi adalah pengguna yang memilih untuk tidak menggunakan 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 menggunakan JavaScript, bayangkan saya telah menentukan animasi yang kompleks dengan Web Animations API. Meskipun aturan CSS akan dipicu secara dinamis oleh browser saat preferensi pengguna berubah, untuk animasi JavaScript, saya harus memproses perubahan sendiri, lalu secara manual menghentikan animasi yang sedang berlangsung (atau memulai ulang animasi tersebut 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 bergantung pada atribut media. Jika (prefers-reduced-motion: no-preference) bernilai true, Anda dapat menampilkan 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 contohnya di bawah ini. Coba ubah preferensi gerakan perangkat untuk melihat perbedaannya.

Kucing Nyan

Menemukan preferensi pengguna pada waktu permintaan

Header petunjuk klien Sec-CH-Prefers-Reduced-Motion memungkinkan situs mendapatkan preferensi gerakan pengguna secara opsional pada waktu permintaan, sehingga server dapat menyisipkan CSS yang tepat untuk alasan performa.

Demo

Saya telah membuat demo kecil berdasarkan 🐈 status HTTP cats milik Rogério Vicente yang menakjubkan. Pertama, luangkan waktu sejenak untuk mengapresiasi lelucon itu, sangat lucu dan saya akan menunggu. Sekarang Anda kembali, izinkan saya memperkenalkan demo. Saat Anda men-scroll ke bawah, setiap ikon status HTTP akan muncul secara bergantian dari sisi kanan atau kiri. Ini adalah animasi 60 FPS yang sangat halus, tetapi seperti yang diuraikan di atas, beberapa pengguna mungkin tidak menyukainya atau bahkan mual karena gerakan, sehingga demo diprogram untuk mematuhi prefers-reduced-motion. Cara ini bahkan berfungsi secara dinamis, sehingga pengguna dapat mengubah preferensinya dengan cepat dan tidak perlu memuat ulang. Jika pengguna lebih memilih gerakan yang lebih sedikit, animasi buka yang tidak diperlukan akan hilang, dan hanya gerakan scroll reguler yang tersisa. Screencast di bawah ini menunjukkan cara kerja demo:

Video aplikasi demo prefers-reduced-motion

Kesimpulan

Menghormati preferensi pengguna adalah kunci bagi situs modern, dan browser menampilkan lebih banyak fitur untuk memungkinkan developer web melakukannya. Contoh lain yang diluncurkan adalah prefers-color-scheme, yang mendeteksi apakah pengguna lebih memilih skema warna terang atau gelap. Anda dapat membaca semuanya tentang prefers-color-scheme di artikel saya Hello Darkness, My Old Friend PLACEHOLDER.

CSS Working Group saat ini menstandarkan lebih banyak kueri media preferensi pengguna seperti prefers-reduced-transparency (mendeteksi apakah pengguna lebih memilih pengurangan transparansi), prefers-contrast (mendeteksi apakah pengguna telah meminta sistem untuk meningkatkan atau mengurangi jumlah kontras antara warna yang berdekatan), dan inverted-colors (mendeteksi apakah pengguna lebih menyukai warna terbalik).

(Bonus) Memaksa gerakan yang dikurangi di semua situs

Tidak semua situs akan menggunakan prefers-reduced-motion, atau mungkin tidak cukup signifikan sesuai 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 melakukannya adalah dengan memasukkan stylesheet dengan CSS berikut ke setiap halaman web yang Anda kunjungi. Ada 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 CSS di atas mengganti durasi semua animasi dan transisi dalam waktu yang begitu singkat sehingga tidak terlihat lagi. Karena beberapa situs bergantung pada animasi yang dijalankan agar berfungsi dengan benar (mungkin karena langkah tertentu bergantung pada pengaktifan peristiwa animationend), pendekatan animation: none !important; yang lebih radikal tidak akan berfungsi. Bahkan peretasan di atas tidak dijamin akan berhasil di semua situs (misalnya, peretasan tidak dapat menghentikan gerakan yang dimulai melalui Web Animations API), jadi pastikan untuk menonaktifkannya saat Anda melihat kerusakan.

Ucapan terima kasih

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