forced-color-adjust

Die forced-color-adjust CSS Eigenschaft ermöglicht es Autoren, bestimmte Elemente vom Zwangsfarbmodus auszunehmen. Dadurch wird die Kontrolle über diese Werte an CSS zurückgegeben.

Syntax

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

/* 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 Eigenschaft forced-color-adjust muss eines der folgenden Schlüsselwörter sein.

Werte

auto

Die Farben des Elements werden im Zwangsfarbmodus vom User Agent angepasst. Dies ist der Standardwert.

none

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

Verwendungshinweise

Diese Eigenschaft sollte nur verwendet werden, um Änderungen vorzunehmen, die die Farb- und Kontrastanforderungen eines Benutzers unterstützen. Zum Beispiel, wenn Sie feststellen, dass die vom User Agent vorgenommenen Farboptimierungen zu einem schlechten Erlebnis im Hochkontrast- oder Dunkelmodus führen. Durch die Verwendung dieser Eigenschaft können Sie das Ergebnis in diesem Modus anpassen, um ein besseres Erlebnis zu bieten. Sie sollte nicht verwendet werden, um die Beachtung der Benutzerentscheidungen zu verhindern.

Formale Definition

Initialer Wertauto
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 eingestellte Farbschema verwendet. Im Windows Hochkontrastmodus mit dem schwarzen Schema hat es beispielsweise einen schwarzen Hintergrund und weißen Text. Die zweite Box wird die auf der .box Klasse festgelegten Webseitenfarben beibehalten.

Durch die Verwendung der forced-colors Media Query können Sie neben der forced-color-adjust Eigenschaft weitere Optimierungen für den Zwangsfarbmodus hinzufügen.

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, die zweite mit dem grauen Hintergrund des CSS.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch