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 menjadi masalah visual untuk berbagai jenis kekurangan penglihatan. Itulah sebabnya Windows, macOS, dan iOS memiliki preferensi sistem yang dapat mengurangi atau menghapus transparansi dari UI.

Dengan kueri media baru ini di browser, 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;
  }
}

Dalam contoh kode sebelumnya, variabel CSS menyimpan nilai opasitas di 50% yang kemudian digunakan dengan HSL untuk membuat latar belakang biru semi-transparan. Kueri media bertingkat memeriksa preferensi pengguna untuk transparansi yang dikurangi, dan jika benar, menyesuaikan variabel opasitas ke 95%, nilai opasitas yang hampir buram.

Kueri media ini cocok dengan kueri media preferensi lainnya, yang memungkinkan desainer dan developer menjadi kreatif sekaligus menyesuaikan untuk pengguna. Anda dapat menganggap kueri media ini seperti kursi di mobil yang secara otomatis menyesuaikan posisinya dengan pengguna; saat pengguna mengunjungi situs Anda, situs tersebut akan otomatis menyesuaikan dengan pengguna tanpa memintanya. Keren sekali.

Kasus penggunaan untuk mengurangi transparansi

Beberapa bagian berikutnya akan dikhususkan untuk menunjukkan momen dan peluang untuk mengurangi transparansi dengan cara yang bermakna.

Teks semi-transparan pada gambar

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

Modal, notifikasi, dan popover transparan

Cara lain elemen UI menempatkan konten, yang sering kali berarti elemen opasitas ada, adalah dengan modal, notifikasi, dan popover. Dalam kasus ini, meningkatkan opasitas dapat mengikuti preferensi pengguna sekaligus tetap memungkinkan jumlah warna yang halus dari balik overlay untuk terlihat.

.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. Pada contoh berikut, gambar di belakang teks adalah refleksi cermin dari gambar produk. Hal ini memiliki beberapa keunggulan: gambar tidak dipangkas dan preferensi terang atau gelap dapat terlihat sedikit lebih jelas 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 hero

Elemen halaman beranda umum memiliki pesan tebal yang ditempatkan di atas video berulang atau gambar animasi. Contoh berikut memiliki overlay gradien semi-transparan yang berwarna-warni dan gambar latar belakang yang dianimasikan tanpa batas. Meskipun hal ini dapat menarik perhatian banyak orang, hal ini juga akan menimbulkan masalah bagi banyak orang, karena kontras yang rendah dengan transparansi dan gerakan yang tidak dapat dikontrol.

Hal ini dapat diperbaiki dengan dua kueri media CSS: prefers-reduced-motion dan prefers-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 menandakan ke kode bahwa pengguna ini boleh memiliki gerakan.

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.

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

Contoh sebelumnya tidak memeriksa preferensi pengguna ini untuk preferensi yang dikurangi, tetapi memeriksa tidak ada preferensi.

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

Developer dan desainer sering kali "membuat penggantian" pengalaman pengguna berdasarkan preferensi ini, dalam mentalitas subtraktif. Hal ini ditampilkan dalam kueri media sebagai pemeriksaan untuk "reduce", pada saat itu sesuatu dari UI akan dihapus. Contoh ini menunjukkan mentalitas tambahan, dengan gerakan dan transparansi ditambahkan jika pengguna tidak keberatan.

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

DevTools

Chrome DevTools dapat mengemulasi preferensi ini untuk mengurangi transparansi (dan lainnya) di tab Rendering. Dalam video berikut, lihat cara mengalihkan kueri media prefers-color-scheme dan prefers-reduced-transparency untuk menampilkan varian transparansi terang, gelap, transparan, dan dikurangi dari kartu kaca buram.