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 preferowanych przez 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 informowania o używaniu 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 multimediów i preferencji użytkownika definiuje zestaw wskazówek klienta służących do przekazywania informacji o funkcjach multimediów i preferencjach 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.

Wskazówki dotyczące kluczowych 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 przełączeń.

Składnia podpowiedzi klienta

Funkcje mediów dotyczące 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ówki klienta jest reprezentowane jako obiekt strukturowanych nagłówków HTTP zawierający element, którego wartość jest ciągiem znaków. Aby na przykład przekazać, że użytkownik preferuje ciemny motyw i ograniczone ruchy, możesz użyć wskazówek klienta, które wyglądają tak 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 podpowiedzi 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 dotycząca klienta Dozwolone wartości Odpowiadająca funkcja mediów w ustawieniach 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 pierwsze żą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 powtarza żądanie, informując serwer za pomocą Sec-CH-Prefers-Color-Scheme, że użytkownik preferuje treści w ciemnym schemacie kolorów. 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 w Node.js

Przykład Node.js poniżej, napisany dla popularnej platformy Express.js, pokazuje, 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 prywatnością i bezpieczeństwem

Zespół Chromium opracował i wdrożył nagłówki User Preference Media Features Client Hints, stosując się do podstawowych zasad określonych w dokumentacji Controlling Access to Powerful Web Platform Features (Kontrolowanie dostępu do funkcji platformy internetowej) dotyczących m.in. kontroli użytkownika, przejrzystości i ergonomii.

Do tej propozycji odnoszą się również Uwagi dotyczące bezpieczeństwa w sekcji Wskazówki dla klienta HTTP oraz Uwagi dotyczące bezpieczeństwa w sekcji Rzetelność wskazówek dla klienta.

Pliki referencyjne

Podziękowania

Dziękujemy za cenne opinie i porady Yoav Weiss. Baner powitalny autorstwa Tdadamemd na Wikimedia Commons.