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-Anforderungsheader ist ein Media Feature Client-Hinweis, der die Benutzerpräferenz für helle oder dunkle Farbthemen angibt. Ein Benutzer gibt seine Präferenz über eine Betriebssystemeinstellung (zum Beispiel, Licht- oder Dunkelmodus) oder eine Benutzereinstellung an.
Wenn ein Server dem Client über den Accept-CH-Header signalisiert, dass er Sec-CH-Prefers-Color-Scheme akzeptiert, kann der Client mit diesem Header antworten, um die Benutzerpräferenz für ein bestimmtes Farbschema anzugeben. Der Server kann dann entsprechend angepasste Inhalte senden, einschließlich Bildern oder CSS, um einen Licht- oder Dunkelmodus für die anschließend gerenderten Inhalte anzuzeigen.
Dieser Header ist an die prefers-color-scheme-Media-Query angelehnt.
| Header-Typ | Anforderungsheader, Client-Hinweis |
|---|---|
| Verbotener Anforderungsheader | Ja (Sec--Präfix) |
Hinweise zur Verwendung
Der Sec-CH-Prefers-Color-Scheme-Header ermöglicht es Websites, die Benutzerpräferenz für Farbschemata zur Anforderungszeit zu erhalten; sie könnten dann wählen, das relevante CSS für die Benutzerpräferenz aus Leistungsgründen inline bereitzustellen. Wenn der Server das CSS inline bereitstellt, sollte er einen Vary-Antwortheader einbeziehen, der Sec-CH-Prefers-Color-Scheme spezifiziert, um anzuzeigen, dass die Antwort für ein bestimmtes Farbschema maßgeschneidert ist.
Wenn Leistung in diesem Kontext keine kritische Überlegung ist, könnten Sie stattdessen die Benutzerpräferenz für Farbschemata mit der prefers-color-scheme-Media-Query und/oder der Window.matchMedia()-API behandeln.
Sec-CH-Prefers-Color-Scheme ist ein hochentropischer Hinweis, daher muss die Site den Empfang durch Senden eines entsprechenden Accept-CH-Antwortheaders einleiten. Ein Benutzeragent kann den Sec-CH-Prefers-Color-Scheme-Header absichtlich weglassen, um die Privatsphäre des Benutzers zu schützen, da die Präferenz theoretisch zum Fingerprinting verwendet werden könnte.
Syntax
Sec-CH-Prefers-Color-Scheme: <preference>
Direktiven
<preference>-
Ein String, der die Präferenz des Benutzeragents für dunkle oder helle Inhalte angibt:
"light"oder"dark". Der Wert kann aus einer entsprechenden Einstellung im zugrunde liegenden Betriebssystem stammen.
Beispiele
Verwendung von Sec-CH-Prefers-Color-Scheme
Der Client stellt 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 anzeigt, dass Sec-CH-Prefers-Color-Scheme als kritischer Client-Hinweis angesehen 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 gecached werden sollten (auch wenn die URL gleich bleibt).
Jeder im Critical-CH-Header aufgelistete Header sollte auch in den Accept-CH- und Vary-Headern vorhanden sein.
Der Client wiederholt automatisch die Anfrage (aufgrund der oben spezifizierten Critical-CH) und teilt dem Server über Sec-CH-Prefers-Color-Scheme mit, dass er eine Benutzerpräferenz für dunkle Inhalte hat:
GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Color-Scheme: "dark"
Der Client wird den Header in nachfolgenden Anfragen in der aktuellen Sitzung einbeziehen, es sei denn, die Accept-CH-Antwort ändert sich und zeigt an, dass es vom Server nicht mehr unterstützt wird.
Spezifikationen
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |