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.
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.
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
- Der Client sendet eine erste Anfrage an den Server.
bash GET / HTTP/2 Host: example.com
- Der Server antwortet und teilt dem Client über
Accept-CH
mit, dass er dieSec-CH-Prefers-Color-Scheme
- und dieSec-CH-Prefers-Contrast
-Clienthinweise akzeptiert. GemäßCritical-CH
betrachtet erSec-CH-Prefers-Color-Scheme
als kritischen Clienthinweis, auf den er die Antwort variiert, wie inVary
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
- 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"
- 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
- Spezifikationsentwurf
- Erläuterung
- Sec-CH-Prefers-Color-Scheme – Chrome-Statuseintrag
- Sec-CH-Prefers-Color-Scheme – Chromium-Fehler
- Sec-CH-Prefers-Reduced-Motion – Chrome-Statuseintrag
- Sec-CH-Prefers-Reduced-Motion – Chromium-Fehler
- WebKit-Thread
- Mozilla-Standpunkt zu Standards
- Client-Hints
- Zuverlässigkeit von Clienthinweisen
- Media Queries Level 5
- Strukturierte Header für HTTP
Danksagungen
Vielen Dank für das wertvolle Feedback und den wertvollen Rat von Yoav Weiss. Hero-Image von Tdadamemd auf Wikimedia Commons.