HTML Form Kontrolleri için Karanlık Mod

Bir web uygulaması oluşturuyorsanız, son birkaç yıl içinde karanlık mod desteği için kullanıcı istekleri alma ihtimaliniz yüksektir. Bazı kullanıcılar sadece karanlık kullanıcı arayüzünün estetiğini tercih ederken, diğerleri karanlık modun göz yorgunluğunu hafifletmeye yardımcı olduğunu veya gece ekran parlaklığını azaltmaya yardımcı olduğunu görebilir.
Web sitelerinin uyumlu bir karanlık mod temasını desteklemesini kolaylaştırmak için Microsoft ve Google, Chromium'a karanlık mod form kontrolleri için destek getirmek üzere işbirliği yaptı. Koyu mod kontrolleri, v87'den itibaren masaüstünde Microsoft Edge'de mevcuttur. Daha yeni işbirlikleri, desteği Android platformuna genişletiyor: bu değişiklikler Android için Chrome v91'de görünmeye başlayacak ve Android için Microsoft Edge'in gelecekteki sürümlerinde kullanılabilecek.
Web geliştiricisi karanlık modu desteklediğini ifade ettiğinde ve kullanıcı bu modu etkinleştirdiğinde, kullanıcı aracısı (UA) stil sayfamız, kullanıma hazır form kontrollerini "otomatik olarak karartır":
Işık modu Karanlık mod
Chromium'da ışık modu form kontrolleri Chromium'da karanlık mod form kontrolleri
Web geliştiricisi veya kullanıcı tarafından eklenen stiller, her zamanki gibi kullanıcı aracısı stilini geçersiz kılar; metin giriş arka planınızı sıcak pembe yaptıysanız, medya sorgusunu kullanarak bu rengi karanlık modda kendiniz güncellemeniz gerekir prefers-color-scheme.
HTML form kontrolleri için karanlık mod desteğinden nasıl yararlanabileceğiniz aşağıda açıklanmıştır.

Tüm belge formu kontrollerini karanlık modda işle

Web uygulamasının desteklediği renk modlarını tarayıcıya color-schemeadla birlikte bir meta etiket bildirimi Tarayıcıya, kontrolleri açık veya koyu hale getirmenin güvenli olduğunu söylemek için, belgenizin başında aşağıdakileri beyan edin:
Tarayıcı, kullanıcı aracısı stil sayfasını belgenizdeki tüm kontrollere uygular:
Chromium'da karanlık mod kontrolleri
Daha fazla kontrol için Codepen'deki meta etiket örneğini keşfedin
Chromium UA stil sayfası ayrıca belge arka planı, metin ve bağlantı renkleri için renk şeması içerir. Bu örnekte, web geliştiricisi bu renkleri kendi stil sayfasında belirtmemiştir, bu nedenle belge artık otomatik olarak koyu bir arka plan üzerinde açık metin olarak oluşturulmaktadır.
Belgenizin başlığı üzerinde kontrolünüz yoksa veya tüm renk destek bitlerini CSS'de tutmayı tercih ediyorsanız, bunun yerine CSS color-schemeözelliğini kullanabilirsiniz :
:kök { 
    renk şeması: açık koyu; 
}
Hem açık hem de koyu şemaları :rootseçmek, belgenizdeki tüm kontrollerin etkin renk şemasını alacağı anlamına gelir - esasen meta etiket bildirimine eşdeğerdir.
color-schemeCodepen'de CSS örneğini keşfedin

Karanlık modda belirli form kontrollerini işleme

Bazı web geliştiricilerinin koyu renk şemalarını uygulamalarının yalnızca bazı alanlarına uygulaması gerekebilir. Böyle bir durumda, daha spesifik bir seçici yerine renk şeması CSS özelliğini kullanmaya devam edebilirsiniz:
.schemed-alan { 
    renk şeması: açık koyu; 
}
.schemed-areaSeçicimizle div'i hedefliyoruz , bu nedenle renk şemasına özel UA stilleri yalnızca bu öğeye ve onun soyundan gelenlere kademelendirilir. İşte karanlık mod etkinken nasıl göründüğü:
Planlanmış bir alanla zıtlık oluşturan varsayılan stil alanı.  Bu durumda, varsayılan stil kontrolleri açık moddadır ve planlanmış alan kontrolleri karanlık moddadır.
color-schemeCodepen'deki seçici örneği keşfedin
Sistemde karanlık mod etkinleştirildiğinde, “Varsayılan stil alanı” kutusundaki içeriklerde herhangi bir değişiklik yapılmadı. "Şema alanı" kutusunda, form kontrolleri karanlık mod estetiğine güncellendi.
Kökteki renk şemalarını seçmenin aksine, "Şema alanı"ndaki kontrol dışı içeriklerin kullanıcı aracısının karanlık teması tarafından değiştirilmediğini fark edebilirsiniz. Bunun yerine, web geliştiricileri, prefers-color-schememedya sorgusunu kullanarak planlanmış alan için metin ve arka plan renklerini yönetmelidir .
 

10.08.2021

Diğer Haberler

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