Kolor uzupełniający CSS

Wprowadź kolor marki we wbudowanych formularzach HTML, dodając jeden wiersz kodu.

Adam Argyle

Joey Arhar

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.