das Farbschema Mit der CSS-Eigenschaft und dem entsprechenden Meta-Tag können Entwickler ihre Seiten in die themenspezifischen Standardeinstellungen des Stylesheets für Benutzeragenten aufnehmen.
Aktualisiert
Hintergrund
das bevorzugt-Farbschema Benutzerpräferenz Medienfunktion
Mit der Medienfunktion für Benutzereinstellungen haben Entwickler die volle Kontrolle über das Erscheinungsbild ihrer Seiten. Wenn Sie damit nicht vertraut sind, lesen Sie bitte meinen Artikel
bevorzugt-FarbschemaHallo Dunkelheit, mein alter Freund, wo ich alles dokumentiert habe, was ich über das Erstellen erstaunlicher Erlebnisse im dunklen Modus weiß.
Ein Teil des Puzzles, der im Artikel nur kurz erwähnt wurde, ist das Farbschema CSS-Eigenschaft und das entsprechende gleichnamige Meta-Tag. Beides erleichtert Ihnen das Leben als Entwickler, indem Sie Ihre Seite in die themenspezifischen Standardeinstellungen des Stylesheets für Benutzeragenten einbetten können, z. B. Formularsteuerelemente, Bildlaufleisten und CSS-Systemfarben. Gleichzeitig verhindert diese Funktion, dass Browser Transformationen selbst anwenden.
Das Stylesheet des Benutzeragenten
Bevor ich fortfahre, möchte ich kurz beschreiben, was ein User Agent-Stylesheet ist. Meistens fällt Ihnen das Wort ein User-Agent (UA) als ausgefallene Art zu sagen Browser. Das UA-Stylesheet bestimmt das Standardaussehen einer Seite. Wie der Name schon sagt, hängt ein UA-Stylesheet von der jeweiligen UA ab. Sie können einen Blick darauf werfen
Chrom
(und Chromiums UA-Stylesheet) und vergleichen Sie es mit
Von Firefox oder
Safari (und WebKits). In der Regel stimmen UA-Stylesheets in den meisten Fällen überein. Zum Beispiel machen sie alle die Links blau, den allgemeinen Text schwarz und die Hintergrundfarbe weiß, aber es gibt auch wichtige (und manchmal ärgerliche) Unterschiede, zum Beispiel, wie sie Formularsteuerelemente entwerfen.
Schau genauer hin
WebKit UA Style Sheet
und was es in Bezug auf den dunklen Modus macht. (Führen Sie eine Volltextsuche im Stylesheet nach "Dunkel" durch.) Der vom Stylesheet bereitgestellte Standardwert ändert sich je nachdem, ob der Dunkelmodus aktiviert oder deaktiviert ist. Um dies zu veranschaulichen, finden Sie hier eine CSS-Regel, die das verwendet
: Streichhölzer
Pseudoklasse und interne Variablen von WebKit mögen -apple-system-control-backgroundsowie die interne Präprozessor-Direktive von WebKit #if definiert:
Eingang,
Eingabe: Übereinstimmungen ([type = "password"], [type = "search"]) {
-webkit-Aussehen : Textfeld ;
#if definiert ( HAVE_OS_DARK_MODE_SUPPORT ) &&
HAVE_OS_DARK_MODE_SUPPORT
Farbe : Text ;
Hintergrundfarbe : -apple-system-control-background ;
#else
Hintergrundfarbe : weiß ;
#endif
}}Sie werden einige nicht standardmäßige Werte für die feststellen Farbe y Hintergrundfarbe Eigenschaften oben. Keiner Text weder -apple-system-control-background Sie sind gültige CSS-Farben. Sie sind intern in WebKit semantisch Farben.
Es stellt sich heraus, dass CSS die Farben des semantischen Systems standardisiert hat. Sie sind in angegeben
CSS-Farbmodul Stufe 4. Zum Beispiel,
Segeltuch
(nicht zu verwechseln mit label) ist für den Hintergrund von App-Inhalten oder Dokumenten, während
CanvasText
Es ist für Text in Dokumenten oder Anwendungsinhalten. Die beiden gehören zusammen und sollten nicht isoliert verwendet werden.
UA-Stylesheets können ihre eigenen proprietären Farben oder die des standardisierten semantischen Systems verwenden, um zu bestimmen, wie HTML-Elemente standardmäßig gerendert werden sollen. Wenn das Betriebssystem auf den Dunkelmodus eingestellt ist oder ein dunkles Thema verwendet,
CanvasText (oder Text) würde bedingt auf leer gesetzt, und Segeltuch (oder -apple-system-control-background) würde auf schwarz gesetzt werden. Das UA-Stylesheet weist das folgende CSS nur einmal zu und deckt sowohl den Hell- als auch den Dunkelmodus ab.
Körper {
Farbe : CanvasText ;
Hintergrundfarbe : Leinwand
}}das Farbschema CSS-Eigenschaft
das CSS Level 1 Farbanpassungsmodul
Die Spezifikation führt ein Modell ein und steuert die automatische Farbanpassung durch den Benutzeragenten, um Benutzereinstellungen wie den Dunkelmodus, die Kontrastanpassung oder bestimmte gewünschte Farbschemata zu verwalten.
das Farbschema
Mit der darin definierten Eigenschaft kann ein Element angeben, mit welchen Farbschemata es sich gut rendern lässt. Diese Werte werden mit den Einstellungen des Benutzers ausgehandelt, was zu einem ausgewählten Farbschema führt, das Aspekte der Benutzeroberfläche (UI) beeinflusst, z. B. die Standardfarben von Formularsteuerelementen und Bildlaufleisten sowie die verwendeten Werte von CSS-Systemfarben. Folgende Werte werden derzeit unterstützt:
-
normalGibt an, dass das Element die Farbschemata überhaupt nicht kennt. Daher sollte das Element mit dem Standardfarbschema des Browsers gerendert werden. -
[Licht | dunkel] +Gibt an, dass das Element die aufgelisteten Farbschemata kennt und verarbeiten kann, und drückt eine geordnete Präferenz zwischen ihnen aus.
Wenn Sie beide Schlüsselwörter angeben, wird das erste Schema (vom Autor) bevorzugt, das zweite wird jedoch auch akzeptiert, wenn der Benutzer es bevorzugt.
In dieser Liste Licht stellt ein helles Farbschema mit hellen Hintergrundfarben und dunklen Vordergrundfarben dar, während dunkel stellt das Gegenteil dar, mit dunklen Hintergrundfarben und hellen Vordergrundfarben.
Warnung:
Zuvor erlaubte die Spezifikation einen zusätzlichen Wert nur Licht
Dies zeigte an, dass das Element nach Möglichkeit mit einem hellen Farbschema gerendert werden musste, auch wenn der Benutzer ein anderes Farbschema bevorzugt. Autoren sollte nicht Verwenden Sie diesen Wert. Stattdessen sollten Sie sicherstellen, dass Ihre Seite mit dem vom Benutzer bevorzugten Farbschema gut gerendert wird.
Für alle Elemente muss beim Rendern mit einem Farbschema die Farben, die auf der gesamten vom Browser bereitgestellten Benutzeroberfläche verwendet werden, so sein, dass das Element der Absicht des Farbschemas entspricht. Einige Beispiele sind Bildlaufleisten, Unterstreichungen zur Rechtschreibprüfung, Formularsteuerelemente usw.
das Farbschema Die CSS-Eigenschaft kann sowohl in verwendet werden : Wurzel Level sowie individuelles Level pro Item.
Über ihn : Wurzel Element sollte die Darstellung mit einem Farbschema zusätzlich die Farbe der Leinwandoberfläche (dh die globale Hintergrundfarbe) beeinflussen, den Anfangswert von Farbe Eigenschaft und die verwendeten Werte der Systemfarben und sollten sich auch auf die Bildlaufleisten des Ansichtsfensters auswirken.
: root {
Farbschema : dunkles Licht ;
}}Ehrung der Farbschema Für die CSS-Eigenschaft muss das CSS zuerst heruntergeladen werden (sofern von darauf verwiesen wird) ) und analysiert werden. Damit Benutzerprogramme den Hintergrund der Seite mit dem gewünschten Farbschema rendern können. sofort, ein Farbschema Der Wert kann auch in a angegeben werden
Element.
< meta name = " Farbschema " content = " dunkles Licht " >Kombinatorisch Farbschema y bevorzugt-Farbschema
Da sowohl das Meta-Tag als auch die CSS-Eigenschaft (falls auf das angewendet : Wurzel Element) führen schließlich zum gleichen Verhalten. Ich empfehle immer, das Farbschema über das Meta-Tag anzugeben, damit der Browser das bevorzugte Schema schneller übernehmen kann.
Während für absolute Basisseiten keine zusätzlichen CSS-Regeln erforderlich sind, sollten Sie im Allgemeinen immer kombinieren Farbschema mit bevorzugt-Farbschema. Zum Beispiel die proprietäre CSS-Farbe von WebKit -webkit-link, wird von WebKit und Chrome für den klassischen blauen Link verwendet rgb (0,0,238)hat ein unzureichendes Kontrastverhältnis von 2,23: 1 auf schwarzem Hintergrund und
Fehler
sowohl WCAG AA als auch WCAG AAA
Anforderungen.
Ich habe Fehler für geöffnet Chrom,
WebKity
Feuerfuchs
sowie ein Metaproblem im HTML-Standard
um dies zu beheben.
Interagieren mit bevorzugt-Farbschema
Das Zusammenspiel von Farbschema CSS-Eigenschaft und das entsprechende Meta-Tag mit dem bevorzugt-Farbschema Die Medienfunktion für Benutzereinstellungen kann zunächst verwirrend erscheinen. Tatsächlich spielen sie sehr gut zusammen. Das Wichtigste zu verstehen ist das Farbschema
bestimmt ausschließlich das Standard-Erscheinungsbild, während bevorzugt-Farbschema bestimmt das stilisierbare Erscheinungsbild. Nehmen Sie zur Verdeutlichung die folgende Seite an:
< Kopf >
< meta name = " Farbschema " content = " dunkles Licht " >
< style >
Feldset {
Hintergrundfarbe : Gainsboro ;
}}
@media ( bevorzugt-Farbschema : dunkel ) {
Feldset {
Hintergrundfarbe : Darkslategray ;
}}
}}
Stil >
Kopf >
< Körper >
< p >
Lorem ipsum Schmerz sitzen amet, legere ancillae ne vis.
p >
< Formular >
< fieldset >
< legende > Lorem ipsum Legende >
< button type = " button " > Lorem ipsum Schaltfläche >
Feldsatz >
Formular >
Körper >Der Inline-CSS-Code auf der Seite legt die Elemente Hintergrundfarbe zu Gainsboro im allgemeinen Fall und für Darkslategray wenn der Benutzer a bevorzugt dunkel Farbschema nach bevorzugt-Farbschema Benutzerpräferenz Medienfunktion.
Durch das Element, teilt die Seite dem Browser mit, dass sie ein dunkles und ein helles Thema unterstützt, wobei ein dunkles Thema bevorzugt wird.
Abhängig davon, ob das Betriebssystem auf den Dunkel- oder den Hell-Modus eingestellt ist, wird die gesamte Seite hell auf dunkel angezeigt oder umgekehrt, je nach Stylesheet des Benutzeragenten. Es gibt Unterlassen Sie Zusätzlicher Entwickler stellte CSS zur Verfügung, um Absatztext oder Seitenhintergrundfarbe zu ändern.
Beachten Sie, wie die Elemente Hintergrundfarbe Änderungen basieren darauf, ob der Dunkelmodus aktiviert ist, und folgen den Regeln des Online-Stylesheets, das vom Entwickler auf der Seite bereitgestellt wird. Ist gut Gainsboro oder Darkslategray.
Hintergrundfarbe ist Gainsborogemäß dem Stylesheet des Online-Entwicklers.
Hintergrundfarbe ist Darkslategraygemäß dem Stylesheet des Online-Entwicklers.
das Das Erscheinungsbild des Elements wird vom Stylesheet des Benutzeragenten gesteuert. Ihr Farbe ist in der konfiguriert
Schaltflächentext
Systemfarbe und seine Hintergrundfarbe und die vier Randfarbes werden auf die Systemfarbe eingestellt
ButtonFace.
Hintergrundfarbe und die verschiedenenRandfarbes sind in der etabliert ButtonFaceSystemfarbe.
Beachten Sie nun, wie die Elemente Randfarbe Änderungen. das berechnet Wert für ihn Rand-Top-Farbe und das Rand-Boden-Farbe
Änderung von rgba (0, 0, 0, 0,847) (schwärzlich) zu rgba (255, 255, 255, 0,847) (cremefarben), wenn der Benutzeragent aktualisiert wird ButtonFace dynamisch basierend auf Farbschema. Gleiches gilt für die Elemente Farbe
welches auf die entsprechende Systemfarbe eingestellt ist Schaltflächentext.
Rand-Top-Farbeund das
Rand-Boden-Farbe die konfiguriert sind für ButtonFaceim User Agent Stylesheet sind jetzt
rgba (0, 0, 0, 0,847).
Rand-Top-Farbeund das
Rand-Boden-Farbe die konfiguriert sind für ButtonFaceim User Agent Stylesheet sind jetzt
rgba (255, 255, 255, 0,847).Manifestation
Sie können die Auswirkungen von sehen Farbschema angewendet auf eine große Anzahl von HTML-Elementen in a Glitch-Demo. Die Demo bewusst zeigt WCAG AA und WCAG AAA
Verstoß
mit den Farben der in der obigen Warnung genannten Links.
das Manifestation
abwechselnd mit Farbschema: Licht.
das Manifestation
abwechselnd mit Farbschema: dunkel. Bitte beachten Sie die WCAG AA und WCAG AAA
Verstoß
mit den Linkfarben.
Vielen Dank
das Farbschema Die CSS-Eigenschaft und das entsprechende Meta-Tag wurden von implementiert
Lillesveen Rune. Rune ist außerdem Mitherausgeber der Level 1-Spezifikation des CSS-Farbanpassungsmoduls. Heldenbild von
Philippe Leone
im Unsplash.
