`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.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die forced-color-adjust CSS-Eigenschaft ermöglicht es Autoren, bestimmte Elemente vom erzwungenen Farbmodus 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;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwörter angegeben:

auto: Die Farben des Elements werden im erzwungenen Farbmodus vom User Agent angepasst. Dies ist der Standardwert.
none: Die Farben des Elements werden im erzwungenen Farbmodus nicht automatisch vom User Agent angepasst.
preserve-parent-color: Im erzwungenen Farbmodus, 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 vom Elternteil erbt), dann wird sie auf den verwendeten Farbwert der color-Eigenschaft des Elternteils berechnet. In allen anderen Fällen verhält sie sich wie none.

Diese Eigenschaft sollte nur für Änderungen verwendet werden, die die Farb- und Kontrastanforderungen eines Benutzers unterstützen. Zum Beispiel, wenn Sie feststellen, dass die vom User Agent vorgenommenen Farboptimierungen bei hohem Kontrast oder im Dunkelmodus zu einer schlechten Erfahrung führen. Die Verwendung dieser Eigenschaft würde das Anpassen des Ergebnisses in diesem Modus ermöglichen, um eine bessere Erfahrung zu bieten. Sie sollte nicht verwendet werden, um Benutzerentscheidungen zu ignorieren.

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 folgenden Beispiel wird das erste Feld das vom Benutzer festgelegte Farbschema verwenden. Beispielsweise wird es im Windows-Hochkontrastmodus mit schwarzem Schema einen schwarzen Hintergrund und weißen Text haben. Das zweite Feld wird die auf der .box Klasse festgelegten Website-Farben beibehalten.

Mit der forced-colors Medienfunktion könnten Sie neben der forced-color-adjust-Eigenschaft weitere Optimierungen für den erzwungenen Farbmodus 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>