Właściwość CSS color-scheme
i odpowiadający jej tag meta umożliwiają deweloperom dodanie stron do domyślnych ustawień motywu w arkuszu stylów klienta użytkownika.
Tło
Funkcja mediów prefers-color-scheme
dotycząca preferencji użytkownika
Funkcja preferencji użytkownika dotycząca multimediów prefers-color-scheme
pozwala deweloperom uzyskać pełną kontrolę nad wyglądem stron.
Jeśli nie znasz tej funkcji, przeczytaj mój artykuł
prefers-color-scheme
: Cześć ciemności, mój stary przyjacielu,
w którym udokumentowałam wszystko, co wiem o tworzeniu niesamowitych funkcji w trybie ciemnym.
Jednym z elementów układanki, który został tylko krótko wspomniany w artykule, jest właściwość CSS color-scheme
i odpowiadający jej tag meta o tej samej nazwie.
Oba ułatwiają życie deweloperom, ponieważ pozwalają na zastosowanie na stronie domyślnych ustawień motywu w arkuszu stylów klienta użytkownika, takich jak elementy sterujące formularzem, paski przewijania czy kolory systemowe CSS.
Jednocześnie ta funkcja uniemożliwia przeglądarkom samodzielnie stosowanie jakichkolwiek przekształceń.
Obsługa przeglądarek
prefers-color-scheme
color-scheme
Arkusz stylów klienta użytkownika
Zanim przejdę dalej, krótko opiszę, czym jest arkusz stylów klienta użytkownika. W większości przypadków słowo klient użytkownika (UA) jest wymyślnym sposobem na określenie przeglądarki. Szablon stylów UA określa domyślny wygląd i sposób działania strony. Jak sugeruje nazwa, arkusz stylów UA zależy od danej wersji UA. Możesz sprawdzić atrybut UA w arkuszu stylów Chrome (i Chromium) i porównać go z atrybutem UA w Firefoksie lub Safari (i WebKit). Zazwyczaj pliki stylów UA są zgodne w większości kwestii. Na przykład wszystkie mają niebieskie linki, czarny tekst i białe tło, ale są też ważne (a czasem irytujące) różnice, na przykład w stylu elementów sterujących w formularzu.
Przyjrzyj się bliżej schowalni stylów UA w WebKit i sprawdź, jak działa ona w trybie ciemnym.
(w arkuszu stylów przeprowadź pełne wyszukiwanie ciągu „ciemny”).
Domyślne ustawienie stylu zmienia się w zależności od tego, czy tryb ciemny jest włączony czy wyłączony. Aby to zilustrować, podajemy przykład reguły CSS, która używa pseudoklasy :matches
i zmiennych wewnętrznych WebKit, takich jak -apple-system-control-background
, a także wewnętrznej dyrektywy preprocesora WebKit #if defined
:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
W przypadku właściwości color
i background-color
zobaczysz niestandardowe wartości.
Ani text
, ani -apple-system-control-background
nie są prawidłowymi kolorami CSS.
Są to semantyczne kolory wewnętrzne WebKit.
Okazuje się, że CSS ma ustandaryzowane semantyczne kolory systemu.
Są one określone w CSS Color Module Level 4.
Na przykład Canvas
(nie mylić z tagiem <canvas>
) oznacza tło aplikacji lub dokumentów, podczas gdy CanvasText
jest przeznaczone dla tekstu w zawartości aplikacji lub w dokumentach.
Te 2 elementy są ze sobą powiązane i nie należy ich używać oddzielnie.
Szablony stylów UA mogą używać własnych zastrzeżonych kolorów lub kolorów ze standaryzowanego systemu semantycznego, aby określić, jak domyślnie powinny być renderowane elementy HTML.
Jeśli system operacyjny jest ustawiony na tryb ciemny lub używa ciemnego motywu, element CanvasText
(lub text
) będzie warunkowo biały, a element Canvas
(lub -apple-system-control-background
) będzie czarny.
W efekcie spowoduje to, że spersonalizowana szata UA przypisze ten kod CSS tylko raz i zapewni obsługę zarówno trybu jasnego, jak i ciemnego.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
Właściwość CSS color-scheme
Specyfikacja Modułu dostosowania kolorów CSS na poziomie 1 zawiera model i elementy sterujące automatyczną korektą kolorów przez klienta użytkownika, która ma na celu dostosowanie ich do preferencji użytkownika, takich jak tryb ciemny, korekta kontrastu czy konkretne schematy kolorów.
Zdefiniowana w niej właściwość color-scheme
pozwala elementowi wskazywać schematy kolorów, które mają być renderowane.
Wartości te są negocjowane z uwzględnieniem preferencji użytkownika, co powoduje wybraną kolorystykę, która wpływa na elementy interfejsu użytkownika (UI), takie jak domyślne kolory elementów sterujących formularzem i pasków przewijania, a także używane wartości kolorów systemu CSS.
Obecnie obsługiwane są te wartości:
normal
Wskazuje, że element nie ma pojęcia o schematach kolorów, dlatego powinien zostać wyrenderowany z użyciem domyślnego schematu kolorów przeglądarki.[ light | dark ]+
wskazuje, że element wie i może obsługiwać wymienione schematy kolorów oraz określa uporządkowaną preferencję między nimi.
Na tej liście light
oznacza jasną paletę kolorów z jasnymi kolorami tła i ciemnymi kolorami pierwszego planu, a dark
odwrotnie – ciemnymi kolorami tła i jasnymi kolorami pierwszego planu.
W przypadku wszystkich elementów renderowanie za pomocą schematu kolorów powinno powodować, że kolory używane we wszystkich elementach interfejsu obsługiwanych przez przeglądarkę będą pasować do zamierzonego schematu kolorów. Przykłady to suwaki, podkreślenia w ramach sprawdzania pisowni, elementy sterujące formularzy itp.
W przypadku elementu :root
renderowanie według schematu kolorów musi dodatkowo wpływać na kolor powierzchni obszaru roboczego (czyli globalny kolor tła), wartość początkową właściwości color
i używane wartości kolorów systemowych. Trzeba też mieć wpływ na paski przewijania widocznego obszaru.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
metatag color-scheme
,
Aby zachować zgodność z właściwością CSS color-scheme
, należy najpierw pobrać usługę porównywania cen (jeśli odwołuje się do niej za pomocą <link rel="stylesheet">
) i ją przeanalizować.
Aby ułatwić przeglądarkom renderowanie tła strony z pożądaną kolorystyką natychmiast, możesz podać wartość color-scheme
w elemencie <meta name="color-scheme">
.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
Łączę: color-scheme
i prefers-color-scheme
Zarówno metatag, jak i właściwość CSS (jeśli zastosujesz ją do elementu :root
) działają w ten sam sposób, dlatego zawsze zalecam określanie schematu kolorów za pomocą metatagu, aby przeglądarka mogła szybciej dostosować się do preferowanego schematu.
Chociaż w przypadku bezwzględnych wartości podstawowych żadne dodatkowe reguły CSS nie są wymagane, w ogólnym przypadku należy zawsze łączyć color-scheme
i prefers-color-scheme
.
Na przykład zastrzeżony kolor -webkit-link
w języku CSS WebKit, używany przez WebKit i Chrome do klasycznego niebieskiego koloru linku rgb(0,0,238)
, ma niewystarczający współczynnik kontrastu 2,23:1 na czarnym tle i nie spełnia zarówno wymagań WCAG AA, jak i WCAG AAA.
Wyeliminowaliśmy błędy w wersjach Chrome, WebKit i Firefox, a także problem z meta w standardzie HTML.
Interakcja z: prefers-color-scheme
Na początku może wydawać się, że współdziałanie właściwości CSS color-scheme
i odpowiedniego tagu meta z funkcją mediów prefers-color-scheme
dotyczącą preferencji użytkownika może być mylące.
W fakcie świetnie się razem dopełniają.
Najważniejsze jest to, że color-scheme
określa wyłącznie domyślny wygląd, podczas gdy prefers-color-scheme
określa wygląd stylizowany.
Aby sobie to wyjaśnić, załóżmy, że:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
Wbudowany kod CSS na stronie ustawia wartość background-color
elementu <fieldset>
na gainsboro
w ogólnym przypadku, a na darkslategray
, jeśli użytkownik preferuje schemat kolorów dark
zgodnie z funkcją mediów prefers-color-scheme
preferencji użytkownika.
Za pomocą elementu <meta name="color-scheme" content="dark light">
strona informuje przeglądarkę, że obsługuje ciemny i jasny motyw, przy czym preferuje ciemny.
W zależności od tego, czy system operacyjny jest w trybie ciemnym czy jasnym, cała strona jest jasna w ciemności lub odwrotnie, w zależności od arkusza stylów klienta użytkownika. Aby zmienić tekst akapitu lub kolor tła strony, nie trzeba używać dodatkowego kodu CSS dostarczonego przez programistę.
Zwróć uwagę, jak wartość background-color
elementu <fieldset>
zmienia się w zależności od tego, czy włączony jest tryb ciemny, zgodnie z regułami zawartymi w dostarczonym przez dewelopera wbudowanym arkuszu stylów na stronie.
Może to być gainsboro
lub darkslategray
.
Wygląd elementu <button>
jest kontrolowany przez arkusz stylów klienta użytkownika.
W ustawieniu color
jest ustawiony kolor ButtonText
, a ustawienia background-color
i czterech border-color
są ustawione na kolor systemu ButtonFace
.
Zwróć uwagę, jak zmienia się wartość border-color
elementu <button>
.
Obliczona wartość atrybutów border-top-color
i border-bottom-color
zmienia się z rgba(0, 0, 0, 0.847)
(czarnego) na rgba(255, 255, 255, 0.847)
(białego), ponieważ klient użytkownika aktualizuje dynamicznie atrybuty ButtonFace
na podstawie schematu kolorów.
To samo dotyczy elementu <button>
, którego właściwość color
ma ustawiony odpowiedni kolor systemu ButtonText
.
Prezentacja
Efekty zastosowania komponentu color-scheme
możesz zobaczyć w wersji demonstracyjnej Glitch w przypadku dużej liczby elementów HTML.
Wersja demonstracyjna celowo pokazuje naruszenie standardów WCAG AA i WCAG AAA z kolorami linków wymienionymi w powyższym ostrzeżeniu.
Podziękowania
Właściwość CSS color-scheme
i odpowiadający jej tag meta zostały zaimplementowane przez Rune Lillesveen.
Rune jest też współautorem specyfikacji modułu regulacji kolorów CSS na poziomie 1.
Baner powitalny autorstwa
Philippe Leone
z Unsplash.