Header für Client-Hinweise zu Medienfunktionen in Nutzereinstellungen

Eine Reihe von Client-Hinweis-Headern ermöglicht es Websites, die Medieneinstellungen des Nutzers optional zum Zeitpunkt der Anfrage abzurufen. So können Server aus Leistungsgründen das richtige CSS inline einfügen.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS-Medienabfragen und insbesondere Medienfunktionen der Nutzerpräferenz wie prefers-color-scheme oder prefers-reduced-motion haben potenziell erhebliche Auswirkungen auf die Menge an CSS, die von einer Seite bereitgestellt werden muss, und auf die Nutzererfahrung beim Laden der Seite.

Wenn Sie den Schwerpunkt auf prefers-color-scheme legen, aber hervorheben, dass die Begründung auch für andere Medienfunktionen der Nutzerpräferenz gilt, sollten Sie CSS für das spezifische, nicht übereinstimmende Farbschema im kritischen Rendering-Pfad nicht laden, sondern anfangs nur den aktuell relevanten CSS-Code laden. Eine Möglichkeit dazu ist über <link media>.

Stark frequentierte Websites wie die Google Suche, die Medienfunktionen der Nutzerpräferenz wie prefers-color-scheme und Inline-CSS aus Leistungsgründen berücksichtigen möchten, müssen jedoch idealerweise zum Zeitpunkt der Anfrage über das bevorzugte Farbschema (oder andere Medienfunktionen der Nutzerpräferenz) Bescheid wissen, damit in der anfänglichen HTML-Nutzlast bereits das richtige CSS enthalten ist.

Außerdem, insbesondere bei prefers-color-scheme, sollten Websites auf jeden Fall ein Aufblinken eines falschen Farbdesigns vermeiden.

Die Sec-CH-Prefers-Color-Scheme- und Sec-CH-Prefers-Reduced-Motion-Clienthinweisheader sind die ersten einer Reihe von Clienthinweisheadern zu Nutzerpräferenzen für Medienfunktionen, mit denen dieses Problem behoben werden soll.

Hintergrundinformationen zu Clienthinweisen

HTTP-Client-Hinweise definieren einen Accept-CH-Antwortheader, mit dem Server die Verwendung von Anfrageheadern für die proaktive Inhaltsverhandlung bekanntgeben können. Diese werden umgangssprachlich auch als Clienthinweise bezeichnet. Der Vorschlag Client Hints Headers für Nutzerpräferenzen für Medienfunktionen definiert eine Reihe von Clienthinweisen zur Vermittlung von Medienfunktionen der Nutzerpräferenz. Diese Clienthinweise sind nach der entsprechenden Medienfunktion für Nutzereinstellungen benannt, für die sie Berichte erstellen. Das aktuell bevorzugte Farbschema gemäß prefers-color-scheme wird beispielsweise über den gut benannten Sec-CH-Prefers-Color-Scheme-Clienthinweis gemeldet.

Hintergrundinformationen zu wichtigen Kundenhinweisen

Die in den Headern für Client-Hinweise zu Nutzereinstellungen für Medienfunktionen vorgeschlagenen Clienthinweise werden voraussichtlich am häufigsten als Critical Client Hints verwendet. Kritische Clienthinweise sind Clienthinweise, die die resultierende Ressource erheblich ändern. Eine solche Ressource sollte beim Seitenaufbau konsistent abgerufen werden (einschließlich des initial Seitenaufbaus), um irritierte Schalter für den Nutzer zu vermeiden.

Client-Hinweissyntax

Medienfunktionen der Nutzerpräferenz bestehen aus einem Namen (z. B. prefers-reduced-motion) und zulässigen Werten (z. B. no-preference oder reduce). Jedes Header-Feld des Clienthinweiss wird als Structured Headers for HTTP-Objekt dargestellt, das ein Element enthält, dessen Wert ein String ist. Um beispielsweise zu vermitteln, dass der Nutzer ein dunkles Design und weniger Bewegung bevorzugt, sehen die Client-Hinweise im folgenden Beispiel aus.

GET / HTTP/2
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Sec-CH-Prefers-Reduced-Motion: "reduce"

Die CSS-Entsprechung zu den in den obigen Clienthinweisen vermittelten Informationen ist @media (prefers-color-scheme: dark) {} bzw. @media (prefers-reduced-motion: reduce) {}.

Vollständige Liste der Clienthinweise

Die Liste der Clienthinweise ist den Medienfunktionen der Nutzerpräferenz in Medienabfrageebene 5 modelliert.

Kundenhinweis Zulässige Werte Entsprechende Medienfunktion für Nutzerpräferenzen
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

Unterstützte Browser

Der Sec-CH-Prefers-Color-Scheme-Client-Hinweisheader wird in Chromium 93 unterstützt. Der Sec-CH-Prefers-Reduced-Motion-Client-Hinweisheader wird in Chromium 108 unterstützt. Das Feedback anderer Anbieter, insbesondere von WebKit und Mozilla, steht noch aus.

Demo von Sec-CH-Prefers-Color-Scheme

Sehen Sie sich die Demo in Chromium 93 an und beobachten Sie, wie sich das Inline-CSS an das bevorzugte Farbschema des Nutzers anpasst.

Sec-CH-Bevorzugt-Farbschema: dunkel

Sec-CH-Bevorzugt-Farbschema: hell

Demo von Sec-CH-Prefers-Reduced-Motion

Sieh dir die Demo in Chromium 108 an und beobachte, wie sich der Inline-CSS-Code je nach Bewegungseinstellungen des Nutzers ändert.

Funktionsweise

  1. Der Client stellt eine erste Anfrage an den Server. bash GET / HTTP/2 Host: example.com
  2. Der Server antwortet und teilt dem Client über Accept-CH mit, dass er die Sec-CH-Prefers-Color-Scheme- und die Sec-CH-Prefers-Contrast-Client-Hinweise akzeptiert. Von diesen wird Sec-CH-Prefers-Color-Scheme gemäß Critical-CH als kritischer Client-Hinweis eingestuft, dass auch die von Vary übermittelte Antwort variiert. 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. Der Client wiederholt dann die Anfrage und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass er eine Nutzereinstellung für Inhalte mit Dark-Schemata hat. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Der Server kann dann die Antwort entsprechend an die Präferenzen des Clients anpassen und beispielsweise das für das dunkle Design zuständige CSS im Antworttext einbetten.

Node.js-Beispiel

Das folgende Node.js-Beispiel, das für das beliebte Express.js-Framework geschrieben wurde, zeigt, wie der Umgang mit dem Sec-CH-Prefers-Color-Scheme-Clienthinweisheader in der Praxis aussehen könnte. Dieser Code wird für die Demo oben verwendet.

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));
});

Datenschutz und Sicherheit

Das Chromium-Team hat die Hinweis-Header für die bevorzugten Medienfunktionen für Nutzer anhand der unter Zugriff auf leistungsstarke Webplattformfunktionen steuern definierten grundlegenden Prinzipien wie Nutzersteuerung, Transparenz und Ergonomie entwickelt und implementiert.

Die Sicherheitsaspekte von HTTP-Clienthinweisen und die Sicherheitsaspekte der Zuverlässigkeit von Clienthinweisen gelten gleichermaßen für dieses Angebot.

Verweise

Danksagungen

Vielen Dank für dein wertvolles Feedback und die Ratschläge von Yoav Weiss. Hero-Image von Tdadamemd auf Wikimedia Commons