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

Saydam olmayan bir kullanıcı arayüzünü tercih eden kullanıcılar için optimize edin ve ayarlayın.

Adam Argyle

Chrome 118'den itibaren CSS Media Queries 5'teki yeni medya sorgusu özelliği prefers-reduced-transparency kullanılabilir. Saydam olmayan arayüzler baş ağrısına neden olabilir veya çeşitli görme bozukluğu türleri için görsel bir mücadele olabilir. Bu nedenle, Windows, macOS ve iOS'te kullanıcı arayüzündeki şeffaflığı azaltabilecek veya kaldırabilecek sistem tercihleri vardır.

Tarayıcıdaki bu yeni medya sorgusu sayesinde CSS, arayüzü şeffaflığın azaltılmasını isteyen kullanıcılara göre uyarlayabilir:

.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% bölümünde bir opaklık değeri tutar. Bu değer daha sonra yarı saydam mavi bir arka plan oluşturmak için HSL ile kullanılır. İç içe yerleştirilmiş medya sorgusu, azaltılmış şeffaflık için kullanıcı tercihini kontrol eder ve doğru olduğunda opaklık değişkenini neredeyse opak bir opaklık değeri olan 95% değerine ayarlar.

Bu medya sorgusu, tasarımcıların ve geliştiricilerin kullanıcılara göre ayarlamalar yaparken yaratıcı olmalarını sağlayan diğer tercih edilen medya sorgularıyla iyi uyum sağlar. Bu medya sorgularını, bir arabadaki koltuğun kullanıcıya göre otomatik olarak ayarlandığı gibi düşünebilirsiniz. Bir kullanıcı web sitenizi ziyaret ettiğinde, kullanıcıdan istek almadan otomatik olarak ayarlanır. Çok güzel.

Şeffaflığı azaltmaya yönelik kullanım alanları

Sonraki birkaç bölümde, şeffaflığı anlamlı şekillerde azaltmaya yönelik anlar ve fırsatlar gösterilecektir.

Resimlerdeki yarı şeffaf altyazılar

Bir resim veya video küçük resminin üzerine yarı saydam bir başlık ya da özet yerleştirmek oldukça yaygındır. Aşağıdaki örnekte, azaltılmış şeffaflık tercihini işleme yöntemlerinden biri gösterilmektedir. Yer paylaşımı tamamen kaldırılır ve aynı altyazı içeriği, yer paylaşımı yerine resmin altında gösterilir.

Şeffaf modallar, bildirimler ve pop-up'lar

Kullanıcı arayüzü öğelerinin içeriğin üzerine gelmesinin bir başka yolu da modallar, bildirimler ve pop-up'lardır. Bu öğeler genellikle opaklık öğelerinin bulunduğu anlamına gelir. Bu gibi durumlarda, opaklığı artırmak hem kullanıcı tercihine saygı duyabilir hem de yer paylaşımının arkasından belli belirsiz bir miktarda rengin görünmesine izin verebilir.

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

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

Uyarlanabilir buzlu cam

Buzlu cam da popüler bir resim yer paylaşımı stilidir. Aşağıdaki örnekte, başlığın arkasındaki resim, ürün resminin ayna yansımasıdır. Bunun birkaç avantajı vardır: Görüntü kırpılmaz ve açık veya koyu tercihi nihai sonuçta biraz daha belirgin olabilir.

.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ığı

Yaygın bir ana sayfa öğesinde, dönen bir videonun veya animasyonlu resmin üzerine kalın bir mesaj yerleştirilir. Aşağıdaki örnekte renkli, yarı şeffaf bir gradyan yer paylaşımı ve sonsuz şekilde animasyonlu bir arka plan resmi bulunmaktadır. Bu, birçok kişinin ilgisini çekebilir ancak şeffaflık ve kontrol edilemeyen hareket nedeniyle düşük kontrast nedeniyle de birçok kişi için sorun oluşturabilir.

Bu sorun, iki CSS medya sorgusuyla düzeltilebilir: prefers-reduced-motion ve prefers-reduced-transparency. Hareket azaltılmış medya sorgusunda, sonsuz animasyonu yalnızca kullanıcının hareket azaltma için "tercih yok" seçeneğini belirlemesi durumunda uygulayabilirsiniz. Bu durumda kod, bu kullanıcının hareketi kullanmasının uygun olduğunu anlar.

Ayrıca, azaltılmış şeffaflık medya sorgusuyla opaklığı azaltarak yer paylaşımı renginin neredeyse %100 olmasını sağlayabilirsiniz. Artık mesaj, hareketten rahatsızlık vermeyecek veya kontrast sorunu olmayacak şekilde kolayca okunabilir.

Tüm bunları bir araya getirerek hem yaratıcı bir kullanıcı arayüzü görünümü dağıtabilir hem de hedef kitlenin bunu okuyup mesajı almasını sağlayabilirsiniz.

.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 ve çıkarımlı bakış açıları

Önceki örnekte, bu kullanıcı tercihleri azaltılmış tercih açısından kontrol edilmez. Bunun yerine, tercih olup olmadığını kontrol eder.

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

Geliştiriciler ve tasarımcılar, genellikle bu tercihlere dayalı olarak kullanıcı deneyimini "geri planda bırakır". Bu durum, medya sorgularında "azalt" kontrolü olarak görünür. Bu noktada kullanıcı arayüzünden bir öğe kaldırılır. Örnekte, kullanıcının kabul etmesi durumunda hareket ve şeffaflığın eklendiği bir eklemeli yaklaşım gösterilmektedir.

Bu yaklaşım, kendi başına sağlam olan sağlıklı bir temel deneyim hakkında düşünmenize yardımcı olur. Ardından, kullanıcının uygun gördüğü durumlarda deneyime ekleyin.

Geliştirici Araçları

Chrome Geliştirici Araçları, Oluşturma sekmesinde azaltılmış şeffaflık (ve daha fazlası) için bu tercihi taklit edebilir. Aşağıdaki videoda, buzlu cam kartın açık, koyu, şeffaf ve azaltılmış şeffaflık varyantlarını göstermek için prefers-color-scheme ve prefers-reduced-transparency medya sorgularının nasıl değiştirileceğini görebilirsiniz.