CSS lebih memilih transparansi-transparansi

Optimalkan dan sesuaikan untuk pengguna yang lebih menyukai UI buram.

Adam Argyle

Mulai Chrome 118, fitur kueri media baru prefers-reduced-transparency dari Kueri Media CSS 5 tersedia. Antarmuka yang tidak buram dapat menyebabkan sakit kepala atau kesulitan visual untuk 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 memiliki nilai opasitas di 50% yang kemudian digunakan dengan HSL untuk membuat latar belakang biru semi-transparan. Kueri media bertingkat akan memeriksa preferensi pengguna untuk pengurangan transparansi, dan jika benar, akan menyesuaikan variabel opasitas menjadi 95%, nilai opasitas yang hampir buram.

Kueri media ini sangat cocok dengan kueri media preferensi lainnya, yang memungkinkan desainer dan developer menjadi kreatif sekaligus melakukan penyesuaian untuk pengguna. Anggap saja kueri media ini seperti kursi di mobil yang secara otomatis menyesuaikan posisi dengan pengguna; saat pengguna mengunjungi situs Anda, situs akan otomatis disesuaikan dengan kueri tersebut tanpa diminta. Keren sekali.

Kasus penggunaan untuk mengurangi transparansi

Beberapa bagian berikutnya akan dikhususkan untuk menampilkan momen dan peluang untuk mengurangi transparansi dengan cara yang berarti.

Teks semitransparan pada gambar

Sangat umum untuk menempatkan gambar atau thumbnail video dengan teks atau ringkasan semi-transparan. Contoh berikut mengilustrasikan salah satu cara untuk menangani preferensi untuk mengurangi transparansi. Overlay sepenuhnya dihapus, dan konten teks yang sama ditampilkan di bawah gambar, bukan ditumpangkan.

Modal, notifikasi, dan pop-up transparan

Cara lain yang digunakan elemen UI untuk menempatkan konten, yang sering kali berarti ada elemen opasitas, adalah dengan modal, notifikasi, dan pop-up. Dalam hal ini, meningkatkan opasitas dapat menerapkan preferensi pengguna sekaligus tetap mengizinkan beberapa warna dari belakang overlay agar dapat 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 kaca buram. Dalam contoh berikut, gambar di belakang teks adalah refleksi cermin dari gambar produk. Hal ini memiliki beberapa keuntungan: gambar tidak dipangkas dan preferensi terang atau gelap dapat muncul 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 overlay gradien semi-transparan berwarna-warni dan gambar latar animasi yang tak terbatas. Meskipun dapat menarik banyak perhatian, hal ini juga akan menimbulkan masalah bagi banyak orang, karena kontras yang rendah dengan transparansi dan gerakan yang tidak dapat dikontrol.

Masalah ini dapat diperbaiki dengan dua kueri media CSS: prefers-reduced-motion danPrefers-reduced-transparency. Dalam kueri media gerakan yang dikurangi, Anda dapat menerapkan animasi tanpa batas hanya jika pengguna memiliki "tidak ada preferensi" untuk gerakan yang dikurangi, yang memberi tahu kode bahwa pengguna ini boleh melakukan gerakan.

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

Gabungkan semuanya dan Anda dapat men-deploy tampilan UI materi iklan sekaligus memastikan target audiens dapat membacanya dan menerima 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 pada preferensi pengguna

Contoh sebelumnya tidak memeriksa preferensi pengguna ini untuk mengurangi preferensi mereka, melainkan memeriksa tidak ada preferensi.

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

Developer dan desainer sering "mengganti" pengalaman pengguna berdasarkan preferensi ini, dengan mentalitas pengurangan. Hal ini termanifestasi dalam kueri media sebagai pemeriksaan untuk "mengurangi", pada titik ketika sesuatu dari UI dihapus. Contoh ini menunjukkan mentalitas tambahan, dengan tambahan gerakan dan transparansi jika pengguna menyetujuinya.

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

Devtools

Chrome DevTools dapat mengemulasikan preferensi ini untuk mengurangi transparansi (dan lainnya) di tab Rendering. Dalam video berikut, lihat cara mengalihkan kueri media Preferreds-color-skema dan panel pilihan media yang lebih diutamakan untuk menampilkan varian terang, gelap, transparan, dan transparansi yang lebih rendah dari kartu kaca buram.