`forced-color-adjust` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die forced-color-adjust CSS-Eigenschaft ermöglicht es Autoren, bestimmte Elemente vom Modus der erzwungenen Farben auszuschließen. Dadurch wird die Kontrolle über diese Werte 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 Modus der erzwungenen Farben vom User-Agent angepasst. Dies ist der Standardwert.
none: Die Farben des Elements werden im Modus der erzwungenen Farben nicht automatisch vom User-Agent angepasst.
preserve-parent-color: Im Modus der erzwungenen Farben, wenn die color-Eigenschaft von ihrem Elternteil erbt (d.h. es gibt keinen kaskadierten Wert oder der kaskadierte Wert ist currentColor, inherit oder ein anderes Schlüsselwort, das vom Elternteil erbt), dann wird sie auf den verwendeten Farbwert der color-Eigenschaft ihres Elternteils berechnet. In allen anderen Fällen verhält sie sich wie none.

Anwendungshinweise

Diese Eigenschaft sollte nur verwendet werden, um Änderungen zu machen, die die Farb- und Kontrastanforderungen eines Benutzers unterstützen. Zum Beispiel, wenn Sie feststellen, dass die vom User-Agent vorgenommenen Farboptimierungen zu einer schlechten Erfahrung im Hochkontrast- oder Dunkelmodus führen. Die Verwendung dieser Eigenschaft würde es ermöglichen, das Ergebnis in diesem Modus zu optimieren, um eine bessere Erfahrung zu bieten. Sie sollte nicht verwendet werden, um zu verhindern, dass Benutzerentscheidungen respektiert werden.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	all elements and text
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	Not animatable

Formale Syntax

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

Beispiele

Farben beibehalten

Im Beispiel unten wird die erste Box das vom Benutzer gesetzte Farbschema verwenden. Zum Beispiel im schwarzen Schema des Windows-Hochkontrastmodus wird sie einen schwarzen Hintergrund und weißen Text haben. Die zweite Box wird die auf der .box-Klasse festgelegten Website-Farben beibehalten.

Durch die Verwendung der forced-colors Medienfunktion könnten Sie zusammen mit der forced-color-adjust-Eigenschaft weitere Optimierungen für den Modus der erzwungenen Farben hinzufügen.

CSS

css

.box {
  border: 5px solid grey;
  background-color: #cccccc;
  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>