Beberapa pembaca mengalami migrain atau masalah keseimbangan akibat gerakan halaman. OS sudah mengetahuinya; ini memperlihatkan preferensi ke halaman web sebagai kueri media yang lebih disukai dengan gerakan yang dikurangi. Tugas Anda adalah mengarahkan setiap animasi sukarela melaluinya.
@media (prefers-reduced-motion: no-preference) {
.reading-bar { animation: reading linear;
animation-timeline: scroll(root block); }
.card { transition: transform 0.3s ease; }
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Arti pengurangan bagi Anda
- Gerakan dekoratif berhenti seluruhnya: paralaks, lencana mengambang, koreografi masuk.
- Perubahan status yang berarti terus terjadi, secara instan: panel terbuka; tidak ada perosotan. Informasinya tiba tanpa tumpangan.
- Animasi terlampir yang digerakkan oleh gulir dicakup oleh gerbang yang sama; mengikatnya ke tanpa preferensi berarti pembaca yang tidak mendukung atau memilih tidak ikut serta mendapatkan tata letak keadaan diam tanpa jeda visual.
Audit yang menjaganya tetap jujur
- Aktifkan preferensi OS (macOS: kurangi gerakan, lalu muat ulang) dan klik setiap hal interaktif di situs.
- Ambil CSS Anda untuk animasi dan transisi, dan periksa setiap tempat di dalam gerbang tanpa preferensi atau turunkan ke instan.
- Lakukan hal yang sama untuk JS: Lihat Transisi, pengungkapan IntersectionObserver, dan panggilan gulir halus semuanya memerlukan hal yang sama.
- Pertahankan versi !important sebagai jaring pengaman tingkat peta situs, bukan alat pertama Anda; animasi yang diarahkan adalah desain yang lebih baik daripada penggantian darurat.
Bingkai yang sangat gacor: gerakan menjadi fitur yang diminta, bukan keluaran yang dipaksakan. Hanya sedikit estetika di web yang menua lebih cepat daripada animasi demi kepentingannya sendiri, dan satu pertanyaan media membuat pilihan tersebut menghormati kedua estetika tersebut.