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 Medienfunktionen für Nutzereinstellungen wie prefers-color-scheme oder prefers-reduced-motion können sich erheblich auf die Menge an CSS auswirken, die von einer Seite gesendet werden muss, und auf die Nutzererfahrung beim Laden der Seite.

Wir konzentrieren uns hier auf prefers-color-scheme, möchten aber betonen, dass die Begründung auch für andere Medienfunktionen für Nutzereinstellungen gilt. Es ist eine Best Practice, CSS für das jeweilige nicht übereinstimmende Farbschema nicht im kritischen Rendering-Pfad zu laden, sondern stattdessen zuerst nur das aktuell relevante CSS. 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 von mehreren Client-Hinweis-Headern für Medienfunktionen mit Nutzereinstellungen, mit denen dieses Problem behoben werden soll.

Hintergrund zu Client-Hints

HTTP-Clienthinweise definieren einen Accept-CH-Antwortheader, mit dem Server ihre Verwendung von Anfrageheadern für die proaktive Inhaltsverhandlung angeben können. Diese werden auch als Clienthinweise bezeichnet. Der Vorschlag Client-Hinweise zu Medienfunktionen mit Nutzereinstellungen definiert eine Reihe von Client-Hinweisen, die Medienfunktionen mit Nutzereinstellungen übertragen sollen. Diese Clienthinweise sind nach der entsprechenden Medienfunktion für 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 in den Client-Hinweisen für die Medienfunktionen der Nutzereinstellungen vorgeschlagenen Client-Hinweise werden vermutlich am häufigsten als kritische Client-Hinweise verwendet. Kritische Client-Hints sind Client-Hints, die die resultierende Ressource erheblich ändern. Eine solche Ressource sollte bei jedem Seitenaufbau (einschließlich des ersten Seitenaufbaus) konsistent abgerufen werden, um unnötige, für Nutzer sichtbare Wechsel zu vermeiden.

Syntax für Client-Hinweise

Medienfunktionen für Nutzereinstellungen bestehen aus einem Namen (z. B. prefers-reduced-motion) und zulässigen Werten (z. B. no-preference oder reduce). Jedes Client-Hinweis-Header-Feld wird als strukturierter Header für HTTP-Objekt dargestellt, das ein Element mit dem Wert String enthält. 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 Informationen in den obigen Clienthinweisen entsprechen in Preisvergleichsportalen den Werten @media (prefers-color-scheme: dark) {} und @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-Clienthinweis-Header wird in Chromium 93 unterstützt. Der Sec-CH-Prefers-Reduced-Motion-Client-Hinweis-Header 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-Prefers-Color-Scheme: dark

Sec-CH-Prefers-Color-Scheme: light

Demo von 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 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-Clienthinweis-Header 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-Hinweise-Header für Medienfunktionen mit Nutzereinstellungen entworfen und implementiert. Dabei wurden die in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien berücksichtigt, darunter Nutzersteuerung, Transparenz und Ergonomie.

Die Sicherheitsaspekte von HTTP-Clienthinweisen und die Sicherheitsaspekte der Zuverlässigkeit von Clienthinweisen gelten ebenfalls für diesen Vorschlag.

Verweise

Danksagungen

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