Kolor uzupełniający CSS

Dodaj kolor marki do wbudowanych danych wejściowych formularza HTML za pomocą jednego wiersza kodu.

Adam Argyle

Joey Arhar

Dzisiejsze elementy formularzy HTML są trudne do lub dostosować. Mam wrażenie, wybór spośród kilku stylów niestandardowych lub brak ich albo zresetowanie stylów wprowadzania i stworzyć go od podstaw. Budowanie od zera działa o wiele niż się spodziewaliśmy. Może to też prowadzić do zapomnienia stylów elementów (nieokreślone, Patrzę na Ciebie) i utratę wbudowanych funkcji ułatwień dostępu. Aby w pełni odtworzyć to, co oferuje przeglądarka, które Cię interesują.

accent-color: hotpink;

CSS accent-color z interfejsu CSS specyfikacja jest tu, aby zabarwić z jednym wierszem kodu CSS, co pozwala uniknąć konieczności dostosowywania zapewniając Ci sposób na wcielenie Twojej marki w elementy.

Właściwość accent-color działa też z color-scheme, dzięki czemu autorzy mogą na różne kolory jasne i ciemne elementy. W poniższym przykładzie użytkownik ma aktywny ciemny motyw, strona używa color-scheme: light dark i używa tego samego ustawienia accent-color: hotpink jako ciemne tematyczne elementy sterujące w kolorze hotróżowym.

Obsługiwane elementy

Obecnie tylko 4 elementy będą miały odcień za pomocą właściwości accent-color: pole wyboru, radio, zakres i postępu. Tutaj możesz zobaczyć podgląd każdego z nich https://accent-color.glitch.me w jasnym ciemne schematy kolorów.

Pole wyboru

Radio

Zakres

Postęp

Zapewnianie kontrastu

Aby zapobiec wyświetlaniu niedostępnych elementów, przeglądarki z atrybutem accent-color muszą określić odpowiedni kontrast, color, który będzie używany razem z kartą niestandardową. akcent. Poniżej znajduje się zrzut ekranu pokazujący, jak Chrome 94 (po lewej) i Firefox 92 Nocne (po prawej) różnią się algorytmami:

Najważniejszą rzeczą, jaką należy wyciągnąć, jest zaufanie przeglądarce. Podaj kolor marki i upewnij się, że będzie on podejmował 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, która ma odpowiedni odcień:

• pierścień ostrości
• wyróżnienia zaznaczonego tekstu
• wyświetlić listę znaczników
• wskaźniki strzałek (tylko Webkit)
• miniatura 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 atrybutu accent-color do 4 elementów więcej wskazówek można dodać później. Elementy takie jak wybrane <option> w <select> może zostać podświetlone accent-color

Co jeszcze chcesz zabarwiać w internecie? Tweetnij @argyleink za pomocą selektora, aby uzyskać efekt, dodany do tego artykułu.