prefers-reduced-motion dalam CSS dan JS
Deteksi dan hormati pengaturan gerakan pengguna.
prefers-reduced-motion dalam CSS dan JS adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Pengaturan yang Dapat Dibaca
Sistem operasi memungkinkan orang meminta lebih sedikit gerakan. Fitur media prefers-reduced-motion menyampaikan pilihan itu langsung ke situs Anda. 🎚️
Tempat Pengguna Mengaktifkannya
Orang mengaktifkan reduce motion dalam pengaturan OS di macOS, iOS, Windows, dan Android. Tugas Anda adalah mendengarkan, bukan meragukan pilihan tersebut.
Dua Nilai
Fitur ini melaporkan salah satu dari dua keadaan. Nilainya bisa reduce, yang berarti menenangkan animasi, atau no-preference untuk pengguna lainnya.
Kuerikan di CSS
Bungkus gaya yang menenangkan dalam kueri media. Saat pengguna meminta reduce motion, Anda dapat mengurangi transisi hingga hampir tidak ada.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}Kurangi, Jangan Selalu Hapus
Menenangkan gerakan bukan berarti halaman dibekukan. Gantilah geseran besar dengan fade lembut agar antarmuka tetap terasa hidup tanpa pernah menyentak.
Rancang dengan Gerakan Aktif sebagai Awal
Bangun gaya animasi normal Anda, lalu tambahkan kueri untuk menguranginya. Pendekatan progresif ini mempertahankan pengalaman bawaan yang kaya.
Baca di JavaScript
Untuk animasi berskrip, tanyakan langsung kepada peramban. matchMedia mengembalikan informasi apakah pengguna saat ini memilih gerakan yang dikurangi.
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }Tanggapi Perubahan Langsung
Orang dapat mengubah pengaturan di tengah sesi. Dengarkan perubahan agar animasi JavaScript Anda menghormati preferensi baru tanpa memuat ulang.
mq.addEventListener('change', e => updateMotion(e.matches));Cakup Perilaku Gulir
Pengguliran mulus juga termasuk gerakan. Di dalam kueri, atur scroll-behavior ke auto agar lompatan berlangsung seketika bagi mereka yang memintanya.
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}Ini Kebutuhan Nyata
Ini bukan sekadar pengaturan tambahan. Bagi sebagian pengguna, gerakan besar menyebabkan mual atau pusing yang nyata, jadi memenuhi permintaan tersebut sangat penting.
Nonaktif sebagai Bawaan adalah yang Paling Aman
Saat ragu, jadikan pilihan yang paling aman sebagai bawaan. Memilih gerakan yang tenang tidak merugikan siapa pun dan membuat halaman nyaman bagi semua orang.
Pemeriksaan Singkat
Bagaimana situs web mengetahui bahwa pengguna menginginkan lebih sedikit gerakan?
Rangkuman
Baca prefers-reduced-motion di CSS atau dengan matchMedia, lalu tenangkan animasi alih-alih mematikan halaman. Hormati juga perubahan langsung. ✅
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “prefers-reduced-motion dalam CSS dan JS” gratis?
Ya — teks lengkap “prefers-reduced-motion dalam CSS dan JS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “prefers-reduced-motion dalam CSS dan JS”?
Deteksi dan hormati pengaturan gerakan pengguna. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “prefers-reduced-motion dalam CSS dan JS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- prefers-reduced-motion dalam CSS dan JS
- Gangguan Vestibular dan Risiko Parallax
- Ambang Tiga Kilatan untuk Kejang
- Jeda, Hentikan, Sembunyikan untuk Konten yang Bergerak Otomatis