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 gerakan saat dihadapkan dengan scroll paralaks, efek zoom, dan sebagainya. Kueri media preferensi pengguna
prefers-reduced-motion
memungkinkan Anda mendesain varian situs dengan pengurangan gerakan untuk pengguna yang
telah menyatakan preferensi ini.
Terlalu banyak gerakan di kehidupan nyata dan di web
Beberapa hari yang lalu, saya bermain seluncur es dengan anak-anak saya. Hari itu sangat menyenangkan, matahari bersinar, dan gelanggang es dipenuhi orang ⛸. Satu-satunya masalah: Saya tidak bisa mengatasi kerumunan dengan baik. Dengan begitu banyak target yang bergerak, aku gagal fokus pada apa pun, dan akhirnya tersesat dan merasa memiliki visual yang berlebihan, hampir seperti menatap sarang semut 🏅.
Terkadang, hal yang sama dapat terjadi di web: dengan iklan yang berkedip, efek paralaks yang keren, animasi pengungkapan yang mengejutkan, video yang diputar otomatis, dan sebagainya, web terkadang bisa sangat melelahkan... 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 lebih sedikit. Mulai dari tidak memutar video otomatis,
menonaktifkan efek dekoratif tertentu, hingga mendesain ulang halaman sepenuhnya untuk pengguna tertentu.
Sebelum saya mempelajari fitur ini, mari kita mundur selangkah dan memikirkan jenis animasi yang digunakan di web. Jika mau, Anda juga dapat melewati informasi latar belakang dan langsung melihat detail teknis di bawah.
Animasi di web
Animasi sering kali digunakan untuk memberikan masukan kepada pengguna, misalnya, untuk memberi tahu bahwa suatu tindakan telah diterima dan sedang diproses. Misalnya, di situs belanja, produk dapat dianimasikan untuk "terbang" ke keranjang belanja virtual, yang digambarkan sebagai ikon di sudut kanan atas situs.
Kasus penggunaan lainnya melibatkan penggunaan gerakan 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 terjadi dan untuk memuat berbagai hal secepat mungkin.
Terakhir, ada efek dekoratif seperti gradien animasi, scroll paralaks, video latar belakang, dan beberapa lainnya. Meskipun banyak pengguna menikmati animasi seperti itu, beberapa pengguna tidak menyukainya karena mereka merasa terganggu atau terhambat olehnya. Dalam kasus terburuk, pengguna bahkan dapat mengalami mabuk perjalanan seolah-olah mengalami pengalaman nyata, sehingga 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 dengan elemen latar depan. Reaksi gangguan vestibular (telinga bagian dalam) meliputi pusing, mual, dan sakit kepala migrain, dan terkadang memerlukan istirahat di tempat tidur.
Menghapus gerakan pada sistem operasi
Banyak sistem operasi memiliki setelan aksesibilitas untuk menentukan preferensi gerakan yang dikurangi untuk waktu yang lama. Screenshot di bawah menunjukkan preferensi Reduce motion pada macOS Mojave dan preferensi Remove animation Android Pie. Jika dicentang, preferensi ini menyebabkan sistem operasi tidak menggunakan efek dekoratif seperti animasi peluncuran aplikasi. Aplikasi itu sendiri dapat dan harus mengikuti setelan ini, serta menghapus semua animasi yang tidak diperlukan.
Menghapus gerakan di web
Kueri Media Level 5 juga menghadirkan pengurangan preferensi
pengguna gerakan ke web. Kueri media memungkinkan penulis menguji dan mengajukan kueri 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. Mungkin ada dua kemungkinan nilai:
no-preference
: Menunjukkan bahwa pengguna tidak membuat preferensi pada sistem operasi yang mendasarinya. Nilai kata kunci ini dievaluasi sebagaifalse
dalam konteks boolean.reduce
: Menunjukkan bahwa pengguna telah menetapkan preferensi sistem operasi yang menunjukkan bahwa antarmuka harus meminimalkan gerakan atau animasi, sebaiknya ke titik di mana semua gerakan yang tidak penting dihapus.
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, katakanlah saya memiliki tombol pendaftaran penting yang saya inginkan agar diklik pengguna. Saya dapat mendefinisikan animasi "getar" yang menarik perhatian, tetapi sebagai warga web yang baik, saya hanya akan memutarnya untuk pengguna yang secara eksplisit tidak keberatan dengan animasi, tetapi tidak semua orang lain, yang bisa saja pengguna yang telah menonaktifkan 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 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, kemudian secara manual menghentikan animasi yang mungkin sedang berlangsung (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:
window.matchMedia('prefers-reduced-motion: reduce');
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 jika tidak:
<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 di bawah. Coba alihkan preferensi gerakan perangkat Anda untuk melihat perbedaannya.
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 Kucing status HTTP
yang menakjubkan dari Rogério Vicente. Pertama, luangkan waktu sejenak untuk memahami lelucon itu
sangat lucu dan saya akan menunggu. Setelah kembali lagi, saya akan memperkenalkan
demo. Saat Anda men-scroll ke bawah, setiap kucing status HTTP
bergantian muncul dari sisi kanan atau kiri. Ini adalah animasi 60 FPS yang lancar, tetapi seperti yang diuraikan di atas, beberapa pengguna mungkin tidak menyukainya atau bahkan menjadi mual karenanya, sehingga
demo diprogram untuk mematuhi prefers-reduced-motion
. Cara ini bahkan berfungsi secara dinamis, sehingga pengguna dapat
mengubah preferensi dengan cepat, tanpa perlu memuat ulang. Jika pengguna lebih memilih gerakan yang lebih sedikit, animasi pengungkapan yang tidak diperlukan akan hilang, dan hanya gerakan scroll reguler yang tersisa. Screenshot
di bawah ini menunjukkan cara kerja demo:
Kesimpulan
Menghormati preferensi pengguna adalah kunci untuk situs modern, dan browser akan mengekspos lebih banyak
fitur agar developer web dapat melakukannya. Contoh lain yang diluncurkan adalah
prefers-color-scheme
, yang
mendeteksi apakah pengguna lebih memilih 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 saat ini menstandarkan lebih banyak
kueri media preferensi pengguna seperti
prefers-reduced-transparency
(mendeteksi apakah pengguna lebih menyukai transparansi yang lebih rendah),
prefers-contrast
(mendeteksi apakah pengguna
telah meminta sistem untuk menambah atau mengurangi jumlah kontras di antara warna yang berdekatan),
dan inverted-colors
(mendeteksi apakah pengguna
lebih menyukai 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 melakukannya adalah dengan memasukkan stylesheet dengan CSS berikut ke dalam 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 singkat sehingga tidak terlihat lagi. Karena beberapa situs bergantung pada animasi
yang akan dijalankan agar berfungsi dengan benar (mungkin karena langkah tertentu bergantung pada pengaktifan
peristiwa animationend
),
pendekatan animation: none !important;
yang lebih radikal tidak akan berfungsi. 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.
Link Terkait
- Draf Editor terbaru untuk spesifikasi Kueri Media Level 5.
prefers-reduced-motion
di Status Platform Chrome.prefers-reduced-motion
Bug Chromium.- Berkedip Intent untuk Mengimplementasikan postingan.
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.