“color-scheme” CSS özelliği ve karşılık gelen meta etiketiyle iyileştirilmiş karanlık mod varsayılan stili

Arka plan #

bu prefers-color-scheme kullanıcı tercihi medya özelliği #

bu TheComedicComedian/prefers-color-scheme" rel="noopener">prefers-color-scheme kullanıcı tercihi medya özelliği, geliştiricilere sayfalarının görünümleri üzerinde tam kontrol sağlar. Eğer bilmiyorsanız, lütfen makalemi okuyun. prefers-color-scheme: Merhaba karanlık, eski dostum, harika karanlık mod deneyimleri yaratmak hakkında bildiğim her şeyi belgeledim.

Makalede yalnızca kısaca bahsedilen bir yapboz parçası, color-scheme CSS özelliği ve aynı ada karşılık gelen meta etiketi. Her ikisi de, sayfanızı form kontrolleri, kaydırma çubukları ve CSS sistem renkleri gibi kullanıcı aracısı stil sayfasının temaya özel varsayılanlarına dahil etmenize izin vererek bir geliştirici olarak hayatınızı kolaylaştırır. Aynı zamanda bu özellik, tarayıcıların herhangi bir dönüşümü kendi başlarına uygulamalarını engeller.

tarayıcı desteği #

prefers-color-scheme #

color-scheme #

Kullanıcı aracısı stil sayfası #

Devam etmeden önce, bir kullanıcı aracısı stil sayfasının ne olduğunu kısaca açıklayayım. Çoğu zaman, kelimeyi düşünebilirsiniz kullanıcı aracısı (UA) demenin süslü bir yolu olarak tarayıcı. UA stil sayfası, bir sayfanın varsayılan görünümünü ve hissini belirler. Adından da anlaşılacağı gibi, bir UA stil sayfası, söz konusu UA’ya bağlı olan bir şeydir. bir göz atabilirsin Chrome’un (ve Chromium’un) UA stil sayfasını inceleyin ve şununla karşılaştırın: Firefox’un veya Safari’ler (ve WebKit’ler). Tipik olarak, UA stil sayfaları çoğu konuda hemfikirdir. Örneğin, hepsi bağlantıları mavi, genel metni siyah ve arka plan rengini beyaz yapar, ancak aynı zamanda önemli (ve bazen can sıkıcı) farklılıklar da vardır, örneğin, form kontrollerini nasıl biçimlendirdikleri.

daha yakından bakın WebKit’in UA stil sayfası ve karanlık modla ilgili ne yaptığı. (Stil sayfasında “koyu” için tam metin araması yapın.) Stil sayfası tarafından sağlanan varsayılan, karanlık modun açık veya kapalı olmasına göre değişir. Bunu göstermek için, işte böyle bir CSS kuralı :matches sözde sınıf ve WebKit dahili değişkenleri gibi -apple-system-control-backgroundyanı sıra WebKit dahili önişlemci yönergesi #if defined:

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 */
}

için standart olmayan bazı değerler göreceksiniz. color Ve background-color Yukarıdaki özellikler. Hiç biri text ne de -apple-system-control-background geçerli CSS renkleridir. Bunlar WebKit dahilidir semantik renkler.

Görünen o ki, CSS standartlaştırılmış semantik sistem renklerine sahip. Onlar belirtilen CSS Renk Modülü Seviye 4. Örneğin, Canvas ( ile karıştırılmamalıdır &LTcanvas> etiketi), uygulama içeriğinin veya belgelerin arka planı içindir, oysa CanvasText uygulama içeriğindeki veya belgelerdeki metin içindir. İkisi bir aradadır ve ayrı ayrı kullanılmamalıdır.

UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl işlenmesi gerektiğini belirlemek için kendi tescilli veya standart anlamsal sistem renklerini kullanabilir. İşletim sistemi karanlık moda ayarlanmışsa veya karanlık bir tema kullanıyorsa, CanvasText (veya text) koşullu olarak beyaza ayarlanır ve Canvas (veya -apple-system-control-background) siyah olarak ayarlanır. UA stil sayfası daha sonra aşağıdaki CSS’yi yalnızca bir kez atar ve hem açık hem de karanlık modu kapsar.

/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}

bu color-scheme CSS özelliği #

bu CSS Renk Ayarlama Modülü Seviye 1 spesifikasyon, bir model sunar ve karanlık mod, kontrast ayarı veya belirli istenen renk şemaları gibi kullanıcı tercihlerini işlemek amacıyla kullanıcı aracısı tarafından otomatik renk ayarlamasını kontrol eder.

bu color-scheme burada tanımlanan özellik, bir öğenin hangi renk şemalarıyla işlenmenin rahat olduğunu belirtmesine izin verir. Bu değerler, kullanıcının tercihleriyle müzakere edilir ve bu, form kontrollerinin ve kaydırma çubuklarının varsayılan renkleri ve ayrıca CSS sistem renklerinin kullanılan değerleri gibi kullanıcı arabirimi (UI) öğelerini etkileyen seçilmiş bir renk şemasıyla sonuçlanır. Aşağıdaki değerler şu anda desteklenmektedir:

• normal Öğenin renk düzenlerinden hiç haberdar olmadığını ve bu nedenle öğenin tarayıcının varsayılan renk düzeniyle oluşturulması gerektiğini belirtir.

• [ light | dark ]+ Öğenin, listelenen renk şemalarının farkında olduğunu ve işleyebileceğini gösterir ve bunlar arasında sıralı bir tercihi ifade eder.

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 renkleri ile tam tersini temsil eder.

Tüm öğeler için, bir renk düzeniyle oluşturma, öğe için tarayıcı tarafından sağlanan tüm kullanıcı arabiriminde kullanılan renklerin renk düzeninin amacı ile eşleşmesine neden olmalıdır. Örnekler arasında kaydırma çubukları, yazım denetimi alt çizgileri, form kontrolleri vb.

Üzerinde :root öğesi, bir renk şemasıyla işleme ek olarak tuvalin yüzey rengini (yani, genel arka plan rengini), öğenin başlangıç ​​değerini etkilemelidir. color özelliği ve sistem renklerinin kullanılan değerleri ve aynı zamanda görünümü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;
}

Onurlandırmak color-scheme CSS özelliği, ilk olarak CSS’nin indirilmesini gerektirir (eğer &LTlink rel="stylesheet">) ve ayrıştırılacak. Kullanıcı aracılarının sayfa arka planını istenen renk şemasıyla oluşturmasına yardımcı olmak için hemenA color-scheme değer ayrıca bir &LTmeta name="color-scheme"> eleman.

&LT!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
meta name="color-scheme" content="dark light">

birleştirme color-scheme Ve prefers-color-scheme #

Hem meta etiketi hem de CSS özelliği (eğer :root öğe) sonunda aynı davranışa neden olursa, tarayıcının tercih edilen şemaya daha hızlı uyum sağlayabilmesi için her zaman renk şemasını meta etiketi aracılığıyla belirtmenizi öneririm.

Mutlak temel sayfalar için ek CSS kuralları gerekmese de, genel durumda her zaman birleştirmeniz gerekir. color-scheme ile prefers-color-scheme. Örneğin, tescilli WebKit CSS rengi -webkit-linkklasik bağlantı mavisi için WebKit ve Chrome tarafından kullanılır rgb(0,0,238)siyah bir arka plan üzerinde 2,23:1 gibi yetersiz bir kontrast oranına sahiptir ve başarısız hem WCAG AA hem de WCAG AAA Gereksinimler.

için böcek açtım Krom, Web KitiVe Firefox yanı sıra bir HTML Standardında meta sorunu Bunu düzeltmek için.

ile etkileşim prefers-color-scheme #

etkileşimi color-scheme CSS özelliği ve ilgili meta etiketi ile prefers-color-scheme kullanıcı tercihi medya özelliği ilk başta kafa karıştırıcı görünebilir. Aslında birlikte çok iyi oynuyorlar. Anlaşılması gereken en önemli şey, color-scheme yalnızca varsayılan görünümü belirlerken, prefers-color-scheme stil sahibi görünümü belirler. Bunu daha net hale getirmek için aşağıdaki sayfayı varsayalım:

head>
meta name="color-scheme" content="dark light">
style>
fieldset {
background-color: gainsboro;
}
TheComedicComedian (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
&LT/style>
&LT/head>
body>
p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
&LT/p>
form>
fieldset>
legend>Lorem ipsum&LT/legend>
button type="button">Lorem ipsum&LT/button>
&LT/fieldset>
&LT/form>
&LT/body>

Sayfadaki satır içi CSS kodu, &LTfieldset> elementler background-color ile gainsboro genel durumda ve darkslategray kullanıcı bir tercih ederse dark göre renk şeması prefers-color-scheme kullanıcı tercihi medya özelliği.

üzerinden &LTmeta name="color-scheme" content="dark light"> öğesi, sayfa tarayıcıya karanlık temayı tercih ederek koyu ve açık temayı desteklediğini söyler.

İşletim sisteminin koyu veya açık moda ayarlanıp ayarlanmadığına bağlı olarak, kullanıcı aracısı stil sayfasına bağlı olarak sayfanın tamamı açıktan koyuya veya tam tersi görünür. Orada HAYIR paragraf metnini veya sayfanın arka plan rengini değiştirmek için geliştirici tarafından sağlanan ek CSS.

nasıl olduğuna dikkat edin &LTfieldset> elementler background-color sayfadaki geliştirici tarafından sağlanan satır içi stil sayfasındaki kurallara uyarak karanlık modun etkinleştirilip etkinleştirilmediğine bağlı olarak değişir. İkiside gainsboro veya darkslategray.

bu &LTbutton> elemanın görünümü, kullanıcı aracısı stil sayfası tarafından kontrol edilir. Onun color olarak ayarlandı ButtonText sistem rengi ve background-color ve dört border-colors sistem rengine ayarlanır ButtonFace.

Şimdi nasıl olduğuna dikkat edin &LTbutton> elementler border-color değişiklikler. bu hesaplanmış için değer border-top-color ve border-bottom-color anahtarlar rgba(0, 0, 0, 0.847) (siyahımsı) için rgba(255, 255, 255, 0.847) (beyazımsı), kullanıcı aracısı güncellendiğinden ButtonFace renk şemasına göre dinamik olarak. için de aynısı geçerlidir. &LTbutton> elementler color karşılık gelen sistem rengine ayarlanmış ButtonText.

Demo #

etkilerini görebilirsiniz color-scheme çok sayıda HTML öğesine uygulanan Glitch’te demo. demo kasten WCAG AA ve WCAG AAA’yı gösterir ihlal belirtilen bağlantı renkleri ile yukarıdaki uyarı.

teşekkürler #

bu color-scheme CSS özelliği ve ilgili meta etiketi şu şekilde uygulandı: Rune Lillesveen. Rune ayrıca CSS Renk Ayarlama Modülü Seviye 1 spesifikasyonunun yardımcı düzenleyicisidir. Kahraman görseli Philippe Leone Açık Unsplash.