Opak bir kullanıcı arayüzünü tercih eden kullanıcılar için optimizasyon ve ayarlama yapın.
CSS Medya Sorguları 5'ten prefers-reduced-transparency adlı yeni medya sorgusu özelliği Chrome 118'de kullanıma sunulmuştur. Opak olmayan arayüzler baş ağrısına neden olabilir veya çeşitli görme bozukluklarında görsel zorluklara yol açabilir. Bu nedenle Windows, macOS ve iOS'in sistem tercihleri, kullanıcı arayüzündeki şeffaflığı azaltabilir veya kaldırabilir.
Tarayıcıdaki bu yeni medya sorgusu ile CSS, arayüzü daha az şeffaflık isteyen kullanıcılar için uyarlayabilir:
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
Yukarıdaki kod örneğinde, bir CSS değişkeni 50% değerinde bir opaklık değerine sahiptir ve bu değer daha sonra yarı şeffaf 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ı tercihi olup olmadığını kontrol eder. Doğru olduğunda, opaklık değişkenini neredeyse opak bir opaklık değeri olan 95% olarak ayarlar.
Bu medya sorgusu, tasarımcıların ve geliştiricilerin kullanıcılara göre ayarlamalar yaparken aynı zamanda yaratıcı olmalarına olanak tanıyan diğer tercih medya sorgularıyla da uyumludur. Bu medya sorgularını, kullanıcının konumuna otomatik olarak ayarlayan arabadaki bir sandalye gibi düşünebilirsiniz. Bir kullanıcı web sitenizi ziyaret ettiğinde, kendisine sormadan otomatik olarak kendisine göre ayarlamalar yapar. Süper.
Şeffaflığın azaltılmasına ilişkin kullanım örnekleri
Sonraki birkaç bölümde, şeffaflığı anlamlı bir şekilde azaltmaya yönelik anların ve fırsatların gösterilmesi amaçlanmaktadır.
Resimlerdeki yarı şeffaf altyazılar
Bir görüntünün veya video küçük resminin üzerine yarı şeffaf bir altyazı ya da özet eklemek oldukça yaygın bir uygulamadır. Aşağıdaki örnekte, daha az şeffaflık tercihinin ele alınması için bir yol gösterilmektedir. Yer paylaşımı tamamen kaldırılır ve resmin altında yer paylaşımlı olarak değil, aynı altyazı içeriği gösterilir.
Şeffaf kalıcı iletişim kutuları, bildirimler ve pop-over'lar
Kullanıcı arayüzü öğelerinin, içerik üzerine yerleştirmesinin bir başka yolu da opaklık öğelerinin var olduğu anlamına gelir; modlar, bildirimler ve pop-up'lar aracılığıyla da kullanılabilir. Bu gibi durumlarda, opaklığı artırmak hem kullanıcı tercihine uygun hareket edebilir hem de bindirmenin arkasından göze çarpacak belirli bir miktarda renk yapılmasına olanak tanır.
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
Uyarlanabilir buzlu cam
Bir diğer popüler resim bindirme stili ise buzlu camdır. Aşağıdaki örnekte başlığın arkasındaki resim, ürün resminin ayna görüntüsüdür. Bunun birkaç avantajı vardır: Resim kırpılmaz ve açık veya koyu tercih, nihai sonuçta biraz daha fazla görünebilir.
.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öngü şeklinde bir video veya animasyonlu resimle yer paylaşımlı kalın bir mesaj bulunur. Aşağıdaki örnekte renkli yarı şeffaf bir gradyan yer paylaşımı ve sonsuz animasyonlu bir arka plan resmi bulunmaktadır. Bu yöntem birçok gözü çekebilir ancak aynı zamanda kontrol edilemeyen hareket ve şeffaflığa sahip düşük kontrast nedeniyle birçok kişi için sorun yaratır.
Bu sorun iki CSS medya sorgusuyla düzeltilebilir: prefers-reduced-motion ve tercihler-reduced-transparency. Azaltılmış hareketli medya sorgusunda, sonsuz animasyonu yalnızca kullanıcının azaltılmış hareket için "tercih yok" seçeneği varsa uygulayabilir ve böylece koda, bu kullanıcının hareket etmesinin sorun yaratmayacağını bildirirsiniz.
Ayrıca, şeffaflığı azaltılmış medya sorgusu ile opaklığı azaltarak bindirme renginin yaklaşık %100 olmasını sağlayabilirsiniz. Artık mesaj, hareketin dikkat dağıtmaması veya sorunlu bir kontrast olmadan kolayca okunabiliyor.
Hepsini bir araya getirerek bir yandan yaratıcı bir kullanıcı arayüzü görünümü dağıtırken bir yandan da hedef kitlenin mesajı okuyabilmesini ve anlayabilmesini 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ı tercihlerinde toplama ve çıkarmayla ilgili bakış açıları
Önceki örnek, azaltılan tercihleriyle ilgili olarak bu kullanıcı tercihlerini kontrol etmez, bunun yerine tercih belirtmez.
@media (prefers-reduced-transparency: no-preference) {
…
}
Geliştiriciler ve tasarımcılar genellikle kullanıcı deneyimini bu tercihlere dayalı olarak, eksikçi bir bakış açısıyla "yedeklerler". Bu, medya sorgularında "azaltma" kontrolü olarak görünür ve bu noktada kullanıcı arayüzünden bir şey kaldırılır. Örnekte, kullanıcının onay vermesi durumunda hareket ve şeffaflığın eklendiği eklemeli bir yaklaşım gösterilmektedir.
Bu yaklaşım, kendi başına sağlam, temel bir deneyim oluşturmanıza yardımcı olur. Ardından, kullanıcı için sorun değilse deneyime ekleyin.
Geliştirici Araçları
Chrome Geliştirici Araçları, Oluşturma sekmesinde daha az şeffaflık (ve daha fazlası) için bu tercihi emüle edebilir. Aşağıdaki videoda buzlu cam kartın açık, koyu, şeffaf ve azaltılmış şeffaflık varyantlarını göstermek için tercih edilen renk şeması ve azaltılmış-şeffaflık medya sorgularının nasıl açılıp kapatılacağını öğrenebilirsiniz.