Peribadikannya!

Meningkatkan pengalaman pengguna laman web, bermula dengan aksesibiliti yang dipertingkatkan dan penyesuaian yang diperibadikan. Penambahbaikan kebolehcapaian bukan sahaja mengembangkan penonton dan meningkatkan pengalaman semua pengguna (bukan hanya untuk orang kurang upaya), tetapi juga membawa kelebihan SEO.

Begitu juga, penyesuaian pertanyaan keutamaan juga merupakan cara terbaik untuk memberikan pengalaman yang diperibadikan, menjadikan pengguna merasa lebih selesa dan lebih mudah.

prefers-reduced-motion adalah contoh yang baik. Keutamaan ini bermakna pengguna lebih suka pengalaman web tanpa animasi mewah dan pantas. Anda boleh menulis gaya yang menyokong keutamaan ini dan menulis pertanyaan media untuk pengguna yang tidak menetapkan keutamaan ini untuk memberikan pengalaman interaktif yang lebih "bersemangat".

Satu lagi keutamaan yang perlu dipertimbangkan ialah keutamaan skema warna pengguna. Walaupun kebanyakan laman web kini menggunakan tema berwarna terang secara lalai, dalam beberapa tahun kebelakangan ini, terutamanya apabila melayari laman web pada waktu malam, permintaan untuk tema gelap telah tinggi. Menyediakan tema tersuai yang sejajar dengan keutamaan pengguna adalah cara lain untuk meningkatkan pengalaman pengguna.

Anda boleh melakukan ini dengan cekap dengan menggunakan CSS untuk sifat tersuai dan menyesuaikan nilai sifat tersuai ini menggunakan fungsi media prefers-color-scheme . Jika anda menggunakan nilai biasa seperti latar belakang, teks, dan penonjolan, anda boleh mengemas kini semua nilai di satu tempat.

Jangan lupa juga menggunakan atribut color-scheme untuk mendapatkan beberapa penukaran tema penyemak imbas secara automatik. Menetapkan harta ini akan memberitahu penyemak imbas yang tema warna (cahaya, gelap, atau kedua -duanya) disokong pada halaman. Sebaliknya, penyemak imbas secara automatik akan menukar kawalan borang dan UI penyemak imbas (seperti bar tatal) ke tema yang betul:

Dalam demo ini, walaupun saya tidak menetapkan warna teks untuk tema warna saya, kerana saya menggunakan color-scheme: light dark dalam :root memberitahu penyemak imbas bahawa laman web ini menyokong tema cahaya dan gelap, ia secara automatik menukar warna fon dari hitam ke putih.

Anda boleh menguji tema gelap anda dalam panel rendering Chrome Devtools tanpa mengubah tetapan sistem. Imej ini menunjukkan mod gelap laman web Houdini.How:

Manfaat lain untuk mewujudkan tema gelap ialah menjimatkan kuasa bateri pengguna. Kajian makmal Pixel 6 mendapati bahawa tema gelap menjimatkan 11% penggunaan kuasa untuk skrin OLED.

Oleh itu, anda kini menghormati keperluan akses pengguna, keutamaan, dan hayat bateri anda, yang merupakan cara terbaik untuk menjadikan laman web anda lebih mesra pengguna.

Atas ialah kandungan terperinci Peribadikannya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!