Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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 eineexperimentelle Technologie
Überprüfen Sie dieBrowser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Sicherer Kontext: Diese Funktion ist nur insicheren Kontexten (HTTPS) in einigen oder allenunterstützenden Browsern verfügbar.
Der HTTPSec-CH-Prefers-Color-SchemeRequest-Header ist einMedien-Feature-Client-Hint, der die Benutzerpräferenz für helle oder dunkle Farbthemen bereitstellt.Ein Benutzer gibt seine Präferenz über eine Betriebssystemeinstellung (zum Beispiel heller oder dunkler Modus) oder eine Benutzereinstellung des User-Agents an.
Wenn ein Server einem Client über denAccept-CH-Header signalisiert, dass erSec-CH-Prefers-Color-Scheme akzeptiert, kann der Client mit diesem Header antworten, um die Benutzerpräferenz für ein bestimmtes Farbthema zu kennzeichnen. Der Server kann dem Client entsprechend angepasste Inhalte senden, einschließlich Bilder oder CSS, um einen hellen oder dunklen Modus für nachfolgende gerenderte Inhalte darzustellen.
Dieser Header basiert auf derprefers-color-scheme Media Query.
| Header-Typ | Request-Header,Client-Hint |
|---|---|
| Verbotener Request-Header | Ja (Sec--Präfix) |
Verwendungshinweise
DerSec-CH-Prefers-Color-Scheme Header ermöglicht es Websites, die Farbpräferenz eines Benutzers zur Anforderungszeit zu erhalten; sie könnten dann das relevante CSS für die Präferenz des Benutzers inline bereitstellen, um aus Leistungsgründen zu agieren. Wenn der Server das CSS inline einfügt, möchte er möglicherweise einenVary-Response-Header einschließen, derSec-CH-Prefers-Color-Scheme spezifiziert, um anzuzeigen, dass die Antwort für ein bestimmtes Farbthema maßgeschneidert ist.
Wenn die Leistung in diesem Kontext keine kritische Rolle spielt, könnten Sie stattdessen die Farbpräferenz des Benutzers mit derprefers-color-scheme Media Query und/oder derWindow.matchMedia() API handhaben.
Sec-CH-Prefers-Color-Scheme ist ein High-Entropy-Hint, sodass die Website durch das Senden eines entsprechendenAccept-CH Response-Headers optieren muss, um diesen zu erhalten. Ein User-Agent kann absichtlich denSec-CH-Prefers-Color-Scheme-Header weglassen, um die Privatsphäre des Benutzers zu schützen, da die Präferenz theoretisch für das Fingerprinting genutzt werden könnte.
Syntax
Sec-CH-Prefers-Color-Scheme: <preference>Direktiven
<preference>Ein String, der die Präferenz des User-Agents 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 stellt eine anfängliche Anfrage an den Server:
GET / HTTP/1.1Host: example.comDer Server antwortet und teilt dem Client überAccept-CH mit, dass erSec-CH-Prefers-Color-Scheme akzeptiert. In diesem Beispiel wird auchCritical-CH verwendet, was darauf hinweist, dassSec-CH-Prefers-Color-Scheme als einkritischer Client-Hint betrachtet wird.
HTTP/1.1 200 OKContent-Type: text/htmlAccept-CH: Sec-CH-Prefers-Color-SchemeVary: Sec-CH-Prefers-Color-SchemeCritical-CH: Sec-CH-Prefers-Color-SchemeHinweis:Wir haben auchSec-CH-Prefers-Color-Scheme imVary-Header spezifiziert, um anzuzeigen, dass Antworten basierend auf dem Wert dieses Headers separat zwischengespeichert werden sollten (auch wenn die URL unverändert bleibt).Jeder imCritical-CH-Header aufgeführte Header sollte auch in denAccept-CH- undVary-Headern vorhanden sein.
Der Client wiederholt automatisch die Anfrage (aufgrund des oben spezifiziertenCritical-CH) und teilt dem Server überSec-CH-Prefers-Color-Scheme mit, dass eine Benutzerpräferenz für dunklen Inhalt vorliegt:
GET / HTTP/1.1Host: example.comSec-CH-Prefers-Color-Scheme: "dark"Der Client wird den Header in nachfolgenden Anfragen in der aktuellen Sitzung beibehalten, es sei denn, dasAccept-CH in den Antworten ändert sich und zeigt an, dass er von dem Server nicht mehr unterstützt wird.
Spezifikationen
| Specification |
|---|
| User Preference Media Features Client Hints Headers # sec-ch-prefers-color-scheme |
Browser-Kompatibilität
Siehe auch
- Client-Hints
- User-Agent Client Hints API
Accept-CH- HTTP-Caching von variierenden Antworten und
Vary-Header prefers-color-schemeCSS-Media-Query- Verbesserung der Benutzerprivatsphäre und Entwicklererfahrung mit User-Agent Client Hints (developer.chrome.com)