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 popularne strony, takie jak wyszukiwarka Google, które chcą wyróżnić użytkownika, preferować funkcje multimedialne, takie jak prefers-color-scheme, i wbudowany CSS ze względu na wydajność, muszą wiedzieć się o preferowanym schemacie kolorów (lub o innych preferencjach multimedialnych dotyczących funkcji) najlepiej w momencie żądania, by początkowy ładunek HTML miał już wbudowany kod CSS.

Dodatkowo, w szczególności w przypadku prefers-color-scheme, witryny powinny za wszelką cenę unikać migania nieprawidłowego motywu kolorów.

Nagłówki wskazówek dla klienta Sec-CH-Prefers-Color-Scheme i Sec-CH-Prefers-Reduced-Motion są pierwszym elementem seria nagłówków wskazówek dotyczących funkcji multimedialnych klienta dotyczących ustawień użytkownika rozwiązania tego problemu.

Wskazówki dotyczące klienta

Wskazówki klienta HTTP definiuje odpowiedź Accept-CH nagłówek, którego serwery mogą używać do rozgłaszania wykorzystania nagłówków żądań do wyświetlania treści proaktywnych potocznie nazywane wskazówkami dla klienta. Preferencje użytkownika – nagłówki wskazówek klienta dotyczących funkcji medialnych oferta pakietowa definiuje zestaw wskazówek dla klienta, które mają na celu przekazanie informacji o preferencjach użytkownika związanych z multimediami. Te wskazówki dla klientów są nazywane zgodnie z odpowiednią funkcją multimedialną ustawioną przez 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 klienta o znaczeniu krytycznym

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 klienta to wskazówki dotyczące klienta, które istotnie zmieniają powstały w ten sposób zasób. Taki zasób powinien być pobierany w sposób spójny podczas wczytywania stron (w tym wstępnego wczytania strony), aby uniknąć nieprzyjemnych dla użytkownika zmian.

Składnia wskazówek dla 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 wskazówki dla klienta jest reprezentowane przez Uporządkowane nagłówki HTTP obiekt zawierający element, którego wartość jest ciągiem znaków. Dla: Aby pokazać, że użytkownik woli ciemny motyw i ograniczony ruch, wskazówki dla klienta w poniższym przykładzie.

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 wskazówek dotyczących klienta jest modelowana na podstawie funkcjami multimedialnymi opartymi na preferencjach użytkownika w Zapytania o multimedia – poziom 5.

Wskazówka dla 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. Inni dostawcy opinii, w tym WebKit i Mozilla są w stanie oczekiwania.

Wersja demonstracyjna: Sec-CH-Prefers-Color-Scheme

Skorzystaj z demo w Chromium 93 i zobacz, jak to działa wbudowany kod CSS zmienia się zgodnie ze schematem kolorów preferowanym przez użytkownika.

Sec-CH-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Wersja demonstracyjna: Sec-CH-Prefers-Reduced-Motion

Wypróbuj demo w Chromium 108 i zobacz, jak to działa kod CSS w treści zmienia się odpowiednio do preferencji użytkownika dotyczących ruchu.

Jak to działa

  1. Klient wysyła pierwsze żądanie do serwera. bash GET / HTTP/2 Host: example.com
  2. Serwer w odpowiedzi informuje klienta za pomocą interfejsu Accept-CH, że akceptuje Sec-CH-Prefers-Color-Scheme oraz Sec-CH-Prefers-Contrast Wskazówki dla klienta, w tym zgodnie z Critical-CH uznaje usługę Sec-CH-Prefers-Color-Scheme za kluczową wskazówkę klienta, że zmienia odpowiedź na przekazywaną 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. Następnie klient ponawia próbę żądania, informując serwer za pomocą interfejsu Sec-CH-Prefers-Color-Scheme, że ma preferencje użytkowników dotyczące mrocznych treści. 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 środowiska Node.js

Poniższy przykład środowiska Node.js napisanego na potrzeby popularnej platformy Express.js pokazuje, jak wykorzystanie nagłówka wskazówki dla klienta Sec-CH-Prefers-Color-Scheme może wyglądać w praktyce. Właśnie ten kod jest wykorzystywany w przedstawionej wyżej demo.

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 dotyczące prywatności i bezpieczeństwa

Zespół Chromium zaprojektował i wdrożył nagłówki wskazówek klienta dotyczących funkcji multimedialnych funkcji preferencji użytkownika zgodnie z podstawowymi zasadami określonymi w artykule Kontrolowanie dostępu do zaawansowanej platformy internetowej funkcje, w tym kontrola użytkownika, przejrzystość i ergonomia.

Uwagi na temat bezpieczeństwa HTTP Wskazówki klienta i Uwagi na temat bezpieczeństwa dotyczące rzetelności wskazówek klienta.

Pliki referencyjne

Podziękowania

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