Zorunlu renkler için yeni standartlarla Windows için yüksek kontrastlı stil

Microsoft Edge, Chromium açık kaynağı üzerinde yeniden platform oluşturmaya hazırlanırken, web içeriği için Windows yüksek karşıtlığına bağımlı olanları desteklemeye devam etme sorumluluğumuzun bilincindeydik Ayrıca harika bir fırsatı da değerlendirdik; nihayet yüksek kontrastlı stil özelliklerini standartlaştırmanın zamanı gelmişti.
Windows yüksek karşıtlığı için CSS özellikleri, Microsoft tarayıcılarında oldukça uzun bir süredir mevcuttu, ancak -ms-önekliydi ve diğer tarayıcılarda desteklenmiyordu. CSS Çalışma Grubu ve Chromium projesindeki ortaklarımızla işbirliği sayesinde, web geliştiricileri artık içeriklerini Windows yüksek kontrast gibi zorunlu renk modları için biçimlendirmek üzere yeni web standartlarını kullanabilir.
Microsoft Edge, bu standartları sürüm 79'daki ilk Kararlı sürümümüzden göndermiştir. CSS Çalışma Grubundaki birkaç son tartışmanın çözüme ulaştığına ve diğer tarayıcıların destek göndermeye hazırlandığına göre, yeni sürümü nasıl kullanabileceğinizi paylaşmak istiyoruz. standartlar—ve eski uygulamalardan ne gibi farklılıklar bekleyebileceğiniz.
Ama önce, yüksek kontrast nedir?

Windows Yüksek Karşıtlık

Windows yüksek karşıtlık özelliğini etkinleştirirken, işletim sistemi ve web içeriği, yazar tarafından belirlenen renklerden kullanıcı tarafından belirlenen sınırlı bir renk paletine dönüştürülür.  Bu durumda, ekrandaki her şey, bağlantılar ve düğmeler için ek renklerle birlikte siyah bir arka plan üzerinde beyaz metne dönüştürülür.
Sol: Açık renk düzeninde Windows. Sağda: Windows yüksek kontrastta.
Windows'ta yüksek karşıtlık, metnin okunabilirliğini artırmak ve okunabilirliği geliştirmek için tasarlanmış bir erişilebilirlik özelliğidir. Bu özellik, kullanıcının kapsamlı bir dizi semantik öğe için tema renkleri seçmesini sağlayarak çalışır. Bu şema daha sonra kullanıcı arayüzlerine ve uygulama içeriğine uygulanabilir, bu da kullanıcının tercih ettiği kontrast seviyesini garanti ederken görsel karmaşıklığı azaltır. "Yüksek karşıtlık" adı aslında yanlış bir adlandırmadır; kullanıcılar, genel kontrast düzeylerinden daha düşük olan temalar da dahil olmak üzere tema renklerini tercih ettikleri şekilde ayarlayabilirler .
Belirli bir kişinin Windows'ta yüksek karşıtlığı etkinleştirmesinin birçok nedeni vardır: ekrandaki öğeleri daha iyi görmek için; daha iyi odaklanabilmeleri için görsel gürültüyü azaltmak; göz yorgunluğunu, migreni veya ışık hassasiyetini hafifletmek için; ya da sadece çok özel bir renk şemasını tercih ettikleri için.
Sebep ne olursa olsun, uygulamalar kullanıcının sistem renkleriyle bütünleşebilir ve kullanıcı temasını UI'lerine uygulayabilir. Örneğin, tarayıcılar HTML öğelerine anlamsal olarak yüksek kontrastlı tema renkleri uygulayabilir ve görsel paraziti azaltmak için belirli CSS özelliklerini ayarlayabilir. Web geliştiricileri daha sonra, zorunlu renkler için yeni standartları kullanarak bu varsayılanların üzerine stil uygulayabilir.

Zorunlu renkler için yeni standartlar

Yazarların zorunlu renkler için yeni standartlardan yararlanmak için kullanabileceği üç temel özellik vardır:
  • forced-colorsOrtam sorgu aktif zorunlu renk modu tespiti için. Yazma sırasında, bu esasen Windows'taki yüksek karşıtlık özelliği için bir eşleşmedir, ancak gelecekte diğer işletim sistemlerinde potansiyel olarak başka benzer zorunlu renk modları olabilir.
  • forced-color-adjustMülkiyet kullanıcı aracı sistemi tema renkleri geçersiz kılar Bir elemanın ve onun soyundan uygulanmasının gerekip gerekmediğini kontrol üniteleri.
  • Kullanıcının renk şemasında renkleri uygulamak için sistem rengi anahtar sözcükleri .
Modern uygulamalar ayrıca, kullanıcının zorunlu renk şemasının arka plan rengine (açık veya koyu) ve kontrast düzeyine dayalı olarak tercih edilen renk şeması ve tercih edilen kontrast ortam sorgularıyla eşleşir.
Web platformu metin okunabilirliği üzerindeki ağır yükü kaldırdığı ve kullanıcı renklerini kullanıma hazır semantik HTML'ye uyguladığı için, çoğu web geliştiricisinin zorunlu renk modları için çok az CSS kuralı yazması gerekeceğini umuyoruz. Tipik olarak, web geliştiricilerinin zorunlu renk modları için yazdığı tüm stiller, web uygulamasına özel ince ayarlar olacaktır.
Bir örnek vermek gerekirse, size kişisel tercihlerinize göre uyarlanmış giysiler gönderen bir hizmet için bir web sitesi oluşturduğumuzu varsayalım. Kullanıcıya önerilen bazı renk paletlerini veren aşağıdaki widget'ı şekillendiriyoruz:
 

11.08.2021

Diğer Haberler

PlatinMarket® E-Ticaret Sistemi İle Hazırlanmıştır.