Wprowadź kolor marki we wbudowanych formularzach HTML, dodając jeden wiersz kodu.
Współczesne elementy formularzy HTML trudno dostosować. Mam wrażenie, że trzeba wybrać niewiele niestandardowych stylów lub ich wcale albo zresetować style danych wejściowych i stworzyć je od zera. Stworzenie go od zera staje się o wiele bardziej pracochłonne, niż się spodziewaliśmy. Może to również prowadzić do zapomnienia stylów stanów elementów (nieokreślony, patrzę na Ciebie) i utraty wbudowanych ułatwień dostępu. Pełne odtworzenie funkcji przeglądarki może być bardziej pracochłonne.
accent-color: hotpink;
CSS accent-color
ze specyfikacji interfejsu CSS umożliwia zabarwienie elementów za pomocą 1 wiersza kodu CSS, co pozwoli Ci zaoszczędzić na wykorzystywaniu możliwości dostosowywania przez zapewnienie sposobu umieszczania marki w elementach.
Właściwość accent-color
działa też z color-scheme
, umożliwiając autorom zabarwianie zarówno jasnych, jak i ciemnych elementów.
W poniższym przykładzie użytkownik ma aktywny ciemny motyw, strona używa właściwości color-scheme: light dark
oraz tego samego parametru accent-color: hotpink
w przypadku ustawień zabarwionych ciemnym różowym motywem.
Obsługiwane elementy
Obecnie za pomocą właściwości accent-color
wyświetlane są tylko 4 elementy: pole wyboru, radio, zakres i postęp. Podgląd każdego z nich możesz zobaczyć tutaj https://accent-color.glitch.me w jasnych i ciemnych schematach kolorów.
Pole wyboru
Radio
Zakres
Postęp
Gwarantowanie kontrastu
Aby zapobiec wyświetlaniu niedostępnych elementów w istniejących już elementach, przeglądarki z atrybutem accent-color
muszą określić odpowiedni kolor kontrastu, który będzie używany razem z niestandardowymi akcentami. Poniżej znajdziesz zrzut ekranu przedstawiający różnice w algorytmach Chrome 94 (po lewej) i Firefox 92 Nightly (po prawej):
Najważniejsze jest to, by zaufać przeglądarce. Wybierz kolor marki i uwierz, że podejmuje on mądre decyzje za Ciebie.
Dodatkowo: więcej kolorów
Być może zastanawiasz się, jak zabarwić więcej niż 4 elementy formularza? Oto minimalna piaskownica z odcieniami:
- pierścień ostrości
- wyróżnienia zaznaczonego tekstu
- wyświetlanie listy znaczników
- wskaźniki strzałek (tylko Webkit)
- kciuk paska przewijania (tylko 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);
}
Potencjalna przyszłość
Specyfikacja nie ogranicza zastosowania zasady accent-color
do 4 elementów przedstawionych w tym artykule. Później możemy dodać więcej funkcji. Elementy takie jak <option>
w elemencie <select>
mogą zostać wyróżnione za pomocą accent-color
.
Co jeszcze chcesz ubarwić w internecie? Wyślij tweeta @argyleink za pomocą selektora, a być może zostanie on dodany do tego artykułu.