CSS tercihler-azaltılmış-şeffaflık

Opak kullanıcı arayüzünü tercih eden kullanıcılar için optimizasyon ve ayarlama yapın.

Adam Argyle

Chrome 118'den yeni medya sorgusu özelliği prefers-reduced-transparency CSS Medya Sorguları 5'ten kullanılabilir. Opak olmayan arayüzler baş ağrısına neden olabilir veya çeşitli görme bozukluklarıdır. Bu nedenle Windows, macOS ve iOS'in sistem tercihleri vardır saydamlığı azaltabilecek veya kaldırabilecek niteliktedir.

Tarayıcıdaki bu yeni medya sorgusuyla CSS, arayüzü kullanıcılar için daha az şeffaflık istediğini açıkça belirtmelidir:

.example {
  --opacity: .5;

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

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

Önceki kod örneğinde, bir CSS değişkeni 50% konumunda bir opaklık değerine sahip Bu daha sonra yarı şeffaf mavi bir arka plan oluşturmak için HSL ile kullanılır. İlgili içeriği oluşturmak için kullanılan iç içe yerleştirilmiş medya sorgusu, daha az şeffaflık sağlar ve doğru olduğunda, opaklık değişkenini 95% olarak ayarlar. neredeyse opak bir opaklık değerine sahip.

Bu medya sorgusu, diğer tercihli medya sorgularına uygundur. tasarımcılar ve geliştiricilerin kullanıcılara yönelik ayarlamalar yaparken yaratıcı olmalarını sağlar. Bu medya sorgularını otomatik olarak arabadaki bir sandalye gibi düşünebilirsiniz. konumu kullanıcıya göre ayarlar; bir kullanıcı web sitenizi ziyaret ettiğinde onlara sormadan onlara otomatik olarak uyum sağlar. Çok güzel.

Şeffaflığı azaltmak için kullanım alanları

Sonraki birkaç bölümde, başarılı projeleriniz için önemli anları ve fırsatları şeffaflığı önemli ölçüde azaltabilir.

Resimlerde yarı şeffaf altyazılar

Bir resmin veya video küçük resminin, resmin üzerine yarı şeffaf altyazı veya özet. Aşağıdaki örnekte, bir kampanyaya tercih edebilirsiniz. Yer paylaşımı tamamen ve aynı altyazı içerikleri otomatik olarak kaldırılır ve yerleştirilmelidir.

Şeffaf kalıcı öğeler, bildirimler ve pop-up'lar

Kullanıcı arayüzü öğelerinin, içerikle yer paylaşımlı olarak yer paylaşımlı olarak kullandığı bir başka yöntem de opaklık mevcuttur. Böyle durumlarda opaklığı artırmak kullanıcının tercihine saygı gösterirken bir yandan da göze çarpacak kadar güzel bir renk koyucu.

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

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

Uyarlanabilir buzlu cam

Diğer bir popüler görüntü yer paylaşımı stili de buzlu camdır. Aşağıdaki örnekte, Reklam başlığı altındaki resim, ürün resminin ayna yansımasıdır. Bu Bunun birkaç avantajı vardır: resim kırpılmamış ve açık veya koyu tercih, sonuçta biraz daha fazla katkı sağlayabilir.

.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%;
  }
}

Hero başlığı

Ortak bir ana sayfa öğesinde, üzerinde döngüsel bir video veya animasyonlu resim. Aşağıdaki örnekte renkli bir yarı şeffaf gradyan vardır yer paylaşımı ve sonsuz animasyon içeren arka plan resmi. Bu, örneğin aynı zamanda, ekranın pek çok gözünde düşük kontrastlı kontrol edilemeyen şeffaflık ve harekettir.

Bu sorun, iki CSS medya sorgusu ile düzeltilebilir: azaltılmış-hareketi tercih eder ve daha az şeffaflık Azaltılmış hareketli medya sorgusunda Sonsuz animasyonu, yalnızca kullanıcı "tercih yok" değerine sahipse uygular indirim için kullanabilir, koda bu kullanıcının hareket etmesinin uygun olduğunu belirten bir sinyal gönderir.

Ayrıca, şeffaflığın azaltılmasıyla medya sorgusunun opaklık sağlayarak yer paylaşımlı renk neredeyse %100 olur. Mesaj artık kolayca okunabiliyor dikkati dağılmadan veya sorunlu bir kontrastla başa çıkmanıza yardımcı olur.

Her şeyi bir araya getirdiğinizde, yaratıcı kullanıcı arayüzü görünümü dağıtırken aynı zamanda mesajı okuyabildiği ve anladığı anlamına gelir.

.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%)
    );
  }
}

Kullanıcı tercihleriyle ilgili eklemeli veya çıkarmalı bakış açıları

Önceki örnekte, bu kullanıcı tercihleri, indirimlerin azaltılması bunun yerine tercih olup olmadığını kontrol eder.

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

Geliştiriciler ve tasarımcılar genellikle "yedek" bu bilgiler ışığında kullanıcı deneyimini düşünmeye başlıyorlar. Bu, medya sorgularında "azaltma", Bu noktada kullanıcı arayüzünden bir şey kaldırılır. İlgili içeriği oluşturmak için kullanılan örnekte, ekleme gerektiren bir zihniyet gösteriliyorsa bunda bir sakınca yoktur.

Bu yaklaşım, size uygun olan sağlıklı bir temel deneyim sağlam bir şekilde devam ettirebilir. Ardından, kullanıcı için sorun yoksa deneyime de ekleme yapın.

Geliştirici Araçları

Chrome Geliştirici Araçları, şeffaflığın azaltılması (ve daha fazla) Oluşturma sekmesinde gösterilir. Aşağıdaki videoda tercih edilen-renk-şeması ve azaltılmış-şeffaflık-seçeneğine nasıl geçiş yapacağınızı görün açık, koyu, şeffaf ve düşük şeffaflığı gösteren medya sorguları buzlu cam kartın çeşitleri.