SQL Server Tips, Teknik, dan Artikel

Menguji CSS/Situs Web untuk Kueri dengan gerakan yang dikurangi

Reduce-motion-testing.png

[ad_1]

prefers-reduced-motion adalah kueri aksesibilitas bermanfaat yang harus digunakan setiap pengembang web. Ini memeriksa untuk melihat apakah sistem pengguna telah diinstruksikan untuk meminimalkan gerakan. Beberapa mungkin terpengaruh secara negatif oleh animasi seperti tombol bouncing, scrolling marquees, dan media putar otomatis.

Untuk menghentikan ini, preferensi “mengurangi gerakan” di seluruh sistem dapat diatur. Berikut adalah contoh cara mengaktifkan fitur ini di Mac ->

isotropik-2022-08-09-at-11-03-43

Dan inilah contoh bagaimana Anda mengimplementasikan api ini di CSS Anda (bersumber dari web.dev).

/* Jika pengguna telah menyatakan preferensi mereka untuk mengurangi gerakan, maka jangan gunakan animasi pada tombol. */ @media (lebih suka-gerakan yang dikurangi: kurangi) { tombol { animasi: tidak ada; } } /* Jika browser memahami kueri media dan pengguna secara eksplisit belum menetapkan preferensi, maka gunakan animasi pada tombol. */ @media (prefers-reduced-motion: no-preference) { tombol { /* `vibrate` keyframes didefinisikan di tempat lain */ animasi: vibrate 0.3s linear infinite both; } }

Jika pengguna telah mengaktifkan “kurangi gerakan” di sistem mereka, css dalam kueri media untuk “prefers-reduced-motion: reduce” akan digunakan.

CSS di sini hanya boleh menggunakan animasi untuk interaksi pengguna yang penting, jika sama sekali.

Jika pengurangan gerakan tidak diaktifkan, kode untuk “prefers-reduced-motion: no-preference” akan digunakan.

Juga, inilah tip kecepatan yang bermanfaat dari Web.dev:

Jika Anda memiliki banyak CSS yang berhubungan dengan animasi, Anda dapat menyelamatkan pengguna yang tidak memilih untuk mengunduhnya dengan mengalihdayakan semua CSS yang terkait dengan animasi ke dalam stylesheet terpisah yang hanya Anda muat secara kondisional melalui atribut media pada elemen tautan html link rel ="lembar gaya" href="animasi.css" media=" (lebih suka- gerakan yang dikurangi: tidak ada preferensi)">” class=”lazy lazy-hidden wp-image-16007″ srcset=”” sizes=”(max-width: 1024px) 100vw, 1024px”/><noscript><img decoding=isotropik-2022-08-09-at-11-11-38

Dan pengaturan ini akan mengaktifkan prefers-reduced-motion: reduce tanpa Anda perlu mengaturnya di seluruh sistem dan memuat ulang tab Anda.

Sama seperti itu, sekarang Anda dapat dengan mudah menguji kode Anda untuk prefers-reduce-motion: reduce!

[ad_2]

Source link

Artikel terbaru