forced-color-adjust

Die forced-color-adjust-Eigenschaft (CSS) ermöglicht es Entwicklern, bestimmte Elemente von der Zwangsfarbenmodus-Anpassung auszuschließen. Dadurch wird die Kontrolle über diese Werte wieder an CSS zurückgegeben.

Syntax

css
forced-color-adjust: auto;
forced-color-adjust: none;
forced-color-adjust: preserve-parent-color;

/* Global values */
forced-color-adjust: inherit;
forced-color-adjust: initial;
forced-color-adjust: revert;
forced-color-adjust: revert-layer;
forced-color-adjust: unset;

Der Wert der forced-color-adjust-Eigenschaft muss eines der folgenden Schlüsselwörter sein.

Werte

auto

Die Farben des Elements werden im Zwangsfarbenmodus vom User Agent angepasst. Dies ist die Standardeinstellung.

none

Die Farben des Elements werden im Zwangsfarbenmodus nicht automatisch vom User Agent angepasst.

preserve-parent-color

Im Zwangsfarbenmodus, wenn die color-Eigenschaft vom übergeordneten Element erbt (d.h. es gibt keinen kaskadierten Wert, oder der kaskadierte Wert ist currentcolor, inherit oder ein anderes Schlüsselwort, das von den Eltern erbt), dann wird sie auf den genutzten Farbwert der color-Eigenschaft des übergeordneten Elements berechnet. In allen anderen Fällen verhält sie sich genauso wie none.

Hinweise zur Verwendung

Diese Eigenschaft sollte nur verwendet werden, um Änderungen vorzunehmen, die die Farb- und Kontrastsanforderungen eines Benutzers unterstützen. Zum Beispiel, wenn Sie feststellen, dass die vom User Agent vorgenommenen Farboptimierungen in einem Modus mit hohem Kontrast oder einem Dunkelmodus zu einer schlechten Benutzererfahrung führen. Die Verwendung dieser Eigenschaft ermöglicht es, das Ergebnis in diesem Modus anzupassen und eine bessere Erfahrung zu bieten. Diese Eigenschaft sollte nicht verwendet werden, um die Entscheidungen der Benutzer zu ignorieren.

Formale Definition

Anfangswertauto
Anwendbar aufall elements and text
VererbtJa
Berechneter Wertwie angegeben
AnimationstypNot animatable

Formale Syntax

forced-color-adjust = 
auto |
none |
preserve-parent-color

Beispiele

Farben beibehalten

Im folgenden Beispiel wird bei der ersten Box das vom Benutzer festgelegte Farbschema verwendet. Zum Beispiel wird sie im schwarzen Schema des Windows Hochkontrastmodus einen schwarzen Hintergrund und weißen Text haben. Die zweite Box behält die auf der .box-Klasse festgelegten Seitenfarben bei.

Durch die Verwendung des forced-colors-Medienfeatures könnten auch andere Optimierungen für den Zwangsfarbenmodus neben der forced-color-adjust-Eigenschaft hinzugefügt werden.

CSS

css
.box {
  border: 5px solid grey;
  background-color: #ccc;
  width: 300px;
  margin: 20px;
  padding: 10px;
}

@media (forced-colors: active) {
  .forced {
    forced-color-adjust: none;
  }
}

HTML

html
<div class="box">
  <p>This is a box which should use your color preferences.</p>
</div>

<div class="box forced">
  <p>This is a box which should stay the colors set by the site.</p>
</div>

Ergebnis

Der folgende Screenshot zeigt das obige Bild im Windows Hochkontrastmodus:

Das obige Beispiel im Hochkontrastmodus zeigt die erste Box mit einem schwarzen Hintergrund und die zweite mit dem im CSS festgelegten grauen Hintergrund.

Spezifikationen

Specification
CSS Color Adjustment Module Level 1
# forced-color-adjust-prop

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
forced-color-adjust
auto
none
preserve-parent-color
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
Uses a non-standard name.
Has more compatibility info.

Siehe auch