das Farbschema La propiedad CSS y la metaetiqueta correspondiente permiten a los desarrolladores incluir sus páginas en los valores predeterminados específicos del tema de la Stylesheet von User-Agent.
Aktualisiert
Hintergrund
das bevorzugt-Farbschema función de medios de preferencia del Nutzername
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 Propiedad CSS y la metaetiqueta correspondiente del mismo nombre. Ambos le facilitan la vida como desarrollador al permitirle incluir su página en los valores predeterminados específicos del tema de la hoja de estilo del agente de usuario, como, por ejemplo, controles de formulario, Riegel de desplazamiento y colores del sistema CSS. Al mismo tiempo, esta función evita que los Browser apliquen transformaciones por sí mismos.
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:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &Ampere;&
HAVE_OS_DARK_MODE_SUPPORT
Farbe: Text;
Hintergrundfarbe: -apple-system-control-background;
#else
Hintergrundfarbe: white;
#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 etiqueta) es para el fondo del Inhalt o documentos de la aplicación, mientras que
CanvasText
Es ist für Text in Dokumenten oder Anwendungsinhalten. Die beiden gehören zusammen und sollten nicht isoliert verwendet werden.
Las hojas de estilo UA pueden utilizar sus propios colores patentados o los del sistema semántico estandarizado, para determinar cómo se deben representar los elementos HTML de forma predeterminada. Si el sistema operativo está configurado en modo oscuro o usa un tema oscuro,
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: Segeltuch
}das Farbschema CSS-Eigenschaft
das CSS Level 1 Farbanpassungsmodul
La especificación introduce un modelo y controla el ajuste automático del color por parte del agente de usuario con el Ziel de manejar las preferencias del usuario, como el modo oscuro, el ajuste de contraste o esquemas de color específicos deseados.
das Farbschema
La propiedad definida en el mismo permite que un elemento indique con qué esquemas de color se siente cómodo renderizado. Estos valores se negocian con las preferencias del usuario, lo que da como resultado un esquema de color elegido que afecta aspectos de la Benutzeroberfläche (UI), como los colores predeterminados de los controles de formulario y las barras de desplazamiento, así como los valores usados de los colores del sistema CSS. Actualmente se admiten los siguientes valores:
-
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.
Proporcionar ambas Schlüsselwörter indica que el primer esquema es el preferido (por el autor), pero el segundo también es aceptable si el usuario lo prefiere.
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.
: Wurzel {
Farbschema: dark light;
}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 Süßkartoffel="Farbschema" Inhalt="dark light">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, utilizado por WebKit y Chrome para el Verknüpfung clásico azul 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 Süßkartoffel="Farbschema" Inhalt="dark light">
<Stil>
fieldset {
Hintergrundfarbe: Gainsboro;
}
@media (bevorzugt-Farbschema: dunkel) {
fieldset {
Hintergrundfarbe: Darkslategray;
}
}
</Stil>
</Kopf>
<Körper>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<Taste Art="Taste">Lorem ipsum</Taste>
</fieldset>
</form>
</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.
