CSS lebih memilih transparansi-transparansi

Optimalkan dan sesuaikan untuk pengguna yang lebih memilih UI buram.

Adam Argyle

Mulai Chrome 118, fitur kueri media baru prefers-reduced-transparency dari Kueri Media CSS 5 adalah yang tersedia. Antarmuka yang tidak buram dapat menyebabkan sakit kepala atau menyulitkan visual berbagai jenis kekurangan penglihatan. Inilah alasan Windows, macOS, dan iOS memiliki preferensi sistem yang dapat mengurangi atau menghapus transparansi dari UI.

Dengan kueri media baru di browser ini, CSS dapat menyesuaikan antarmuka untuk pengguna yang menentukan keinginan untuk mengurangi transparansi:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

Pada contoh kode sebelumnya, variabel CSS menyimpan nilai opasitas pada 50% yang kemudian digunakan dengan HSL untuk membuat latar belakang biru semi-transparan. Tujuan pemeriksaan kueri media bertingkat untuk preferensi pengguna mengurangi transparansi, dan jika true (benar), menyesuaikan variabel opasitas menjadi 95%, nilai opasitas yang hampir tidak tembus pandang.

Kueri media ini sangat cocok dengan kueri media preferensi lainnya, yang memungkinkan desainer dan pengembang untuk menjadi kreatif sekaligus menyesuaikan diri dengan pengguna. Anda dapat menganggap kueri media ini seperti kursi di dalam mobil yang secara otomatis menyesuaikan posisinya dengan pengguna; saat pengguna mengunjungi situs Anda, secara otomatis menyesuaikan dengan mereka tanpa diminta. Keren sekali.

Kasus penggunaan untuk mengurangi transparansi

Beberapa bagian selanjutnya akan dikhususkan untuk menunjukkan momen dan peluang bagi mengurangi transparansi dengan cara yang berarti.

Teks semitransparan pada gambar

Cukup umum untuk menempatkan gambar atau video thumbnail atau ringkasan semi-transparan. Contoh berikut menggambarkan salah satu cara untuk menangani preferensi pada transparansi yang lebih rendah. Overlay seluruhnya dihapus, dan konten teks yang sama ditampilkan di bawah gambar, sebagai overlay.

Modal, notifikasi, dan pop-up transparan

Cara lain di mana elemen UI melapisi konten, yang sering kali berarti elemen terdapat opasitas, dengan modal, notifikasi, dan popover. Dalam kasus ini, meningkatkan opasitas dapat menghormati preferensi pengguna sekaligus tetap memungkinkan warna yang halus dari belakang overlay untuk mengintip.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

Kaca buram adaptif

Gaya overlay gambar populer lainnya adalah frosted kaca. Dalam contoh berikut, gambar di belakang teks adalah cerminan cermin dari gambar produk. Ini memiliki beberapa keuntungan: gambar tidak dipangkas dan gambar terang atau gelap preferensi bisa menjadi lebih banyak pada hasil akhir.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

Header utama

Elemen halaman beranda umum memiliki pesan tebal yang menempatkan video berulang atau gambar animasi. Contoh berikut memiliki gradien semi-transparan berwarna-warni overlay, dan gambar latar belakang animasi yang tak terbatas. Meskipun hal ini dapat menarik banyak mata, namun hal itu juga akan menimbulkan masalah bagi banyak mata, karena kontrasnya yang rendah transparansi dan gerakan yang tidak dapat dikendalikan.

Hal ini dapat diperbaiki dengan dua kueri media CSS: lebih memilih-mengurangi gerakan dan lebih menyukai-transparansi-Pengurangan. Dalam kueri media dengan gerakan pengurangan, Anda dapat menerapkan animasi tanpa batas hanya jika pengguna memiliki "no-preferensi" untuk mengurangi {i>motion<i}, memberi sinyal pada kode bahwa pengguna ini dapat menggunakan {i>motion<i}.

Selain itu, dengan kueri media transparansi yang dikurangi, Anda dapat mengurangi opasitas sehingga warna overlay hampir 100%. Sekarang pesan dapat dibaca dengan mudah tanpa gangguan gerakan atau kontras yang bermasalah.

Menyatukan semuanya dan Anda dapat men-deploy tampilan UI yang kreatif sekaligus memastikan audiens target dapat membacanya dan mendapat pesan.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

Perspektif aditif versus subtraktif tentang preferensi pengguna

Contoh sebelumnya tidak memeriksa preferensi pengguna ini untuk preferensi, sebagai gantinya, sistem akan memeriksa tidak ada preferensi.

@media (prefers-reduced-transparency: no-preference) {
  …
}

Pengembang dan desainer sering kali "{i>fallback<i}" pengalaman pengguna berdasarkan preferensi Anda, dalam pola pikir subtraktif. Data ini muncul dalam kueri media sebagai centang untuk “mengurangi”, saat sesuatu dari UI akan dihapus. Tujuan contoh menunjukkan mentalitas tambahan, di mana gerakan dan transparansi ditambahkan jika pengguna tidak apa-apa.

Pendekatan ini membantu Anda memikirkan pengalaman dasar pengukuran yang sehat yang kokoh saja. Kemudian, jika pengguna tidak keberatan, tambahkan ke pengalaman.

Devtools

Chrome DevTools bisa mengemulasi preferensi ini untuk pengurangan transparansi (dan selengkapnya) di tab Rendering. Dalam video berikut lihat cara beralih ke Preferred-color-schema dan chooses-reduced-transparency kueri media untuk menampilkan transparansi yang terang, gelap, transparan, dan berkurang varian kartu frosted Glass.