Nagłówki wskazówek dotyczących klienta dotyczące funkcji multimedialnych preferencji użytkownika

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ść.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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.

Sec-CH-Prefers-Color-Scheme: ciemny

Sec-CH-Prefers-Color-Scheme: jasny

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

  1. Klient wysyła wstępne żądanie do serwera. bash GET / HTTP/2 Host: example.com
  2. Serwer odpowiada, informując klienta za pomocą Accept-CH, że akceptuje wskazówki Sec-CH-Prefers-Color-Scheme i Sec-CH-Prefers-Contrast klienta, z których zgodnie z Critical-CH uznaje Sec-CH-Prefers-Color-Scheme za krytyczną wskazówkę klienta, a także różni się odpowiedzią przekazaną przez Vary. 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
  3. 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"
  4. 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

Podziękowania

Yoav Weiss bardzo dziękujemy za cenne opinie i porady. Baner powitalny od Tdadamemd dostępny na Wikimedia Commons.