CSS vurgu rengi

Tek satır kodla markanızın rengini yerleşik HTML formu girişlerine katın.

Adam Argyle

Joey Arhar

Günümüzde kullanılan HTML form öğelerinin özelleştirin. Sanki özel stil seçme veya hiç özel stil kullanmama ya da giriş stillerini sıfırlama ve baştan inşa etmemize yardımcı olur. Her şeyi sıfırdan oluşturmak, daha sonra biraz daha fazla zaman harcıyor. Öğe durumları için stillerin unutulmasına da yol açabilir (belirsiz, Sana bakıyorum) ve yerleşik erişilebilirlik özelliklerinin kullanımdan kaldırılması. Tarayıcının sağladığı şeyi tam anlamıyla yeniden oluşturmak için biraz zaman alabilir.

accent-color: hotpink;

CSS kullanıcı arayüzünden CSS accent-color spesifikasyon, tonlamaya gelir öğelerini tek satırlık bir CSS ile ekleyebilirsiniz. Böylece, Bu, markanızı öğelere taşımanın bir yolunu sunar.

accent-color özelliği şunlarla da çalışır: color-scheme, yazarların her iki rengi de renklendirmesine olanak tanır açık ve koyu öğeleri içerir. Aşağıdaki örnekte kullanıcının koyu tema etkin olduğu için sayfa color-scheme: light dark ve koyu renk için aynı accent-color: hotpink değerini kullanır temalı hotpink renkli kontroller.

Desteklenen öğeler

Şu anda yalnızca dört öğenin tonlaması accent-color özelliği aracılığıyla yapılır: onay kutusu, radyo, aralık ve İlerleme. Her biri buradan önizlenebilir Açık renkli ve https://accent-color.glitch.me koyu renk şemaları.

Onay kutusu

Radyo

Aralık

İlerleme

Kontrast garanti ediliyor

Mevcut erişilemeyen öğeleri engellemek için accent-color kullanan tarayıcılar bir kontrast ve karşılaştırma renk ekleyebilirsiniz. aksanı ekleyin. Aşağıda, Chrome 94 (solda) ve Firefox 92'nin nasıl çalıştığını gösteren bir ekran görüntüsü verilmiştir Gecelik (sağda) algoritmalar arasında farklılık gösterir:

Bundan çıkarılacak en önemli nokta, tarayıcıya güvenmektir. Bir marka rengi sağlayın ve sizin için akıllıca kararlar vereceğine güvenin.

Ekstra: Daha fazla renklendirme

Bu dört form öğesinden daha fazla tonlamayı nasıl yapacağınızı merak ediyor olabilirsiniz. Buradan renk tonlamayı sağlayan minimal bir korumalı alan:

• odak halkası
• metin seçiminde vurgulamalar
• liste işaretçileri
• ok göstergeleri (yalnızca Webkit)
• kaydırma çubuğunun 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

Bu spesifikasyon, accent-color işlevinin dört öğe ile uygulanmasını sınırlamamaktadır. daha fazla destek sağlanabilir. Şunun gibi elementler: <select> içindeki seçili <option> şu şekilde vurgulanabilir: accent-color.

Web'de başka neleri tonlamayı seviyorsunuz? Tweet at @argyleink ifadesini eklemeniz yeterlidir. bu makaleye eklendi!