Zestaw nagłówków wskazówek klienta umożliwia witrynom opcjonalne pobieranie preferencji użytkownika dotyczących multimediów w momencie wysyłania żądania, co pozwala serwerom wstawiać odpowiednie pliki CSS w kod HTML ze względu na wydajność.
Definicje „media” w CSS, a w szczególności funkcje dotyczące preferencji użytkownika, takie jak prefers-color-scheme
lub prefers-reduced-motion
, mogą mieć znaczący wpływ na ilość kodu CSS, który musi być dostarczony przez stronę, oraz na wrażenia użytkownika podczas wczytywania strony.
Skupiając się na prefers-color-scheme
(ale podkreślając, że te same zasady dotyczą innych funkcji mediów dotyczących preferencji użytkownika), zalecamy, aby nie wczytywać kodu CSS dla konkretnego schematu kolorów, który nie pasuje do ścieżki renderowania krytycznego, a zamiast tego początkowo wczytywać tylko kod CSS aktualnie odpowiedni. Jednym ze sposobów jest <link media>
.
Jednak witryny o dużej liczbie użytkowników, np. wyszukiwarka Google, które chcą uwzględniać preferencje użytkowników dotyczące funkcji mediów, np. prefers-color-scheme
, oraz które ze względów związanych z wydajnością wstawiają w kod źródłowy CSS, muszą wiedzieć o preferowanej palecie kolorów (lub innych preferencjach użytkownika dotyczących mediów), najlepiej w momencie wysyłania żądania, aby początkowy ładunek HTML zawierał już odpowiedni wstawiony kod CSS.
Dodatkowo, w szczególności w przypadku prefers-color-scheme
, witryny powinny za wszelką cenę unikać migania nieprawidłowego motywu kolorystycznego.
Nagłówki wskazówek klienta Sec-CH-Prefers-Color-Scheme
i Sec-CH-Prefers-Reduced-Motion
to pierwsze z serii nagłówków wskazówek klienta dotyczących funkcji mediów z uwzględnieniem preferencji użytkownika, które mają na celu rozwiązanie tego problemu.
Wskazówki dotyczące klienta
Wskazówki HTTP dla klienta definiują nagłówek odpowiedzi Accept-CH
, którego serwery mogą używać do reklamowania korzystania z nagłówków żądań na potrzeby aktywnego negocjowania treści. Wskazówki te są potocznie nazywane wskazówkami dla klienta. Propozycja Nagłówki wskazówek klienta dotyczące funkcji mediów preferowanych przez użytkownika definiuje zestaw wskazówek klienta służących do przekazywania informacji o funkcjach mediów preferowanych przez użytkownika. Te podpowiedzi dla klienta są nazywane zgodnie z odpowiednią funkcją preferencji użytkownika, której dotyczą.
Na przykład obecnie preferowany schemat kolorów zgodnie z prefers-color-scheme
jest raportowany za pomocą odpowiedniej wskazówki dla klienta o nazwie Sec-CH-Prefers-Color-Scheme
.
Informacje o najważniejszych wskazówek dla klientów
Wskazówki klienta zaproponowane w nagłówkach wskazówek klienta dotyczących funkcji mediów z uwzględnieniem preferencji użytkownika będą prawdopodobnie najczęściej używane jako ważne wskazówki klienta. Krytyczne wskazówki dotyczące klienta to wskazówki, które w znaczący sposób zmieniają wynikowy zasób. Taki zasób powinien być pobierany w sposób spójny podczas wczytywania stron (w tym podczas wstępnego wczytania strony), aby uniknąć nieprzyjemnych dla użytkownika zmian.
Składnia podpowiedzi klienta
Funkcje multimedialne związane z preferencjami użytkownika składają się z nazwy (np. prefers-reduced-motion
) i dozwolonych wartości (np. no-preference
lub reduce
). Każde pole nagłówka podpowiedzi dla klienta jest reprezentowane jako obiekt uporządkowanych nagłówków dla HTTP, który zawiera element item, którego wartością jest ciąg znaków. Aby na przykład przekazać, że użytkownik preferuje ciemny motyw i ograniczone ruchy, możesz użyć takich wskazówek klienta jak w przykładzie poniżej.
GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"
Odpowiednikiem tych informacji w CSS są odpowiednio @media (prefers-color-scheme: dark) {}
i @media (prefers-reduced-motion: reduce) {}
.
Pełna lista wskazówek dotyczących klienta
Lista podpowiedzi klienta jest wzorowana na funkcjach mediów dotyczących preferencji użytkownika w zapytaniach o media na poziomie 5.
Wskazówka dla klienta | Dozwolone wartości | Funkcja multimedialnej preferencji użytkownika |
---|---|---|
Sec-CH-Prefers-Reduced-Motion |
no-preference , reduce |
prefers-reduced-motion |
Sec-CH-Prefers-Reduced-Transparency |
no-preference , reduce |
prefers-reduced-transparency |
Sec-CH-Prefers-Contrast |
no-preference , less , more , custom |
prefers-contrast |
Sec-CH-Forced-Colors |
active , none |
forced-colors |
Sec-CH-Prefers-Color-Scheme |
light , dark |
prefers-color-scheme |
Sec-CH-Prefers-Reduced-Data |
no-preference , reduce |
prefers-reduced-data |
Obsługa przeglądarek
Nagłówek podpowiedzi klienta Sec-CH-Prefers-Color-Scheme
jest obsługiwany w Chromium 93.
Nagłówek podpowiedzi klienta Sec-CH-Prefers-Reduced-Motion
jest obsługiwany w Chromium 108.
Opinie innych dostawców, w tym WebKit i Mozilla, są oczekujące.
Demo Sec-CH-Prefers-Color-Scheme
Wypróbuj demo w Chromium 93 i zobacz, jak wbudowany kod CSS zmienia się zgodnie z preferowanym schematem kolorów użytkownika.
Demo Sec-CH-Prefers-Reduced-Motion
Wypróbuj demo w Chromium 108 i zobacz, jak wbudowany kod CSS zmienia się zgodnie z preferencjami użytkownika dotyczącymi animacji.
Jak to działa
- Klient wysyła wstępne żądanie do serwera.
bash GET / HTTP/2 Host: example.com
- Serwer odpowiada, informując klienta za pomocą
Accept-CH
, że akceptujeSec-CH-Prefers-Color-Scheme
iSec-CH-Prefers-Contrast
wskazówki klienta, z których zgodnie zCritical-CH
uznajeSec-CH-Prefers-Color-Scheme
za krytyczny wskazówkę klienta, na podstawie której zmienia odpowiedź zgodnie zVary
.bash HTTP/2 200 OK Content-Type: text/html Accept-CH: Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Contrast Vary: Sec-CH-Prefers-Color-Scheme Critical-CH: Sec-CH-Prefers-Color-Scheme
- Następnie klient ponawia próbę żądania i informuje serwer w interfejsie
Sec-CH-Prefers-Color-Scheme
, że ma preferencje użytkownika dotyczące treści wykorzystujących ciemny schemat.bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
- Serwer może wtedy dostosować odpowiedź do preferencji klienta i na przykład wstawić do treści odpowiedzi kod CSS odpowiedzialny za ciemny motyw.
Przykład Node.js
Poniżej przedstawiamy przykład kodu Node.js napisanego dla popularnej platformy Express.js. Pokazuje on, jak w praktyce można pracować z nagłówkiem podpowiedzi klienta Sec-CH-Prefers-Color-Scheme
.
To właśnie ten kod obsługuje prezentację przedstawioną powyżej.
app.get("/", (req, res) => {
// Tell the client the server accepts the `Sec-CH-Prefers-Color-Scheme` client hint…
res.set("Accept-CH", "Sec-CH-Prefers-Color-Scheme");
// …and that the server's response will vary based on its value…
res.set("Vary", "Sec-CH-Prefers-Color-Scheme");
// …and that the server considers this client hint a _critical_ client hint.
res.set("Critical-CH", "Sec-CH-Prefers-Color-Scheme");
// Read the user's preferred color scheme from the headers…
const prefersColorScheme = req.get("sec-ch-prefers-color-scheme");
// …and send the adequate HTML response with the right CSS inlined.
res.send(getHTML(prefersColorScheme));
});
Kwestie związane z ochroną prywatności i bezpieczeństwem
Zespół Chromium zaprojektował i wdrożył nagłówki wskazówek klienta dotyczących funkcji multimedialnych funkcji użytkownika, kierując się podstawowymi zasadami określonymi w artykule Kontrola dostępu do zaawansowanych funkcji platform internetowych, takimi jak kontrola użytkownika, przejrzystość i ergonomia.
Do tej oferty pakietowej mają też zastosowanie Uwagi dotyczące bezpieczeństwa wskazówek dla klientów HTTP oraz uwagi dotyczące bezpieczeństwa związane z niezawodnością wskazówek klienta.
Pliki referencyjne
- Specyfikacja w wersji roboczej
- Wyjaśnienie
- Sec-CH-Prefers-Color-Scheme – wpis w Informacjach o Chrome
- Sec-CH-Prefers-Color-Scheme – błąd w Chromium
- Sec-CH-Prefers-Reduced-Motion – wpis w Informacjach o Chrome
- Sec-CH-Prefers-Reduced-Motion – błąd w Chromium
- Wątek WebKit
- Mozilla Standards Position
- Wskazówki dla klienta
- Niezawodność wskazówek dotyczących klienta
- Media Queries Level 5
- Uporządkowane nagłówki HTTP
Podziękowania
Dziękujemy za cenne opinie i porady Yoav Weiss. Baner powitalny, którego autorem jest Tdadamemd, na Wikimedia Commons.