CSS vurgu rengi

Tek satırlık bir kodla yerleşik HTML formu girişlerine markanızın rengini taşıyın.

Adem Parça
Joey Arhar'dan daha fazla içerik
Joey Arhar
X GitHub

Bugünün HTML form öğelerinin özelleştirilmesi zordur. Bu, az sayıda özel stil kullanma veya hiç özel stil kullanmama ya da giriş stillerini sıfırlayıp sıfırdan oluşturma arasında bir seçim gibi hissettirir. Sıfırdan inşa etmek, beklenenden çok daha fazla iş gerektirir. Ayrıca, öğe durumları için stillerin unutulmasına (belirsiz, size bakıyorum) ve yerleşik erişilebilirlik özelliklerinin kaybolmasına yol açabilir. Tarayıcının sağladıklarını tümüyle yeniden oluşturmak, sandığınızdan daha fazla iş gerektirebilir.

accent-color: hotpink;

CSS kullanıcı arayüzü spesifikasyonundaki CSS accent-color, öğeleri bir satır CSS ile renklendirir. Böylece markanızı öğelere dahil etmenizi sağlayarak özelleştirme çabalarından tasarruf etmenizi sağlar.

Tarayıcı Desteği

  • 93
  • 93
  • 92
  • 15,4

Kaynak

Onay kutusu, radyo düğmeleri, aralık kaydırma çubuğu ve ilerleme öğesinin hotpin renkli olduğu bir vurgu rengi demosunun açık tema ekran görüntüsü.
Tanıtım

accent-color özelliği color-scheme ile de çalışarak yazarların hem açık hem de koyu öğeleri renklendirmesine olanak tanır. Aşağıdaki örnekte, kullanıcının koyu bir tema etkin olduğu, sayfada color-scheme: light dark kullanıldığı ve koyu temalı hotpink tonlu kontroller için aynı accent-color: hotpink değeri kullanılmaktadır.

Onay kutusu, radyo düğmeleri, aralık kaydırma çubuğu ve ilerleme öğesinin hotpin renkli olduğu bir vurgu rengi demosunun koyu tema ekran görüntüsü.
Tanıtım

Desteklenen öğeler

Şu anda accent-color özelliği aracılığıyla renk tonlaması yalnızca şu şekilde yapılmaktadır: onay kutusu, radyo, aralık ve ilerleme. Bunların her birini https://accent-color.glitch.me adresinde açık ve koyu renk şemalarıyla önizleyebilirsiniz.

Onay kutusu

Radyo

Aralık

İlerleme

Kontrastı garantileme

Mevcut öğelerin erişilemez olmasını önlemek için accent-color kullanan tarayıcıların özel vurguyla birlikte kullanılacak uygun bir kontrast rengi belirlemesi gerekir. Aşağıda, Chrome 94 (solda) ile Firefox 92 Nightly (sağ) sürümünün algoritmaları arasındaki farkları gösteren ekran görüntüsü yer almaktadır:

Firefox ve Chromium'un, çeşitli tonlarda ve koyuluklarda tam bir onay kutusu yelpazesinin yan yana gösterildiği ekran görüntüsü.

Bundan çıkarılacak en önemli şey tarayıcıya güvenmektir. Markanıza renk katın ve markanızın akıllı kararlar vereceğine güvenin.

Ekstra: Daha fazla renklendirme

Bu dört form öğesinden daha fazlasının tonunu nasıl kullanacağınızı merak ediyor olabilirsiniz. Burada, tonlama yapabilen küçük bir korumalı alan gösterilmektedir:

  • odak halkası
  • metin seçimi vurguları
  • işaretçileri listeleme
  • ok göstergeleri (yalnızca Webkit)
  • kaydırma çubuğu küçük resmi (Yalnızca Firefox)
html {
  --brand: hotpink;
  scrollbar-color: hotpink Canvas;
}

:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }

:is(
  ::-webkit-calendar-picker-indicator,
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button
) {
  color: var(--brand);
}

Potansiyel gelecek

Spesifikasyon, accent-color uygulamasını bu makalede gösterilen dört öğeyle sınırlamaz. İleride daha fazla destek eklenebilir. <select> içinde seçilen <option> gibi öğeler accent-color ile vurgulanabilir.

Web'de başka hangi tonlamaları kullanmak istiyorsunuz? Seçiciyi kullanarak @argyleink hesabına tweet atarsanız hesabınız bu makaleye eklenebilir.