<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 üblicherweise die Standardfarbwahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Benutzeragenten können jedoch eine Barrierefreiheitseigenschaft namens Zwangsfarbenmodus bieten, in dem Farben in eine vom Benutzer und Benutzeragenten definierte Palette beschränkt werden, wodurch die Farbwahl des Autors in bestimmten Eigenschaften überschrieben wird. Im Zwangsfarbenmodus zeigt <system-color> die gewählten Farben an, sodass der Rest der Seite damit integriert werden kann. Ein Beispiel für den Zwangsfarbenmodus ist der Hoher-Kontrast-Modus in Windows.

Im Zwangsfarbenmodus sollten Autoren Farben vom <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 stets dieselbe Farbpalette über alle Eigenschaften hinweg verwendet.

Autoren können den Zwangsfarbenmodus mit 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 groß-/kleinschreibungsempfindlich sind, hier aber zur besseren Lesbarkeit in gemischter Schreibweise aufgeführt sind.

Abhängig von Ihren Einstellungen können sich die in der Tabelle dargestellten 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ächensteuerelementen.
`AccentColorText`	Text von hervorgehobenen Benutzeroberflächensteuerelementen.
`ActiveText`	Text aktiver Links.
`ButtonBorder`	Grundlegende Rahmenfarbe 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 speziell markiertem Text (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, beispielsweise 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 wurden in früheren Versionen des CSS Color Module definiert. Sie sind nun für die Verwendung auf öffentlichen Webseiten veraltet.

Schlüsselwort	Beschreibung	Ersetzung
`ActiveBorder`	Aktiver Fensterrahmen	`ButtonBorder`
`ActiveCaption`	Aktive Fensterbeschriftung. Sollte mit `CaptionText` als Vordergrundfarbe verwendet werden.	`Canvas`
`AppWorkspace`	Hintergrundfarbe der Multiple Document Interface.	`Canvas`
`Background`	Desktop-Hintergrund.	`Canvas`
`ButtonHighlight`	Die Farbe des Rahmens, der der Lichtquelle zugewandt ist, für 3-D-Elemente, die durch diese Rahmenschicht dreidimensional erscheinen.	`ButtonFace`
`ButtonShadow`	Die Farbe des Rahmens, der von der Lichtquelle abgewandt ist, für 3-D-Elemente, die durch diese Rahmenschicht dreidimensional erscheinen.	`ButtonFace`
`CaptionText`	Text in Beschriftung, Größenfeld und Rollbalken-Box. Sollte mit der `ActiveCaption`-Hintergrundfarbe verwendet werden.	`CanvasText`
`InactiveBorder`	Inaktiver Fensterrahmen.	`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 von Scrollleisten.	`Canvas`
`ThreeDDarkShadow`	Die Farbe des dunkleren (in der Regel äußeren) der beiden Ränder, die von der Lichtquelle abgewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten umlaufender Ränder dreidimensional erscheinen.	`ButtonBorder`
`ThreeDFace`	Die Hintergrundfarbe der Fläche für 3-D-Elemente, die durch zwei konzentrische Schichten umlaufender Ränder dreidimensional erscheinen. Sollte mit der `ButtonText`-Vordergrundfarbe verwendet werden.	`ButtonFace`
`ThreeDHighlight`	Die Farbe des helleren (in der Regel äußeren) der beiden Ränder, die der Lichtquelle zugewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten umlaufender Ränder dreidimensional erscheinen.	`ButtonBorder`
`ThreeDLightShadow`	Die Farbe des dunkleren (in der Regel inneren) der beiden Ränder, die der Lichtquelle zugewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten umlaufender Ränder dreidimensional erscheinen.	`ButtonBorder`
`ThreeDShadow`	Die Farbe des helleren (in der Regel inneren) der beiden Ränder, die von der Lichtquelle abgewandt sind, für 3-D-Elemente, die durch zwei konzentrische Schichten umlaufender Ränder dreidimensional 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 eine Schaltfläche, die normalerweise ihren Kontrast mithilfe der box-shadow-Eigenschaft erhält. Im Zwangsfarbenmodus wird box-shadow auf none gesetzt, sodass das Beispiel die forced-colors Media-Feature verwendet, um sicherzustellen, dass ein Rahmen der entsprechenden Farbe (in diesem Fall ButtonBorder) vorhanden ist.

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