Sec-CH-Prefers-Color-Scheme header
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Der HTTP Sec-CH-Prefers-Color-Scheme Request-Header ist ein Client-Hinweis für Medienmerkmale, der die Vorliebe des Benutzers für helle oder dunkle Farbthemen bereitstellt. Ein Benutzer gibt seine Präferenz über eine Einstellung des Betriebssystems (zum Beispiel, Licht- oder Dunkelmodus) oder eine Benutzeragenten-Einstellung an.
Wenn ein Server einem Client über den Accept-CH Header signalisiert, dass er Sec-CH-Prefers-Color-Scheme akzeptiert, kann der Client darauf mit diesem Header antworten, um die Vorliebe des Benutzers für ein bestimmtes Farbschema anzugeben. Der Server kann daraufhin dem Client entsprechend angepassten Inhalt senden, einschließlich Bildern oder CSS, um einen hellen oder dunklen Modus für den nachfolgenden gerenderten Inhalt darzustellen.
Dieser Header ist an die prefers-color-scheme Media-Query angelehnt.
| Header-Typ | Request-Header, Client-Hinweis |
|---|---|
| Verbotener Request-Header | Ja (Sec- Präfix) |
Nutzungshinweise
Der Sec-CH-Prefers-Color-Scheme Header ermöglicht es Seiten, die Farbvorliebe des Benutzers zur Anforderungszeit zu ermitteln; sie könnten dann wählen, das relevante CSS für die Vorliebe des Benutzers aus Leistungsgründen inline bereitzustellen. Wenn der Server das CSS inline bereitstellt, könnte er auch einen Vary Antwort-Header einschließen, der Sec-CH-Prefers-Color-Scheme spezifiziert, um anzuzeigen, dass die Antwort für ein bestimmtes Farbschema optimiert ist.
Wenn die Leistung in diesem Zusammenhang keine kritische Rolle spielt, könnten Sie stattdessen die Farbvorliebe des Benutzers mit der prefers-color-scheme Media-Query und/oder der Window.matchMedia() API verarbeiten.
Sec-CH-Prefers-Color-Scheme ist ein High-Entropy-Hinweis, daher muss die Seite den Empfang durch das Senden eines entsprechenden Accept-CH Antwort-Headers aktivieren. Ein Benutzeragent kann den Sec-CH-Prefers-Color-Scheme Header absichtlich weglassen, um die Privatsphäre des Benutzers zu schützen, da die Vorliebe theoretisch zum Fingerprinting genutzt werden könnte.
Syntax
Sec-CH-Prefers-Color-Scheme: <preference>
Direktiven
<preference>-
Ein String, der die Vorliebe des Benutzeragenten für dunklen oder hellen Inhalt angibt:
"light"oder"dark". Der Wert kann von einer entsprechenden Einstellung im zugrunde liegenden Betriebssystem stammen.
Beispiele
Verwendung von Sec-CH-Prefers-Color-Scheme
Der Client sendet eine erste Anfrage an den Server:
GET / HTTP/1.1
Host: example.com
Der Server antwortet und teilt dem Client über Accept-CH mit, dass er Sec-CH-Prefers-Color-Scheme akzeptiert. In diesem Beispiel wird auch Critical-CH verwendet, was darauf hinweist, dass Sec-CH-Prefers-Color-Scheme als kritischer Client-Hinweis betrachtet wird.
HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Color-Scheme
Vary: Sec-CH-Prefers-Color-Scheme
Critical-CH: Sec-CH-Prefers-Color-Scheme
Hinweis:
Wir haben auch Sec-CH-Prefers-Color-Scheme im Vary Header angegeben, um anzuzeigen, dass Antworten basierend auf dem Wert dieses Headers separat zwischengespeichert werden sollten (selbst wenn die URL gleich bleibt).
Jeder im Critical-CH Header aufgeführte Header sollte auch in den Accept-CH und Vary Headers vorhanden sein.
Der Client wiederholt automatisch die Anfrage (da Critical-CH oben angegeben wurde) und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass es eine Benutzervorliebe für dunklen Inhalt gibt:
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Der Client wird den Header in nachfolgenden Anfragen in der aktuellen Session einbeziehen, es sei denn, die Accept-CH ändert sich in den Antworten, um anzuzeigen, dass sie nicht mehr vom Server unterstützt wird.
Spezifikationen
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |