Safari 27.3 Beta, Açık Siteler İçin Uyarlanabilir Karanlık Mod Ekliyor

WebKit, Safari 27.3 beta'da Uyarlanabilir Karanlık Modu duyurdu. Safari 12.1, 2019 baharında webde karanlık modu destekleyen ilk tarayıcı oldu, ancak her web sitesinin karanlık sürümü yok. Uyarlanabilir Karanlık Mod, karanlık moddaki kullanıcılar için açık siteleri uyarlar ve karanlık destek bildiren siteleri değiştirmez.

Uyarlanabilir Karanlık Mod nasıl çalışır

Web sayfası yüklemelerinin neredeyse %40'ı karanlık moddaki kullanıcılar tarafından yapılıyor, sayfa yüklemelerinin yalnızca %10'u ise bunu destekliyor. Uyarlanabilir Karanlık Mod, bu farkı kapatmak için tasarlandı. Önce bir site, HTML'de content light dark içeren meta color-scheme etiketiyle veya CSS'te color-scheme: light dark ile karanlık mod desteği bildirip bildirmediğini kontrol eder. Bildiriyorsa özellik sayfayı değiştirmez. Diğer siteler için Safari renkleri analiz eder ve sayfanın çoğunlukla açık mı yoksa koyu mu olduğunu tahmin eder. Genel olarak koyu arka plan ve açık metin içeren bir sayfa değiştirilmez, açık bir sayfa ise koyu olacak şekilde uyarlanır.

Özellik, renkleri tonu koruyarak parlaklığı tersine çevirerek dönüştürür. WCAG 4.5:1 kontrast oranıyla tanımlandığı gibi yeterli metin kontrastını hedefler. Açık CSS gradyanları dönüştürülür ve Safari, düğmelerin, görseller üzerindeki metnin ve fareyle üzerine gelme menülerinin kullanılabilir kalması için yargılar verir. Çoğu görsel değiştirilmez, ancak SVG görsellerinin renkleri gerektiğinde dönüştürülebilir ve bitmap görsellerde histogram analizinden sonra basit siyah beyaz logolar ters çevrilebilir. Maskeler ve mix-blend-mode gibi efektler bazı durumlarda kapatılabilir, canvas içeriği ise değiştirilmez.

Web siteleri için öneriler

WebKit, sayfaların genellikle modern web geliştirme uygulamalarını izlediğinde iyi çalıştığını söylüyor. Önerilen güncellemeler arasında bitmap logoların ve simgelerin SVG ile değiştirilmesi, döşeli arka plan görselleri yerine düz veya gradyan CSS renklerinin kullanılması, görsel sprite'ların modern CSS ile değiştirilmesi ve saydam arka planlı içerik görsellerinin oluşturulması yer alıyor. Kapsayıcılara dolgu eklemek sıkışmayı önleyebilir. Sayfanın bir bölümü için belirli bir karanlık deneyim isteyen geliştiriciler, bir öğeye color-scheme: light dark uygulayabilir ve kendi karanlık stillerini ekleyebilir.

Tam kontrol için siteler, color-scheme meta etiketi, :root { color-scheme: light dark }, prefers-color-scheme medya sorguları, picture source öğeleri ve light-dark() dahil olmak üzere yaygın olarak kullanılabilen web teknolojileriyle tam karanlık mod desteği bildirebilir. color-mix() ve contrast-color() gibi daha yeni CSS işlevleri ile CSS değişkeni teknikleri daha fazla seçenek sunar. WebKit, desteği daha sonra JavaScript ile enjekte etmek yerine HTML veya CSS'te bildirmeyi önerir.

Yalnızca açık kalması gereken siteler, HTML meta etiketi veya CSS aracılığıyla color-scheme: light only kullanabilir. only anahtar sözcüğü Safari 27.3 beta 1'de desteklenmiyor. WebKit, özellik beta sürecinde geliştikçe tekrar kontrol edilmesini söylüyor.

Gizlilik ve geri bildirim

WebKit, Uyarlanabilir Karanlık Mod'un uygulandığını web sitelerinin algılamasını Safari'nin engellediğini söylüyor; çünkü bunu algılamak parmak izi alınabilir bilgi eklerdi. CSS renklerini sorgulayan JavaScript, özgün yazar renklerini alır ve canvas içine çizilen görseller özgün biçimlerinde işlenir. Soruları olan geliştiriciler [email protected] adresine ulaşabilir, iyi çalışmayan bir site bulan kullanıcılar ise Feedback Assistant ile rapor gönderebilir.

Kaynaklar: webkit.org