Di luar titik putus: Memanfaatkan pertanyaan media keutamaan pengguna dalam CSS

Jika anda membina tapak web atau apl, kemungkinan besar anda bekerja dengan pertanyaan media. Alat CSS berguna ini membolehkan anda melaraskan reka letak anda bergantung pada saiz peranti. Ia adalah bahagian penting dalam reka bentuk responsif.

Anda boleh membuat pertanyaan berdasarkan lebar peranti, nisbah bidang, orientasi dan banyak lagi. Ini semua membolehkan anda memperhalusi reka letak anda untuk peranti yang digunakan.

Anda mungkin tidak tahu bahawa terdapat pertanyaan media lain yang tersedia yang membolehkan anda menyesuaikan tapak atau apl anda berdasarkan pilihan pengguna dan bukannya saiz dan orientasi peranti mereka.

Pertanyaan media keutamaan pengguna

Terdapat beberapa pertanyaan media yang berkaitan dengan pilihan pengguna. Anda boleh menggunakan ini untuk memperhalusi pengalaman apl anda untuk pengguna.

Mod gelap automatik dengan skema warna pilihan

Mod gelap ada di mana-mana hari ini. Nampaknya setiap tapak kini mempunyai butang togol matahari/bulan untuk bertukar antara mod terang dan mod gelap. Anda boleh mengambil langkah ini lebih jauh dan menggunakan pertanyaan media skema warna pilihan untuk menentukan secara automatik sama ada peranti pengguna menggunakan mod warna terang atau gelap.

Begini cara ia berfungsi: Tentukan gaya CSS anda untuk mod cahaya seperti biasa. Kemudian tambahkan pertanyaan media prefers-color-scheme: dark. Di sana, tambahkan peraturan CSS mengatasi warna mod cahaya anda:

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Petua: Buat tema dengan pembolehubah CSS

Untuk menjadikan hidup lebih mudah, anda boleh menentukan semua warna anda dalam satu tema, satu set pembolehubah CSS. Kemudian di dalam skema warna-pilihan anda: blok gelap, anda hanya perlu mentakrifkan semula pembolehubah dan bukannya menambah semula pemilih dan peraturan CSS anda:

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Tone down animasi dengan prefers-reduced-motion

Animasi boleh meningkatkan pengalaman apl anda, tetapi animasi mungkin sukar untuk pengguna yang mengalami masalah penglihatan atau vestibular. Untuk membantu pengguna ini, sesetengah peranti dan sistem pengendalian mempunyai pilihan dalam pilihan pengguna untuk mengurangkan gerakan.

Anda boleh menggunakan pertanyaan media pilihan-dikurangkan-gerakan untuk mengesan apabila pilihan sedemikian didayakan untuk peranti pengguna. Anda kemudian boleh menggunakan animasi alternatif yang kurang sengit (atau matikan sama sekali).

Berikut ialah contoh menggunakan gerakan prefers-reduced-untuk mematikan animasi.

.content {
  animation: my-awesome-animation 250ms ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

Satu perkara yang perlu diambil perhatian: Jika anda mematikan animasi seperti ini, pastikan anda tidak mempunyai sebarang kod yang bergantung pada acara akhir animasi. Apabila anda menetapkan animasi kepada tiada, seperti yang ditunjukkan di atas, acara ini tidak akan dicetuskan.

Perlu diingat bahawa anda tidak perlu mematikan animasi apabila gerakan lebih disukai-dikurangkan: kurangkan padanan! Katakan anda mempunyai animasi dedah yang mewah di mana elemen melantun ke paparan. Apabila pengguna mahukan gerakan yang dikurangkan, anda boleh menukar ini supaya ia menjadi animasi pudar masuk yang mudah.

Kontras penyesuaian dengan kontras keutamaan

Sesetengah pengguna yang mengalami masalah penglihatan mungkin telah meningkatkan kontras didayakan pada peranti mereka. Anda boleh mengendalikan situasi sedemikian dengan pertanyaan media kontras pilihan.

Jika pertanyaan media ini sepadan, anda boleh melaraskan kontras anda untuk menjadikan perkara lebih mudah dilihat oleh pengguna ini.

.content {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .content {
    background-color: black;
    color: white;
  }
}

Menyemak pertanyaan media dengan JavaScript

Andaikan anda menganimasikan dengan JavaScript - contohnya, mungkin anda menggunakan API Animasi Web. Memandangkan animasi ini tidak ditakrifkan dalam CSS, anda tidak boleh mematikannya dengan pertanyaan media pilihan-dikurangkan-gerakan.

Atau boleh?

Ya! Anda boleh menggunakan kaedah window.matchMedia untuk menilai pertanyaan media daripada JavaScript. Pertanyaan media diluluskan sebagai hujah dan kaedah mengembalikan sesuatu yang dipanggil MediaQueryList.

Objek ini mempunyai sifat padanan, iaitu boolean yang menunjukkan sama ada pertanyaan media ini sepadan atau tidak. Berdasarkan nilai, anda boleh memutuskan sama ada untuk menganimasikan atau tidak.

Berikut ialah contoh mudah yang menunjukkan cara window.matchMedia boleh digunakan untuk memanggil animasi secara bersyarat pada elemen DOM:

--main-background: white;
--text-color: black;

.content {
  background-color: var(--main-background);
  color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  --main-background: black;
  --text-color: white;
}

Bertindak balas terhadap perubahan

Senarai MediaQuery malah mempunyai peristiwa perubahan yang berlaku jika keadaan berubah dan pertanyaan media tidak lagi digunakan.

Andaikan anda mempunyai beberapa kod JavaScript yang anda hanya mahu jalankan untuk paparan besar. Jika saiz skrin pengguna kecil, anda mahu melangkau kod ini. Anda boleh melakukan ini dengan memanggil window.matchMedia menggunakan pertanyaan lebar maksimum atau sesuatu yang serupa.

Andaikan kemudian, pengguna mengubah saiz tetingkap, dan kini anda mahu menjalankan kod JavaScript khusus skrin besar. Hanya dengar acara perubahan MediaQueryList dan anda boleh menyemak sifat padanan acara untuk melihat nilai baharu itu.

Ringkasan

Pertanyaan media ini boleh membantu anda memperibadikan pengalaman pengguna anda dengan lebih baik dalam tapak web atau apl anda. Anda boleh menggunakan skema warna gelap secara automatik, dan juga memperhalusi animasi dan kontras anda bergantung pada pilihan pengguna. Mereka juga membantu dengan kebolehaksesan, yang sentiasa menang.

Ia masih dalam peringkat percubaan, tetapi anda juga boleh memerhatikan pertanyaan prefers-reduced-data yang akan menunjukkan sama ada peranti pengguna mempunyai keperluan yang menggunakan kurang data. Ini boleh digunakan untuk menyediakan kandungan alternatif yang menggunakan kurang data. Contohnya, anda boleh melangkau imej yang tidak penting (atau menggunakan versi peleraian rendah).

Atas ialah kandungan terperinci Di luar titik putus: Memanfaatkan pertanyaan media keutamaan pengguna dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!