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

color-scheme CSS özelliği ve ilgili meta etiket, geliştiricilerin sayfalarında kullanıcı aracısı stil sayfasının temaya özgü varsayılan ayarlarını etkinleştirmesine 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 bildiğim her şeyi belgeledim.

Makalede yalnızca kısaca değinilen yapboz parçalarından biri, color-scheme CSS özelliği ve aynı ada karşılık gelen meta etikettir. Her ikisi de sayfanızı kullanıcı aracısı stil sayfasının temaya özgü varsayılan ayarlarına (örneğin, form denetimleri, 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ı olan bir öğedir. Chrome'un (ve Chromium'un) UA stil sayfasına bakıp Firefox veya Safari'nin (ve WebKit'in) stiliyle karşılaştırabilirsiniz. UA stil sayfaları genellikle çoğu şeyi kabul eder. Ö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şleyişe daha yakından bakın. (Stil sayfasında "koyu" 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ıda color ve background-color özellikleri için standart olmayan bazı değerler dikkatinizi çekecektir. text veya -apple-system-control-background geçerli CSS renkleri değildir. Bunlar, WebKit'in dahili anlamsal renkleridir.

CSS'nin anlamsal sistem renklerini standart hale getirdiği anlaşılıyor. CSS Renk Modülü Düzey 4'te belirtilir. Örneğin, Canvas (<canvas> etiketi ile karıştırılmaması gerekir) uygulama içeriğinin veya belgelerinin arka planı içindir. CanvasText ise uygulama içeriği veya dokümanlardaki metin içindir. Bu ikisi birlikte kullanılabilir ve tek başına kullanılmamalıdır.

UA stil sayfaları, HTML öğelerinin varsayılan olarak nasıl oluşturulması gerektiğini belirlemek için kendi özel veya standartlaştırılmış anlamsal sistem renklerini kullanabilir. İşletim sistemi koyu moda ayarlanırsa veya koyu tema kullanıyorsa CanvasText (veya text) koşul olarak beyaz, Canvas (veya -apple-system-control-background) ise siyah olarak ayarlanır. Daha sonra 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 mülkü

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 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ü öğ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 işleyebildiğini belirtir ve bunlar arasında sıralı bir tercih ifade eder.

Bu listede, light açık renk arka plan renklerine ve koyu ön plan renklerine sahip açık renk şemasını temsil ederken, dark ise koyu arka plan ve açık ön plan renkleriyle bunun tersini temsil etmektedir.

Tüm öğelerde, renk şemasıyla oluşturma işlemi, tarayıcı tarafından sağlanan tüm kullanıcı arayüzünde öğe için kullanılan renklerin, renk şemasının amacıyla uyumlu olmasını sağlamalıdır. Bunlara örnek olarak kaydırma çubukları, yazım denetiminin alt çizgileri, form denetimleri verilebilir.

:root öğesinde renk şemasıyla oluşturma işlemi ayrıca tuvalin yüzey rengini (yani genel arka plan rengini), color özelliğinin 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 ilk kez indirilmesi (<link rel="stylesheet"> aracılığıyla başvuruda bulunuluyorsa) ve ayrıştırılması gerekir. Kullanıcı aracılarına, sayfa arka planını hemen istenen renk şemasıyla oluşturmada 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) sonunda aynı davranışta bulunacağından, tarayıcının tercih edilen şemayı daha hızlı bir şekilde kullanabilmesi için renk şemasını her zaman meta etiketle belirtmenizi öneririm.

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

Bu sorunu düzeltmek için Chrome, WebKit ve Firefox'ta hatalar ve HTML Standardı'nda bir meta sorun açtım.

prefers-color-scheme ile etkileşim kurun

color-scheme CSS özelliğinin ve karşılık gelen meta etiketin prefers-color-scheme kullanıcı tercihi medya özelliğiyle birlikte çalışması başlangıçta kafa karıştırıcı görünebilir. Aslında birlikte çok iyi oyun oynuyorlar. 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 açık hale getirmek için aşağıdaki sayfayı kabul edin:

<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 değerini genel durumda gainsboro olarak, kullanıcı prefers-color-scheme kullanıcı tercihli medya özelliğine göre dark renk şemasını tercih ederse darkslategray değerine 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 başka bir CSS değildir.

<fieldset> öğesinin background-color değerinin, sayfada geliştirici tarafından sağlanan satır içi stil sayfasında yer alan kurallar uygulanarak koyu modun etkin olup olmadığına göre nasıl değiştiğine dikkat edin. gainsboro veya darkslategray.

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

Şimdi <button> öğesinin border-color metriğinin nasıl değiştiğine dikkat edin. Kullanıcı aracısı, ButtonFace öğesini renk şemasına göre dinamik olarak güncellediğinden, border-top-color ve border-bottom-color için hesaplanan değer rgba(0, 0, 0, 0.847) (siyah) değerinden rgba(255, 255, 255, 0.847) (beyaz) değerine değişir. Aynı durum, <button> öğesinin karşılık gelen sistem rengine (ButtonText) ayarlanmış 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, WCAG AA ve WCAG AAA ihlali yukarıdaki uyarıda belirtilen bağlantı renkleriyle kasıtlı olarak gösterilmektedir.

Teşekkür

color-scheme CSS özelliği ve karşılık gelen meta etiket Rune Lillesveen tarafından uygulanmıştır. Rune ayrıca CSS Renk Ayarlama Modülü Düzey 1 spesifikasyonunun ortak düzenleyicisidir. Philippe Leone'nin Unsplash'teki hero resim.