CSS “vurgu rengi”

Günümüzün HTML form öğeleri, özelleştirilmesi zor. Birkaç özel stil veya hiç özel stil arasında bir seçim yapmak veya giriş stillerini sıfırlamak ve onu sıfırdan oluşturmak gibi hissettiriyor. Sıfırdan inşa etmek, tahmin edilenden çok daha fazla iş anlamına gelir. Ayrıca öğe durumları için unutulmuş stillere yol açabilir (belirsiz, sana bakıyorum) ve yerleşik erişilebilirlik özelliklerinin kaybı. Tarayıcının sunduklarını tamamen yeniden oluşturmak, üstlenmek istediğinizden daha fazla iş olabilir.

accent-color: hotpink;

CSS accent-color dan CSS kullanıcı arabirimi özelliği Öğeleri tek bir CSS satırıyla renklendirmek için burada, markanızı öğelere ayırmanın bir yolunu sağlayarak sizi özelleştirme çabalarından kurtarıyor.

bu accent-color özellik ayrıca çalışır color-scheme, yazarların hem açık hem de koyu öğeleri renklendirmesine olanak tanır. Aşağıdaki örnekte, kullanıcının etkin bir koyu teması vardır, sayfa şunu kullanır: color-scheme: light darkve aynı şeyi kullanır accent-color: hotpink koyu temalı hotpink renkli kontroller için.

desteklenen öğeler #

Şu anda yalnızca dört öğe renklendirilecek. accent-color mülk: onay kutusu, radyo, menzil Ve ilerlemek. Her biri burada önizlenebilir açık ve koyu renk şemalarında.

onay kutusu #

Radyo #

Menzil #

İlerlemek #

Kontrastı garanti etmek #

Erişilemeyen öğelerin mevcut olmasını önlemek için, accent-color belirlemek gerekir uygun kontrast rengi özel aksanın yanında kullanılacak. Aşağıda, Chrome 94 (solda) ve Firefox 92 Nightly’nin (sağda) algoritmalarında nasıl farklılık gösterdiğini gösteren bir ekran görüntüsü verilmiştir:

Buradan çıkarılacak en önemli şey, tarayıcıya güven. Bir marka rengi sağlayın ve sizin için akıllı kararlar vereceğine güvenin.

Ekstra: Daha fazla renklendirme #

Bu dört form öğesinden daha fazlasını nasıl renklendireceğinizi merak ediyor olabilirsiniz. İşte renklendiren minimal bir sanal alan:

• odak halkası
• metin seçimi vurguları
• liste işaretleri
• ok göstergeleri (yalnızca Webkit)
• kaydırma çubuğu başparmağı (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, uygulamayı sınırlamaz accent-color Bu makalede gösterilen dört öğeye daha sonra daha fazla destek eklenebilir. Seçilen gibi öğeler &LToption> içinde &LTselect> ile vurgulanabilir. accent-color.

Web’de renklendirmek için başka neleri seviyorsunuz? Cıvıldamak @argyleink seçicinizle ve bu makaleye eklenebilir!