<system-color>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Der <system-color> CSS Datentyp spiegelt normalerweise die Standardfarbwahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Jedoch können Benutzeragenten eine Barrierefreiheitsfunktion namens erzwungener Farbmodus bereitstellen, bei der Farben auf eine von Benutzer und Benutzeragent definierten Palette beschränkt sind und die Farbauswahl des Autors in bestimmten Eigenschaften überschreiben. Im erzwungenen Farbmodus gibt <system-color> die ausgewählten Farben wieder, sodass der Rest der Seite mit ihnen integriert werden kann. Ein Beispiel für den erzwungenen Farbmodus ist der Hoher Kontrast-Modus in Windows.

Im erzwungenen Farbmodus sollten Autoren Farben aus dem <system-color> Typ für alle Eigenschaften verwenden, die nicht in der Menge der Eigenschaften enthalten sind, deren Farben überschrieben werden. Dies stellt sicher, dass die Seite konsistent dieselbe Farbpalette über alle Eigenschaften hinweg verwendet.

Autoren können den erzwungenen Farbmodus mithilfe der forced-colors Media-Feature erkennen.

Ein <system-color> Wert kann überall dort verwendet werden, wo ein <color> verwendet werden kann.

Syntax

Beachten Sie, dass diese Schlüsselwörter nicht zwischen Groß- und Kleinschreibung unterscheiden, aber hier zur besseren Lesbarkeit in gemischter Schreibweise aufgeführt sind.

Abhängig von Ihren Einstellungen können sich die in der Tabelle angezeigten Beispiel-Farben ändern. Sie können diese Seite auch mit verschiedenen Browsern, Betriebssystemen und Systemeinstellungen anzeigen, um die Unterschiede zu überprüfen.

Schlüsselwort	Beschreibung	Beispiel
`AccentColor`	Hintergrund von hervorgehobenen Benutzeroberflächenelementen.
`AccentColorText`	Text von hervorgehobenen Benutzeroberflächenelementen.
`ActiveText`	Text von aktiven Links.
`ButtonBorder`	Grundfarbton der Umrandung von Steuerelementen.
`ButtonFace`	Hintergrundfarbe von Steuerelementen.
`ButtonText`	Textfarbe von Steuerelementen.
`Canvas`	Hintergrund von Anwendungsinhalten oder Dokumenten.
`CanvasText`	Textfarbe in Anwendungsinhalten oder Dokumenten.
`Field`	Hintergrund von Eingabefeldern.
`FieldText`	Text in Eingabefeldern.
`GrayText`	Textfarbe für deaktivierte Elemente (zum Beispiel ein deaktiviertes Steuerelement).
`Highlight`	Hintergrund von ausgewählten Elementen.
`HighlightText`	Textfarbe von ausgewählten Elementen.
`LinkText`	Text von nicht-aktiven, nicht-besuchten Links.
`Mark`	Hintergrund von Text, der speziell markiert wurde (zum Beispiel durch das HTML-`mark`-Element).
`MarkText`	Text, der speziell markiert wurde (zum Beispiel durch das HTML-`mark`-Element).
`SelectedItem`	Hintergrund von ausgewählten Elementen, zum Beispiel ein ausgewähltes Kontrollkästchen.
`SelectedItemText`	Text von ausgewählten Elementen.
`VisitedText`	Text von besuchten Links.

Veraltete Systemfarb-Schlüsselwörter

Die folgenden Schlüsselwörter waren in früheren Versionen des CSS-Farbmoduls definiert. Sie sind jetzt für die Verwendung auf öffentlichen Webseiten veraltet.

Schlüsselwort	Beschreibung	Ersatz
`ActiveBorder`	Rahmen aktives Fenster	`ButtonBorder`
`ActiveCaption`	Aktive Fensterbeschriftung. Sollte mit `CaptionText` als Vordergrundfarbe verwendet werden.	`Canvas`
`AppWorkspace`	Hintergrundfarbe der Mehrfachebenen-Schnittstelle.	`Canvas`
`Background`	Hintergrund des Desktops.	`Canvas`
`ButtonHighlight`	Die Farbe des Randes, der zur Lichtquelle zeigt, für 3-D-Elemente, die aufgrund dieser Schicht einer umliegenden Umrandung 3-D erscheinen.	`ButtonFace`
`ButtonShadow`	Die Farbe des Randes, die von der Lichtquelle weg zeigt, für 3-D-Elemente, die aufgrund dieser Schicht einer umliegenden Umrandung 3-D erscheinen.	`ButtonFace`
`CaptionText`	Text in Beschriftungen, Größenfeldern und Scrollleisten-Pfeilfeldern. Sollte mit der `ActiveCaption` Hintergrundfarbe verwendet werden.	`CanvasText`
`InactiveBorder`	Rahmen inaktives Fenster.	`ButtonBorder`
`InactiveCaption`	Inaktive Fensterbeschriftung. Sollte mit der `InactiveCaptionText` Vordergrundfarbe verwendet werden.	`Canvas`
`InactiveCaptionText`	Farbe des Textes in einer inaktiven Beschriftung. Sollte mit der `InactiveCaption` Hintergrundfarbe verwendet werden.	`GrayText`
`InfoBackground`	Hintergrundfarbe für Tooltip-Steuerelemente. Sollte mit der `InfoText` Vordergrundfarbe verwendet werden.	`Canvas`
`InfoText`	Textfarbe für Tooltip-Steuerelemente. Sollte mit der `InfoBackground` Hintergrundfarbe verwendet werden.	`CanvasText`
`Menu`	Menühintergrund. Sollte mit der `MenuText` oder `-moz-MenuBarText` Vordergrundfarbe verwendet werden.	`Canvas`
`MenuText`	Text in Menüs. Sollte mit der `Menu` Hintergrundfarbe verwendet werden.	`CanvasText`
`Scrollbar`	Hintergrundfarbe der Scrollleisten.	`Canvas`
`ThreeDDarkShadow`	Die Farbe des dunkleren (in der Regel äußeren) der zwei Ränder, die von der Lichtquelle weg zeigen, für 3-D-Elemente, die aufgrund zweier konzentrischer Schichten einer umliegenden Umrandung 3-D erscheinen.	`ButtonBorder`
`ThreeDFace`	Die Gesichts-Hintergrundfarbe für 3-D-Elemente, die aufgrund zweier konzentrischer Schichten einer umliegenden Umrandung 3-D erscheinen. Sollte mit der `ButtonText` Vordergrundfarbe verwendet werden.	`ButtonFace`
`ThreeDHighlight`	Die Farbe des helleren (in der Regel äußeren) der zwei Ränder, die zur Lichtquelle zeigen, für 3-D-Elemente, die aufgrund zweier konzentrischer Schichten einer umliegenden Umrandung 3-D erscheinen.	`ButtonBorder`
`ThreeDLightShadow`	Die Farbe des dunkleren (in der Regel inneren) der zwei Ränder, die zur Lichtquelle zeigen, für 3-D-Elemente, die aufgrund zweier konzentrischer Schichten einer umliegenden Umrandung 3-D erscheinen.	`ButtonBorder`
`ThreeDShadow`	Die Farbe des helleren (in der Regel inneren) der zwei Ränder, die von der Lichtquelle weg zeigen, für 3-D-Elemente, die aufgrund zweier konzentrischer Schichten einer umliegenden Umrandung 3-D erscheinen.	`ButtonBorder`
`Window`	Fensterhintergrund. Sollte mit der `WindowText` Vordergrundfarbe verwendet werden.	`Canvas`
`WindowFrame`	Fensterrahmen.	`ButtonBorder`
`WindowText`	Text in Fenstern. Sollte mit der `Window` Hintergrundfarbe verwendet werden.	`CanvasText`

Beispiele

Verwendung von Systemfarben

In diesem Beispiel haben wir einen Button, der normalerweise seinen Kontrast mithilfe der box-shadow Eigenschaft erhält. Im erzwungenen Farbmodus wird box-shadow auf none gesetzt, daher verwendet das Beispiel das forced-colors Media-Feature, um sicherzustellen, dass es eine Umrandung der entsprechenden Farbe gibt (in diesem Fall ButtonBorder).

HTML

html

<button class="button">Press me!</button>

CSS

css

.button {
  border: 0;
  padding: 10px;
  box-shadow:
    -2px -2px 5px gray,
    2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow
    is forced to 'none' in forced-colors mode */
    border: 2px ButtonBorder solid;
  }
}

Ergebnis

Spezifikationen

Specification
CSS Color Module Level 4 # css-system-colors

Browser-Kompatibilität

Siehe auch

<color>: der Datentyp, zu dem diese Schlüsselwörter gehören

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden