Tek satırlık bir kodla yerleşik HTML formu girişlerine markanızın rengini taşıyın.
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.
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.
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:
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.