Renk şeması CSS özelliği ve karşılık gelen meta etiketle koyu mod varsayılan stili iyileştirildi

color-scheme CSS mülkü ve ilgili meta etiketi, geliştiricilerin sayfalarını kullanıcı aracısı stil sayfasının temaya özel varsayılanlarına dahil etmesine olanak tanır.

Thomas Steiner

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 lütfen prefers-color-scheme: Merhaba karanlık, eski dostum. Koyu mod ile ilgili muhteşem deneyimler oluşturma hakkında bildiklerimi belgeledim.

Makalede yalnızca kısaca bahsedilen bir bulmaca parçası, color-scheme CSS özelliği ve aynı ada sahip ilgili meta etikettir. Her ikisi de sayfanızı, kullanıcı aracısı stil sayfasının temaya özel varsayılanlarına (ör. form kontrolleri, kaydırma çubukları ve CSS sistem renkleri) dahil etmenize olanak tanıyarak 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şına 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çıklayayım. Çoğu zaman kullanıcı aracısı (UA) sözcüğünü 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ıdır. Chrome'un (ve Chromium'un) UA stil sayfasına göz atabilir ve bunu Firefox veya Safari'nin (ve WebKit'in) stil sayfasıyla karşılaştırabilirsiniz. Genellikle UA stil sayfaları çoğu konuda aynı fikirdedir. Örneğin, hepsi bağlantıları mavi, genel metni siyah ve arka plan rengini beyaz yapar, ancak aynı zamanda önemli (ve bazen rahatsız edici) farklılıklar da vardır (örneğin, form denetimlerinin stillendirilme şekli).

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ı tarafından sağlanan varsayılan değer, koyu modun açık veya kapalı olmasına göre değişir. Bunu göstermek için aşağıda, :matches sözde sınıfını ve WebKit dahili değişkenlerini (-apple-system-control-background gibi WebKit değişkenlerini) ve #if defined WebKit dahili ön işlemci yönergesini kullanan bir CSS kuralını görebilirsiniz:

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ıdaki color ve background-color özellikleri için standart olmayan bazı değerler göreceksiniz. text veya -apple-system-control-background geçerli CSS renkleri değildir. Bunlar WebKit'e özgü semantik renklerdir.

CSS'de standartlaştırılmış anlamsal sistem renkleri olduğu ortaya çıktı. Bunlar CSS Renk Modülü 4. Seviye'de belirtilmiştir. Örneğin, Canvas (<canvas> etiketiyle karıştırılmamalıdır) uygulama içeriğinin veya dokümanların arka planı için kullanılır. CanvasText ise uygulama içeriğindeki veya dokümanlardaki metin için kullanılır. Bu iki özellik birlikte kullanılır ve ayrı olarak kullanılmamalıdır.

UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl oluşturulacağını belirlemek için kendi özel renklerini veya standartlaştırılmış anlamsal sistem renklerini kullanabilir. İşletim sistemi koyu modda ayarlanmışsa veya koyu tema kullanıyorsa CanvasText (veya text) koşullu olarak beyaza, Canvas (veya -apple-system-control-background) ise siyaha 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 ayarlaması veya istenen belirli renk şemaları gibi kullanıcı tercihlerini yönetme hedefiyle kullanıcı aracısı tarafından otomatik renk ayarlaması üzerinde kontrol sağlar.

Burada tanımlanan color-scheme özelliği, bir öğenin hangi renk şemalarıyla oluşturulabileceğini belirtmesine olanak tanır. Bu değerler, kullanıcının tercihleriyle birlikte değerlendirilir. Böylece, form denetimlerinin ve kaydırma çubuklarının varsayılan renkleri gibi kullanıcı arayüzü (UI) öğelerinin yanı sıra CSS sistem renklerinin kullanılan değerlerini etkileyen bir renk şeması seçilir. Şu anda aşağıdaki değerler desteklenmektedir:

• normal Öğenin renk şemalarından haberdar olmadığını ve bu nedenle öğenin tarayıcının varsayılan renk şemasıyla oluşturulması gerektiğini gösterir.

• [ light | dark ]+ Öğenin, listelenen renk şemalarını bildiğini ve işleyebildiğini belirtir ve bunlar arasında sıralı bir tercih ifade eder.

Bu listede light, açık arka plan renkleri ve koyu ön plan renkleri içeren açık bir renk şemasını temsil ederken dark, koyu arka plan renkleri ve açık ön plan renkleri içeren tam tersini temsil eder.

Tüm öğeler için renk şemasıyla oluşturma işlemi, öğenin tarayıcı tarafından sağlanan tüm kullanıcı arayüzünde kullanılan renklerin renk şemasının amacına uygun olmasına neden olmalıdır. Kaydırma çubukları, yazım denetimi altı çizilileri, form denetimleri vb. örneklerdir.

:root öğesinde, renk şemasıyla oluşturma işlemi ayrıca kanvasın yüzey rengini (yani genel arka plan rengini), color mülkünün ilk değerini ve sistem renklerinin kullanılan değerlerini 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ğinin dikkate alınması için CSS'nin önce indirilmesi (<link rel="stylesheet"> aracılığıyla referans veriliyor ise) ve ayrıştırılması gerekir. Kullanıcı aracılarının sayfa arka planını hemen istenen renk şemasıyla oluşturmasına yardımcı olmak için <meta name="color-scheme"> öğesinde bir 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'u birleştirme

Hem meta etiketi hem de CSS özelliği (:root öğesine uygulanırsa) sonunda aynı davranışa yol açtığından, tarayıcının tercih edilen şemaya daha hızlı uyum sağlayabilmesi için renk şemasını her zaman meta etiket aracılığıyla belirtmenizi öneririz.

Mutlak referans sayfalar için ek CSS kuralına gerek olmasa da genel durumda color-scheme öğesini her zaman prefers-color-scheme ile birleştirmeniz gerekir. Örneğin, WebKit ve Chrome tarafından klasik bağlantı mavi rgb(0,0,238) için kullanılan özel WebKit CSS rengi -webkit-link, siyah arka planda 2,23:1 olan yetersiz bir kontrast oranına sahiptir ve hem WCAG AA hem de WCAG AAA şartlarını ihlal eder.

Bu sorunun düzeltilmesi için Chrome, WebKit ve Firefox ile ilgili hatalar ve HTML standardında meta sorunu kaydettim.

prefers-color-scheme ile etkileşim kurun

color-scheme CSS mülkünün ve ilgili meta etiketinin prefers-color-scheme kullanıcı tercihi medya özelliğiyle etkileşimi ilk başta kafa karıştırıcı görünebilir. Hatta birlikte çok iyi oynarlar. Anlaşılması gereken en önemli nokta, varsayılan görünümün yalnızca color-scheme tarafından belirlendiği, prefers-color-scheme ise stillenebilir görünümü belirlediğidir. Bunu daha net bir şekilde açıklamak için aşağıdaki sayfayı ele alalı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 durumda gainsboro olarak, kullanıcı prefers-color-scheme kullanıcı tercihi medya özelliğine göre dark renk şemasını tercih ederse darkslategray olarak ayarlar.

<meta name="color-scheme" content="dark light"> öğesi aracılığıyla sayfa, tarayıcıya koyu temayı tercih ederek koyu ve açık temayı desteklediğini bildirir.

İşletim sisteminin koyu moda mı yoksa açık moda mı ayarlandığına bağlı olarak kullanıcı aracısı stil sayfasına bağlı olarak tüm sayfa koyu modda veya koyu modda görünür. Paragraf metnini veya sayfanın arka plan rengini değiştirmek için geliştirici tarafından sağlanan ek CSS yoktur.

Sayfada geliştirici tarafından sağlanan satır içi stil sayfasında belirtilen kurallara göre <fieldset> öğesinin background-color özelliğinin koyu modun etkin olup olmadığına göre nasıl değiştiğini unutmayın. gainsboro veya darkslategray olmalıdır.

<button> öğesinin görünümü, kullanıcı aracısı stil sayfası tarafından kontrol edilir. color değeri ButtonText sistem rengine, background-color değeri ve dört border-color değeri ise ButtonFace sistem rengine ayarlanmıştır.

Şimdi <button> öğesinin border-color metriğinin nasıl değiştiğine dikkat edin. Kullanıcı aracısı, ButtonFace değerini renk şemasına göre dinamik olarak güncellediğinden border-top-color ve border-bottom-color için hesaplanmış değer rgba(0, 0, 0, 0.847) (siyahımsı) değerinden rgba(255, 255, 255, 0.847) (beyazımsı) değerine geçer. Aynı durum, ilgili sistem rengi ButtonText olarak ayarlanan <button> öğesinin color için de geçerlidir.

Demo

color-scheme öğesinin etkilerinin çok sayıda HTML öğesine uygulandığını görmek için Glitch demosunu inceleyebilirsiniz. Demoda, yukarıdaki uyarıda belirtilen bağlantı renkleriyle WCAG AA ve WCAG AAA ihlali kasıtlı olarak gösterilmektedir.

Teşekkür ederiz

color-scheme CSS özelliği ve karşılık gelen meta etiket Rune Lillesveen tarafından uygulanmıştır. Rune, CSS Renk Düzenleme Modülü 1. Seviye spesifikasyonunun ortak düzenleyicisidir. Unsplash'taki Philippe Leone tarafından oluşturulan hero resim.