Halaman ini diterjemahkan oleh Cloud Translation API.

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. Inilah alasan Windows, macOS, dan iOS memiliki preferensi sistem yang dapat mengurangi atau menghapus transparansi dari UI.

Dukungan Browser

Sumber

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 terhadap transparansi yang lebih rendah, dan jika true (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 semitransparan 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 dihapus sepenuhnya, dan konten teks yang sama ditampilkan di bawah gambar, bukan overlay.

Modal, notifikasi, dan pop-up transparan

Cara lain di mana elemen UI menempatkan konten, yang sering kali berarti adanya elemen opasitas, adalah dengan modal, notifikasi, dan popover. Dalam hal 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 cerminan cermin dari gambar produk. Hal ini memiliki beberapa keuntungan: gambar tidak dipangkas dan preferensi terang atau gelap dapat muncul sedikit 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 hero

Elemen halaman beranda umum memiliki pesan tebal yang ditempatkan di atas video berulang atau gambar animasi. Contoh berikut memiliki overlay gradien semi-transparan warna-warni dan gambar latar belakang animasi 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 dengan 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 dengan sendirinya. 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 suka-warna-skema dan lebih diutamakan-reduced-transparency untuk menampilkan varian terang, gelap, transparan, dan yang lebih rendah transparansi dari kartu frosted kaca.

https://codepen.io/web-dot-dev/pen/dyaojxr