Zestaw nagłówków wskazówek dla klienta umożliwia witrynom opcjonalnie uzyskiwanie preferencji multimediów użytkownika w momencie żądania. Dzięki temu serwery mogą wbudować odpowiedni kod CSS, aby zwiększyć wydajność.
Zapytania o media CSS, a w szczególności funkcje multimediów związane z ustawieniami użytkownika, takie jak prefers-color-scheme
czy prefers-reduced-motion
, mają potencjalnie
istotny wpływ na liczbę elementów CSS potrzebnych do wyświetlenia strony oraz na wrażenia użytkownika po jej wczytaniu.
Skup się na prefers-color-scheme
, ale podkreśl, że rozumowanie odnosi się również do innych funkcji multimedialnych wybranych przez użytkownika, dlatego sprawdzoną metodą jest niewczytywanie CSS w przypadku konkretnego niepasującego schematu kolorów na krytycznej ścieżce renderowania i wstępne wczytywanie tylko aktualnie właściwego kodu CSS. Możesz to zrobić na przykład za pomocą aplikacji <link media>
.
Jednak witryny o dużej liczbie wizyt, takie jak wyszukiwarka Google, które ze względu na wydajność chcą uwzględniać funkcje multimedialne, takie jak prefers-color-scheme
czy wbudowane CSS, muszą w momencie żądania określić preferowany schemat kolorów (lub inne funkcje multimedialne używane przez użytkownika), tak aby początkowy ładunek HTML miał już w tekście właściwy kod CSS.
Dodatkowo w przypadku prefers-color-scheme
witryny za każdym razem chcą uniknąć przebłysku niedokładnego motywu kolorystycznego.
Nagłówki wskazówek dla klienta Sec-CH-Prefers-Color-Scheme
i Sec-CH-Prefers-Reduced-Motion
to pierwsze z serii nagłówków multimediów ze wskazówkami dla użytkowników, które mają na celu rozwiązanie tego problemu.
Informacje ogólne na temat wskazówek dla klientów
Wskazówki klienta HTTP definiuje nagłówek odpowiedzi Accept-CH
, którego serwery mogą używać do informowania o korzystaniu z nagłówków żądań na potrzeby proaktywnego negocjowania treści. Potocznie określa się je jako wskazówki dla klienta. Propozycja nagłówków wskazówek klienta dotyczących preferencji użytkownika definiuje zestaw wskazówek dotyczących klienta, które mają na celu przedstawienie funkcji multimedialnych preferencji użytkownika. Nazwy tych wskazówek dla klientów pochodzą z odpowiednich funkcji multimediów preferencji użytkownika, które są uwzględniane w raportach.
Na przykład obecnie preferowany schemat kolorów zgodnie z zasadą prefers-color-scheme
jest raportowany za pomocą odpowiednio nazwanej wskazówki dla klienta Sec-CH-Prefers-Color-Scheme
.
Podstawowe informacje na temat najważniejszych wskazówek dla klientów
Wskazówki klienta proponowane w sekcji Nagłówki podpowiedzi klienta w funkcjach użytkownika dotyczących użytkownika są przypuszczalnie używane jako krytyczne wskazówki dotyczące klienta. Krytyczne wskazówki dotyczące klienta to wskazówki, które znacząco zmieniają powstały zasób. Taki zasób powinien być pobierany w spójny sposób po każdym wczytaniu stron (w tym podczas initial wczytywania strony), aby uniknąć niepotrzebnych przełączników widocznych dla użytkowników.
Składnia wskazówek klienta
Funkcje multimediów preferencji 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 wskazówek klienta jest reprezentowane jako
Structured Headers for HTTP
object HTTP
zawierający element item, którego wartość jest ciągiem. Aby na przykład poinformować, że użytkownik woli ciemny motyw i ograniczony ruch, wskazówki dla klienta wyglądają jak w poniższym przykładzie.
GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"
Odpowiednikiem CSS informacji przekazanych we wskazówkach dla klienta jest odpowiednio @media (prefers-color-scheme: dark) {}
i @media (prefers-reduced-motion: reduce) {}
.
Pełna lista wskazówek dotyczących klienta
Lista wskazówek dla klientów jest modelowana na podstawie funkcji multimediów związanych z preferencjami użytkownika na poziomie zapytań o media na poziomie 5.
Podpowiedź klienta | Dozwolone wartości | Odpowiednia funkcja multimediów dotycząca 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ługiwane przeglądarki
Nagłówek wskazówki dla klienta Sec-CH-Prefers-Color-Scheme
jest obsługiwany w Chromium 93.
Nagłówek wskazówki dla klienta Sec-CH-Prefers-Reduced-Motion
jest obsługiwany w Chromium 108.
oczekujemy na opinie innych dostawców, czyli WebKit's i Mozilla.
Demonstracja: Sec-CH-Prefers-Color-Scheme
Wypróbuj prezentację w Chromium 93 i zobacz, jak kod CSS w tekście zmienia się zgodnie ze schematem kolorów preferowanym przez użytkownika.
Demonstracja: Sec-CH-Prefers-Reduced-Motion
Wypróbuj prezentację w Chromium 108 i sprawdź, jak kod CSS w treści zmienia się w zależności od preferencji dotyczących ruchu użytkownika.
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 akceptuje wskazówkiSec-CH-Prefers-Color-Scheme
iSec-CH-Prefers-Contrast
klienta, z których zgodnie zCritical-CH
uznajeSec-CH-Prefers-Color-Scheme
za krytyczną wskazówkę klienta, a także różni się odpowiedzią przekazaną przezVary
.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
- Klient ponawia żądanie, informując serwer za pomocą
Sec-CH-Prefers-Color-Scheme
, że ma preferencje użytkownika dotyczące treści utworzonych w ciemnym schemacie.bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
- Serwer może wtedy odpowiednio dostosować odpowiedź do preferencji klienta i na przykład umieścić w treści odpowiedzi kod CSS odpowiedzialny za ciemny motyw.
Przykład środowiska Node.js
Poniższy przykład Node.js, stworzony na potrzeby popularnej platformy Express.js, pokazuje, jak może wyglądać w praktyce korzystanie z nagłówka wskazówki dla klienta Sec-CH-Prefers-Color-Scheme
.
To właśnie na nim opiera się ta prezentacja.
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 prywatnością i bezpieczeństwem
Zespół Chromium zaprojektował i wdrożył nagłówki nagłówków wskazówek dotyczących preferencji użytkownika zgodnie z podstawowymi zasadami określonymi w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym dotyczących kontroli użytkownika, przejrzystości i ergonomii.
Do tej oferty pakietowej mają też zastosowanie uwagi dotyczące bezpieczeństwa wskazówek dla klientów HTTP oraz uwagi dotyczące bezpieczeństwa w zakresie niezawodności podpowiedzi klienta.
Źródła
- Wersja robocza specyfikacji
- Wyjaśnienie
- Sec-CH-Prefers-Color-Scheme – wpis stanu Chrome
- Sec-CH-Prefers-Color-Scheme – błąd Chromium
- Sec-CH-Prefers-Reduced-Motion – wpis stanu Chrome
- Sec-CH-Prefers-Reduced-Motion – błąd Chromium
- Wątek dotyczący WebKit
- Stanowisko w standardzie Mozilla
- Wskazówki dla klientów
- Niezawodność podpowiedzi klienta
- Zapytania o multimedia – poziom 5
- Uporządkowane nagłówki dla HTTP
Podziękowania
Yoav Weiss bardzo dziękujemy za cenne opinie i porady. Baner powitalny od Tdadamemd dostępny na Wikimedia Commons.