color-scheme CSS özelliği ve karşılık gelen meta etiket, geliştiricilerin sayfalarında kullanıcı aracısı stil sayfasının temaya özgü varsayılanlarını etkinleştirmelerini sağlar.
Arka plan
prefers-color-scheme kullanıcı tercihi medya özelliği
prefers-color-scheme kullanıcı tercihi medya özelliği, geliştiricilere sayfalarının görünümü üzerinde tam kontrol sağlar.
Bu konuda bilginiz yoksa şu prefers-color-scheme: Merhaba karanlık, eski dostum adlı makalemi okuyun.
Makalede kısaca bahsedilen bulmaca parçalarından biri, color-scheme CSS özelliği ve aynı ada ait buna karşılık gelen meta etikettir.
Her ikisi de sayfanızda kullanıcı aracısı stil sayfasının temaya özgü varsayılanlarını (ör. form kontrolleri, kaydırma çubukları ve CSS sistem renkleri) etkinleştirmenize olanak tanıyarak geliştirici olarak hayatınızı kolaylaştırır.
Aynı zamanda bu özellik, tarayıcıların kendi başlarına dönüşüm uygulamasını da engeller.
Tarayıcı desteği
prefers-color-scheme
color-scheme
Kullanıcı aracısı stil sayfası
Devam etmeden önce kullanıcı aracısı stil sayfasının ne olduğunu kısaca açıklayacağım. Çoğu zaman kullanıcı aracısı (UA) kelimesini tarayıcı demenin süslü bir yolu olarak düşünebilirsiniz. UA stil sayfası, bir sayfanın varsayılan görünümünü ve tarzını belirler. Adından da anlaşılacağı gibi UA stil sayfası, söz konusu UA'ya bağlı bir şeydir. Chrome'un (ve Chromium'un) UA stil sayfasına bakabilir ve bunu Firefox veya Safari (ve WebKit) ile karşılaştırabilirsiniz. UA stil sayfaları genellikle birçok konuda hemfikirdir. Örneğin, hepsi bağlantıları mavi, genel metin siyah ve arka plan rengini beyaz yapar, ancak form kontrollerinin stilini belirleme gibi önemli (ve bazen can sıkıcı) farklılıklar da vardır.
WebKit'in UA stil sayfasına ve koyu modla ilgili işlevine daha yakından bakın.
(Stil sayfasında "dark" için tam metin araması yapın.)
Stil sayfasının varsayılan değeri, koyu modun açık veya kapalı olmasına göre değişir. Bunu göstermek için :matches sözde sınıfı ve -apple-system-control-background gibi WebKit dahili değişkenlerinin yanı sıra #if defined WebKit-internal ön işlemci yönergesini kullanan böyle bir CSS kuralı aşağıda verilmiştir:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
Yukarıda color ve background-color özellikleri için standart olmayan bazı değerler göreceksiniz.
text ve -apple-system-control-background geçerli CSS renkleri değil.
Bunlar, WebKit dahili anlamsal renklerdir.
CSS'nin anlamsal sistem renklerinin standartlaştırılmış olduğu ortaya çıktı.
Bunlar CSS Renk Modülü Düzey 4'te belirtilmiştir.
Örneğin, Canvas (<canvas> etiketi ile karıştırılmamalıdır) uygulama içeriğinin veya belgelerinin arka planı, CanvasText ise uygulama içeriği veya belgelerindeki metin içindir.
Bu ikisi birlikte kullanılır ve birbirinden ayrı kullanılmamalıdır.
UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl oluşturulması gerektiğini belirlemek için kendi özel renklerini veya standartlaştırılmış semantik sistem renklerini kullanabilir.
İşletim sistemi koyu moda ayarlanmışsa veya koyu tema kullanıyorsa CanvasText (veya text) koşullu olarak beyaz, Canvas (veya -apple-system-control-background) ise siyah olarak ayarlanır.
Ardından UA stil sayfası, aşağıdaki CSS'yi yalnızca bir kez atar ve hem açık hem de koyu modu kapsar.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme CSS özelliği
CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonu, bir model sunar ve koyu mod, kontrast ayarı veya istenen belirli renk şemaları gibi kullanıcı tercihlerini ele almak amacıyla kullanıcı aracısı tarafından otomatik renk düzenlemesini kontrol eder.
Burada tanımlanan color-scheme özelliği, öğelerin hangi renk şemalarıyla oluşturulabileceğini belirtmesine olanak tanır.
Bu değerler, kullanıcının tercihlerine göre belirlenir. Böylece, form denetimlerinin ve kaydırma çubuklarının varsayılan renklerinin yanı sıra CSS sistem renklerinin kullanılan değerleri gibi kullanıcı arayüzü (UI) öğelerini etkileyen seçili bir renk şeması elde edilir.
Şu anda aşağıdaki değerler desteklenmektedir:
normalÖğenin, renk şemalarından hiç haberdar olmadığını ve bu nedenle öğenin tarayıcının varsayılan renk şemasıyla oluşturulması gerektiğini belirtir.[ light | dark ]+Öğenin listelenen renk şemalarını bildiğini ve bunları işleyebildiğini belirtip bunlar arasında sıralı bir tercih belirtir.
Bu listede light, açık arka plan renkleri ve koyu ön plan renkleri ile açık renk şemasını temsil ederken dark, koyu arka plan renkleri ve açık ön plan renkleriyle tam tersini temsil eder.
Tüm öğelerde renk şemasıyla oluşturma, öğe için tarayıcı tarafından sağlanan tüm kullanıcı arayüzünde kullanılan renklerin, renk şemasının amacıyla eşleşmesine neden olmalıdır. Kaydırma çubukları, yazım denetimi alt çizgileri, form kontrolleri vb. verilebilir.
:root öğesinde renk şemasıyla oluşturma, tuvalin yüzey rengini (yani genel arka plan rengi), color özelliğinin ilk değerini ve sistem renklerinin kullanılan değerlerini de etkilemeli, ayrıca görüntü alanının kaydırma çubuklarını da etkilemelidir.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme meta etiketi
color-scheme CSS özelliğini dikkate almak için CSS'nin ilk olarak indirilmesi (<link rel="stylesheet"> aracılığıyla referans veriliyorsa) ve ayrıştırılması gerekir.
Kullanıcı aracılarının sayfa arka planını istenen renk şemasıyla hemen oluşturmasına yardımcı olmak için <meta name="color-scheme"> öğesinde color-scheme değeri de sağlanabilir.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
color-scheme ve prefers-color-scheme birleştiriliyor
Hem meta etiket hem de CSS özelliği (:root öğesine uygulanırsa) sonuçta aynı davranışla sonuçlandığından, tarayıcının tercih edilen şemayı daha hızlı benimseyebilmesi için renk şemasını her zaman meta etiket aracılığıyla belirtmenizi öneririm.
Mutlak temel sayfalar için ek CSS kurallarına gerek yoktur ancak genel olarak color-scheme ile her zaman prefers-color-scheme değerlerini birleştirmeniz gerekir.
Örneğin, WebKit ve Chrome tarafından klasik mavi bağlantı rgb(0,0,238) için kullanılan özel WebKit CSS rengi -webkit-link, siyah arka plan üzerinde 2,23:1'lik yeterli kontrast oranına sahip değildir ve hem WCAG AA hem de WCAG AAA koşullarını başarısızdır.
Chrome, WebKit ve Firefox'ta hataları ve HTML Standardı'nda bir meta sorunu açarak bu sorunu giderdim.
prefers-color-scheme ile etkileşimde bulunun
color-scheme CSS özelliği ve karşılık gelen meta etiketin prefers-color-scheme kullanıcı tercihi medya özelliğiyle etkileşimi ilk başta kafa karıştırıcı olabilir.
Aslında, birlikte çok iyi bir şekilde oynarlar.
Anlaşılması gereken en önemli nokta, varsayılan görünümü yalnızca color-scheme öğesinin, stil görünümünün ise prefers-color-scheme tarafından belirlenmesidir.
Bunu daha net bir şekilde ifade etmek için aşağıdaki sayfayı varsayalım:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Sayfadaki satır içi CSS kodu, <fieldset> öğesinin background-color özelliğini genel olarak gainsboro ve kullanıcı prefers-color-scheme kullanıcı tercihi medya özelliğine göre bir dark renk şeması tercih ederse darkslategray olarak ayarlar.
Sayfa, <meta name="color-scheme" content="dark light"> öğesi aracılığıyla tarayıcıya koyu ve açık temayı desteklediğini bildirir. Bununla birlikte, koyu tema tercih edilir.
İşletim sisteminin koyu veya açık moda ayarlanıp ayarlanmadığına bağlı olarak, kullanıcı aracısı stil sayfasına bağlı olarak tüm sayfa koyu renkte veya tam tersi görünür. Paragraf metnini veya sayfanın arka plan rengini değiştirmek için geliştirici tarafından sağlanan hiçbir ek CSS yoktur.
Geliştirici tarafından sağlanan sayfadaki satır içi stil sayfasındaki kurallara uyun. <fieldset> öğesinin background-color özelliğinin, koyu modun etkin olup olmadığına bağlı olarak nasıl değiştiğine dikkat edin.
gainsboro veya darkslategray olabilir.
<fieldset> öğesinin background-color değeri gainsboro.
<fieldset> öğesinin background-color değeri darkslategray.
<button> öğesinin görünümü, kullanıcı aracısı stil sayfası tarafından kontrol edilir.
color öğesi ButtonText sistem rengine, background-color ile dört border-color ise sistem rengine ButtonFace ayarlandı.
background-color ve çeşitli border-color öğeleri ButtonFace sistem rengine ayarlanır.
Şimdi <button> öğesinin border-color özelliğinin nasıl değiştiğine dikkat edin.
Kullanıcı aracısı renk şemasına göre dinamik olarak ButtonFace güncelleme yaptığından border-top-color ve border-bottom-color için computed değeri rgba(0, 0, 0, 0.847) yerine (siyah) rgba(255, 255, 255, 0.847) (beyaz) olarak değişir.
Aynı durum, <button> öğesinin karşılık gelen sistem rengine (ButtonText) ayarlanmış color öğesi için de geçerlidir.
ButtonFace olarak ayarlanan border-top-color ve border-bottom-color hesaplanan değerleri artık rgba(0, 0, 0, 0.847) şeklindedir.
ButtonFace olarak ayarlanan border-top-color ve border-bottom-color değerlerinin hesaplanan değerleri artık rgba(255, 255, 255, 0.847) oldu.
Demo
Glitch demosinde çok sayıda HTML öğesine uygulanan color-scheme etkilerini görebilirsiniz.
Demo, kasıtlı olarak WCAG AA ve WCAG AAA ihlalini yukarıdaki uyarıda belirtilen bağlantı renkleriyle birlikte göstermektedir.
color-scheme: light olarak değiştirildi.
color-scheme: dark olarak değiştirildi.
Bağlantı renkleriyle birlikte WCAG AA ve WCAG AAA
ihlali
olduğunu belirtin.
Teşekkür
color-scheme CSS özelliği ve karşılık gelen meta etiket, Rune Lillesveen tarafından uygulanmıştır.
Rune aynı zamanda CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonunun da yardımcı editörlerindendir.
Philippe Leone'nin Unsplash'teki lokomotif resmi.