Header für Client-Hinweise zu Medienfunktionen in Nutzereinstellungen

Mithilfe einer Reihe von Client-Hinweis-Headern können Websites die Medieneinstellungen des Nutzers optional bei der Anfrage abrufen, sodass Server aus Leistungsgründen das richtige CSS einfügen können.

François Beaufort
François Beaufort
GitHub
Thomas Steiner

CSS-Medienabfragen und insbesondere nutzereinstellungen für Medienfunktionen wie prefers-color-scheme oder prefers-reduced-motion haben möglicherweise erhebliche Auswirkungen auf die Menge an CSS, die von einer Seite bereitgestellt werden müssen, und auf die Nutzererfahrung beim Laden der Seite.

Wenn wir uns auf prefers-color-scheme konzentrieren, aber darauf hinweisen, dass die Begründung auch auf andere Medienfunktionen der Nutzer zutrifft, wird empfohlen, CSS für das jeweilige nicht übereinstimmende Farbschema im kritischen Renderingpfad nicht zu laden, sondern zuerst nur den aktuell relevanten CSS-Code zu laden. Eine Möglichkeit dazu ist über <link media>.

Websites mit hohem Traffic wie die Google Suche, die Medienfunktionen für Nutzereinstellungen wie prefers-color-scheme berücksichtigen und aus Leistungsgründen Inline-CSS verwenden, müssen das bevorzugte Farbschema (oder andere Medienfunktionen für Nutzereinstellungen) idealerweise zum Zeitpunkt der Anfrage kennen, damit in der ursprünglichen HTML-Nutzlast bereits das richtige CSS eingefügt ist.

Außerdem sollten Websites, insbesondere für prefers-color-scheme, unbedingt vermeiden, dass ein falsches Farbschema kurz eingeblendet wird.

Die Client-Hinweis-Header Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion sind die ersten einer Reihe von Client-Hinweis-Headern für Medienfunktionen mit Nutzerpräferenz, die dieses Problem lösen sollen.

Hintergrund zu Client-Hints

HTTP-Client-Hints definiert einen Accept-CH-Antwortheader, mit dem Server die Verwendung von Anfrageheadern zur proaktiven Inhaltsverhandlung bekannt geben können. Dieser Header wird auch als Client-Hinweise bezeichnet. Das Angebot Client Hints Headers für Medienfunktionen mit Nutzerpräferenz definiert eine Reihe von Clienthinweisen, die Medienfunktionen mit Nutzerpräferenz vermitteln sollen. Diese Clienthinweise sind nach der entsprechenden Medienfunktion der Nutzereinstellungen benannt, für die sie Berichte enthalten. Das derzeit bevorzugte Farbschema gemäß prefers-color-scheme wird beispielsweise über den treffend benannten Clienthinweis Sec-CH-Prefers-Color-Scheme gemeldet.

Wichtige Client-Hinweise

Die unter Client-Hints-Header für Medienfunktionen zur Nutzerpräferenz vorgeschlagenen Clienthinweise werden vermutlich am häufigsten als kritische Clienthinweise verwendet. Kritische Client-Hints sind Client-Hints, die die resultierende Ressource erheblich ändern. Eine solche Ressource sollte bei jedem Seitenaufbau konsistent abgerufen werden (einschließlich des ersten Seitenaufbaus), um für den Nutzer sichtbare Schalter zu vermeiden.

Syntax für Client-Hinweise

Medienfunktionen mit Nutzereinstellungen bestehen aus einem Namen (z. B. prefers-reduced-motion) und zulässigen Werten (z. B. no-preference oder reduce). Jedes Headerfeld für Clienthinweise wird als Strukturierte Header für HTTP dargestellt, die ein Element enthalten, dessen Wert ein String ist. Wenn Sie beispielsweise vermitteln möchten, dass der Nutzer ein dunkles Design und weniger Bewegung bevorzugt, sehen die Clienthinweise so aus wie im Beispiel unten.

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 übermittelten Informationen ist @media (prefers-color-scheme: dark) {} bzw. @media (prefers-reduced-motion: reduce) {}.

Vollständige Liste der Clienthinweise

Die Liste der Clienthinweise ist an den Medienfunktionen für Nutzereinstellungen in Media Queries Level 5 angelehnt.

Client-Hinweis Zulässige Werte Entsprechende Medienfunktion für Nutzereinstellungen
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-Header für den Clienthinweis wird in Chromium 93 unterstützt. Der Sec-CH-Prefers-Reduced-Motion-Clienthinweisheader wird in Chromium 108 unterstützt. Das Feedback anderer Anbieter, nämlich von WebKit und Mozilla, steht noch aus.

Demo von Sec-CH-Prefers-Color-Scheme

Sehen Sie sich die Demo in Chromium 93 an und achten Sie darauf, wie sich das Inline-CSS entsprechend dem bevorzugten Farbschema des Nutzers ändert.

Sec-CH-Bevorzugt-Farbschema: dunkel

Sec-CH-Prefers-Color-Scheme: light

Demo zu Sec-CH-Prefers-Reduced-Motion

Sehen Sie sich die Demo in Chromium 108 an und achten Sie darauf, wie sich das Inline-CSS entsprechend den Bewegungseinstellungen des Nutzers ändert.

Funktionsweise

  1. Der Client sendet 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-Clienthinweise akzeptiert. Gemäß Critical-CH betrachtet er Sec-CH-Prefers-Color-Scheme als kritischen Clienthinweis, auf den er die Antwort variiert, wie in Vary angegeben. 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 versucht dann noch einmal, die Anfrage zu senden und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass die Nutzereinstellung für Inhalte mit dunklem Design festgelegt ist. bash GET / HTTP/2 Host: example.com Sec-CH-Prefers-Color-Scheme: "dark"
  4. Der Server kann die Antwort dann entsprechend den Einstellungen des Clients anpassen und beispielsweise das für das dunkle Design zuständige CSS in den Antworttext einfügen.

Node.js-Beispiel

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

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 Sicherheitsaspekte

Das Chromium-Team hat Client-Hinweis-Header für Medienfunktionen mit Nutzereinstellungen unter Berücksichtigung der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, darunter Nutzersteuerung, Transparenz und Ergonomie.

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

Verweise

Danksagungen

Vielen Dank für das wertvolle Feedback und den wertvollen Rat von Yoav Weiss. Hero-Image von Tdadamemd auf Wikimedia Commons.