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 başlıklı makalemi okuyun. Bu makalede, muhteşem koyu mod deneyimleri oluşturma hakkında bildiklerimin tamamını paylaşıyorum.

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 kendi kendilerine dönüşüm uygulamasını 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çıklamama izin verin. Kullanıcı aracısı (UA) kelimesini çoğu zaman 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 form denetimlerinin stilini belirleme şekli 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ı tarafından sağlanan varsayılan değer, karanlık modun açık veya kapalı olmasına göre değişir. Bunu açıklamak için :matches sözde sınıfını ve -apple-system-control-background gibi WebKit'e özgü değişkenleri, ayrıca WebKit'e özgü önişleyici yönergesini #if defined kullanan bu CSS kuralını inceleyebilirsiniz:

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 ve -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 Ayarı Modülü 1. Seviye spesifikasyonu, koyu mod, kontrast ayarı veya istenen belirli renk şemaları gibi kullanıcı tercihlerini işlemek amacıyla kullanıcı aracısı tarafından otomatik renk ayarı için bir model ve denetimler sunar.

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 düzenlerini bildiği ve işleyebildiği anlamına gelir 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 temel sayfalar için ek CSS kuralı gerekmese de genel olarak color-scheme'ü her zaman prefers-color-scheme ile birlikte kullanmanız 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

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. Anlamanız gereken en önemli nokta, color-scheme'ün yalnızca varsayılan görünümü belirlemesi, prefers-color-scheme'un ise stillenebilir görünümü belirlemesidir. 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.

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

İşletim sisteminin koyu veya açık modda ayarlandığına bağlı olarak, sayfanın tamamı kullanıcı aracısı stil sayfasına göre koyu zemin üzerine açık veya açık zemin üzerine koyu renkte 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 değerinin 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ı) yerine rgba(255, 255, 255, 0.847) (beyazımsı) olur. Aynı durum, ilgili sistem rengi ButtonText olarak ayarlanan <button> öğesinin color için de geçerlidir.

Demo

color-scheme özelliğinin çok sayıda HTML öğesine uygulandığı etkileri Glitch'teki bir denemede görebilirsiniz. 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 ilgili meta etiketi 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.