<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 in der Regel die Standardfarbauswahl wider, die für die verschiedenen Teile einer Webseite verwendet wird.

Benutzeragenten können jedoch ein Barrierefreiheitsfeature namens erzwungener Farbenmodus bereitstellen, bei dem Farben auf eine von Benutzer und Benutzeragenten definierte Palette beschränkt werden, wodurch die vom Autor gewählten Farben in bestimmten Eigenschaften überschrieben werden. Im erzwungenen Farbenmodus gibt <system-color> die gewählten Farben an, sodass der Rest der Seite mit diesen integriert werden kann. Ein Beispiel für den erzwungenen Farbenmodus ist der hohe Kontrastmodus unter Windows.

Im erzwungenen Farbenmodus sollten Autoren Farben aus dem <system-color> Typ für alle Eigenschaften verwenden, die nicht zu der Menge von Eigenschaften gehören, deren Farben überschrieben werden. Dies stellt sicher, dass die Seite durchgängig die gleiche Farbpalette für alle Eigenschaften verwendet.

Autoren können den erzwungenen Farbenmodus mithilfe der forced-colors Medienfunktion erkennen.

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

Syntax

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

Je nach Ihren Einstellungen können sich die in der Tabelle angezeigten Beispielfarben ä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ächensteuerungen.
`AccentColorText`	Text von hervorgehobenen Benutzeroberflächensteuerungen.
`ActiveText`	Text von aktiven Links.
`ButtonBorder`	Grundfarbe des Rahmens von Steuerungen.
`ButtonFace`	Hintergrundfarbe von Steuerungen.
`ButtonText`	Textfarbe von Steuerungen.
`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 (wie zum Beispiel durch das HTML-`mark`-Element).
`MarkText`	Speziell markierter Text (wie 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 Systemfarbenschlüsselwörter

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

Schlüsselwort	Beschreibung	Ersatz
`ActiveBorder`	Rahmen des aktiven Fensters	`ButtonBorder`
`ActiveCaption`	Aktive Fensterbeschriftung. Sollte mit `CaptionText` als Vordergrundfarbe verwendet werden.	`Canvas`
`AppWorkspace`	Hintergrundfarbe der Mehrfachdokumentenschnittstelle.	`Canvas`
`Background`	Hintergrund des Desktops.	`Canvas`
`ButtonHighlight`	Farbe des Rahmens, der zur Lichtquelle zeigt, für 3-D-Elemente, die durch diese Schicht des umgebenden Rahmens dreidimensional erscheinen.	`ButtonFace`
`ButtonShadow`	Farbe des Rahmens, der von der Lichtquelle weg zeigt, für 3-D-Elemente, die durch diese Schicht des umgebenden Rahmens dreidimensional erscheinen.	`ButtonFace`
`CaptionText`	Text in Beschriftungen, Größenfeldern und Scrollbalken-Pfeilfeldern. Sollte mit der `ActiveCaption` Hintergrundfarbe verwendet werden.	`CanvasText`
`InactiveBorder`	Rahmen des inaktiven Fensters.	`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`	Hintergrund des Menüs. 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 (im Allgemeinen äußeren) von zwei Rändern, die von der Lichtquelle weg zeigen, für 3-D-Elemente, die durch zwei konzentrische Schichten des umgebenden Rahmens dreidimensional erscheinen.	`ButtonBorder`
`ThreeDFace`	Die Flächenhintergrundfarbe für 3-D-Elemente, die durch zwei konzentrische Schichten des umgebenden Rahmens dreidimensional erscheinen. Sollte mit der `ButtonText` Vordergrundfarbe verwendet werden.	`ButtonFace`
`ThreeDHighlight`	Die Farbe des helleren (im Allgemeinen äußeren) von zwei Rändern, die zur Lichtquelle zeigen, für 3-D-Elemente, die durch zwei konzentrische Schichten des umgebenden Rahmens dreidimensional erscheinen.	`ButtonBorder`
`ThreeDLightShadow`	Die Farbe des dunkleren (im Allgemeinen inneren) von zwei Rändern, die zur Lichtquelle zeigen, für 3-D-Elemente, die durch zwei konzentrische Schichten des umgebenden Rahmens dreidimensional erscheinen.	`ButtonBorder`
`ThreeDShadow`	Die Farbe des helleren (im Allgemeinen inneren) von zwei Rändern, die von der Lichtquelle weg zeigen, für 3-D-Elemente, die durch zwei konzentrische Schichten des umgebenden Rahmens dreidimensional erscheinen.	`ButtonBorder`
`Window`	Hintergrund des Fensters. 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 durch die box-shadow-Eigenschaft erhält. Im erzwungenen Farbenmodus wird box-shadow auf none gesetzt, sodass das Beispiel die forced-colors Medienfunktion verwendet, um sicherzustellen, dass ein Rahmen der entsprechenden Farbe (ButtonBorder in diesem Fall) 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