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

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

François Beaufort
François Beaufort
GitHub
Thomas Steiner

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.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

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

  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 Sec-CH-Prefers-Color-Scheme i Sec-CH-Prefers-Contrast wskazówki klienta, z których zgodnie z Critical-CH uznaje Sec-CH-Prefers-Color-Scheme za krytyczny wskazówkę klienta, na podstawie której zmienia odpowiedź zgodnie z 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. 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"
  4. 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

Podziękowania

Dziękujemy za cenne opinie i porady Yoav Weiss. Baner powitalny, którego autorem jest Tdadamemd, na Wikimedia Commons.