Menyesuaikan diri dengan gerakan pengguna dan pilihan tema dengan CSS dan JavaScript

Ditulis oleh Oscar Jite-Orimiono✏️

Internet penuh dengan warna, animasi dan kesan grafik yang boleh menjadikan tapak web menawan dan terlalu merangsang. Sebagai peminat dan profesional bahagian hadapan, kami perlu mengimbangi visual yang bertenaga dengan pilihan yang boleh diakses dan berpusatkan pengguna bagi mereka yang lebih suka pengalaman yang lebih tenang.

Dalam artikel ini, kami akan melakukan lebih banyak dengan lebih sedikit dengan melihat perkara di bawah:

• Belajar menggunakan pertanyaan media seperti prefers-reduced-motion dan prefers-color-scheme untuk mengurus animasi dan tema
• Ikut sintaks yang betul dalam peraturan @media untuk menggunakan pilihan pengguna
• Lihat pilihan seperti prefers-reduced-data yang akan meminimumkan penggunaan data untuk pengguna dengan sambungan terhad

Pilihan gerakan

Bagi kebanyakan pengguna, animasi boleh meningkatkan pengalaman mereka di tapak web, tetapi ia mungkin menghalang orang lain. Pergerakan yang terlalu banyak boleh menyebabkan ketidakselesaan atau menjadi gangguan, serta boleh menyebabkan masalah prestasi.

Pertanyaan media pilihan-dikurangkan-gerakan menyemak sama ada pengguna telah mendayakan tetapan pada komputer mereka untuk mengehadkan animasi tapak web. Anda boleh mengubah suai atau melumpuhkan sepenuhnya animasi untuk pengguna yang lebih suka gerakan yang dikurangkan.

Untuk bermula, mari buat halaman web dengan beberapa animasi. Bagaimana pula dengan latar belakang berjalur animasi?

Berikut ialah HTML untuk halaman:

Begini rupanya dengan jalur animasi:

Sintaks tanpa keutamaan adalah untuk pengguna tanpa tetapan keutamaan manakala pengurangan adalah untuk mereka yang melakukannya. Anda boleh melumpuhkan atau mengubah suai animasi sepenuhnya untuk pengguna yang lebih suka gerakan yang dikurangkan. Begini cara untuk melumpuhkan latar belakang bergerak menggunakan pertanyaan media pilihan-dikurangkan-gerakan:

Nota sampingan: Pada peranti yang menjalankan Windows 11, anda boleh melumpuhkan animasi dengan pergi ke Tetapan, memilih Kebolehaksesan, kemudian Kesan Visual dan matikan Kesan Animasi. Prosesnya adalah serupa untuk hampir setiap jenis peranti/sistem pengendalian.

Inilah CodePen:

Anda boleh memilih untuk menukar jenis animasi dan bukannya melumpuhkannya. Sebagai contoh, bukannya animasi transformasi slaid masuk, anda menggunakan animasi fade-in untuk pengguna yang lebih suka gerakan berkurangan.

Jika anda menggunakan animasi tatal dengan elemen meluncur masuk dari satu sisi halaman, anda boleh bertukar kepada kesan yang lebih mudah, seperti fade-in.

Ini CSS untuk animasi tatal mudah:

Dalam contoh ini, elemen kotak akan pudar masuk dari sebelah kanan halaman web dan bergerak ke arah kiri. Pergerakan ini dikawal oleh sifat transformasi, jadi anda boleh mengalih keluarnya untuk pengguna yang lebih suka gerakan yang dikurangkan:

Pengguna tanpa keutamaan akan melihat ini apabila mereka menatal:

Dan inilah perkara yang akan dilihat oleh pengguna dengan pengurangan:

Dengan pertanyaan media pilihan-dikurangkan-gerakan anda boleh memperlahankan animasi yang kompleks atau melumpuhkannya sepenuhnya berdasarkan perkara yang pengguna mahu.

Berikut ialah CodePen untuk berinteraksi dengan tempat anda boleh melumpuhkan animasi pada peranti anda untuk melihat perbezaannya:

Pengguna yang mengalami gangguan vestibular seperti mabuk perjalanan dan vertigo mungkin menjadi keliru atau pening apabila melihat animasi. Animasi juga boleh mengganggu pengguna yang lebih suka mempunyai UI yang ringkas.

Memiliki pilihan gerakan yang dikurangkan akan menjadikan tapak web lebih selesa digunakan untuk pengguna yang sensitif terhadap gerakan.

Pilihan tema

Kini menjadi amalan biasa bagi tapak web dan aplikasi mempunyai pilihan untuk bertukar daripada tema terang kepada tema yang lebih gelap. Sesetengah tapak web memberi anda pilihan tambahan berdasarkan keutamaan sistem.

Pertanyaan media skema warna pilihan mengesan jika pengguna lebih suka tema gelap atau terang. Pengguna boleh mendapatkan tema lalai berdasarkan tetapan peranti mereka.

Berikut ialah halaman web dengan warna terang:

Ini adalah perkara yang pengguna akan lihat jika tema lalai mereka adalah ringan. Anda kemudiannya boleh menggunakan pilihan-warna-skim untuk mencipta tema gelap:

Menulis peraturan CSS seperti ini untuk kedua-dua mod terang dan gelap mungkin terlalu sukar, terutamanya apabila beberapa sifat berkongsi nilai yang sama. Menggunakan pembolehubah untuk memetakan skema warna akan membantu anda mengelakkan pengulangan:

Berikut ialah tangkapan skrin halaman yang sama seperti sebelumnya tetapi dengan mod gelap diaktifkan:

Inilah CodePen yang anda boleh berinteraksi dengan:

Skim warna pilihan tidak terhad kepada warna sahaja; anda boleh menggunakannya untuk menukar imej:

Berikut ialah tangkapan skrin halaman web dalam mod cahaya:

Foto latar belakang oleh Plufow Le Studio di Unsplash.

Dan inilah halaman dalam mod gelap:

[kapsyen>
Foto latar belakang oleh Plufow Le Studio di Unsplash.

Amalan terbaik

Pastikan anda menguji kontras warna sebelum menggunakannya untuk memastikan kebolehbacaan yang lebih baik. Terdapat beberapa alatan tersedia yang boleh membantu anda memilih warna untuk digunakan.

Pertimbangkan setiap elemen yang mungkin perlu dikemas kini semasa menukar tema, bukan hanya latar belakang dan teks. Inilah sebabnya mengapa menyimpan tema menggunakan pembolehubah CSS adalah idea yang baik, anda mungkin perlu menyediakan alternatif untuk butang, bayang-bayang, sempadan, pautan dan banyak lagi.

Perlaksanaan

Cara paling mudah untuk melaksanakan pilihan pengguna ialah menggunakan peraturan @media. Anda mesti menentukan keutamaan untuk gerakan atau tema, jika tidak, peraturan CSS dalam pertanyaan media akan mengatasi sebarang peraturan atau tetapan peranti lain.

Ini bermakna bahawa untuk pilihan gerakan, anda mesti menentukan sama ada pilihan itu kurangkan atau tiada pilihan, dan untuk tema, ia terang atau gelap:

Ini boleh berguna semasa menguji kod anda, tetapi pastikan anda menyatakan keutamaan yang tepat sebelum pelaksanaan.

Melaksanakan pilihan pengguna dengan JavaScript

Keutamaan pengguna juga boleh dilaksanakan dengan JavaScript. Anda boleh menambah kelas baharu pada elemen tertentu berdasarkan keutamaan pengguna.

Menggunakan contoh pertama kami dengan jalur animasi, berikut ialah cara untuk menyemak pilihan pengguna dengan JavaScript:

Ini CSS:

Perhatikan bahawa elemen pseudo bukan sebahagian daripada DOM dan tidak boleh dipilih secara langsung dalam JavaScript, oleh itu pendekatan ini.

Melaksanakan keutamaan pengguna dengan atribut data

Atribut data HTML tersuai dan JavaScript membolehkan anda melaksanakan pilihan pengguna. Atribut data membolehkan anda menyimpan maklumat pada elemen HTML tanpa menjejaskan struktur dokumen. Mereka menggunakan awalan data dan boleh dimanipulasi dengan mudah menggunakan JavaScript:

Ini CSS:

Mengurangkan penggunaan data

Walaupun masih dalam percubaan, prefers-reduced-data ialah pertanyaan media yang dicadangkan yang membolehkan tapak web mengesan jika pengguna memilih untuk menyimpan data.

Ia menggunakan sintaks yang sama seperti pertanyaan media gerakan yang lebih disukai, yang dikurangkan untuk pengguna yang lebih suka kandungan ringan dan tiada keutamaan untuk pengguna tanpa keutamaan data.

Sesetengah aplikasinya yang berpotensi termasuk mengurangkan imej resolusi tinggi, memuatkan fon ganti, melumpuhkan video automain dan malas memuatkan kandungan tidak kritikal. Pertanyaan media ini boleh membantu meningkatkan masa muat untuk pengguna pada pelan data terhad atau mahal, atau dengan sambungan internet yang tidak boleh dipercayai.

Kata-kata akhir

Menghormati pilihan pengguna adalah penting untuk meningkatkan pengalaman setiap pengguna. Dalam tutorial ini, anda mempelajari cara menggunakan pertanyaan media pilihan-dikurangkan-gerakan dan pilihan-warna-skim untuk mengesan gerakan dan tetapan tema pengguna. Terdapat juga peraturan @media untuk pilihan kontras dan ketelusan.

Sebagai pembangun web, anda adalah arkitek yang mempunyai kuasa untuk menjadikan setiap tapak web selesa, boleh diakses dan cekap untuk setiap jenis pengguna.

---

Adakah bahagian hadapan anda memonopoli CPU pengguna anda?

Memandangkan bahagian hadapan web semakin kompleks, ciri rakus sumber menuntut lebih banyak lagi daripada penyemak imbas. Jika anda berminat untuk memantau dan menjejaki penggunaan CPU pihak pelanggan, penggunaan memori dan banyak lagi untuk semua pengguna anda dalam pengeluaran, cuba LogRocket.

LogRocket adalah seperti DVR untuk apl web dan mudah alih, merakam semua yang berlaku dalam apl web, apl mudah alih atau tapak web anda. Daripada meneka sebab masalah berlaku, anda boleh mengagregat dan melaporkan metrik prestasi bahagian hadapan utama, memainkan semula sesi pengguna bersama-sama dengan keadaan aplikasi, log permintaan rangkaian dan secara automatik memaparkan semua ralat.

Modenkan cara anda menyahpepijat web dan apl mudah alih — mula memantau secara percuma.

Atas ialah kandungan terperinci Menyesuaikan diri dengan gerakan pengguna dan pilihan tema dengan CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!