forced-color-adjust

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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 Zwangsfarbmodus vom Benutzeragenten angepasst. Dies ist der Standardwert.
none: Die Farben des Elements werden im Zwangsfarbmodus nicht automatisch vom Benutzeragenten angepasst.
preserve-parent-color: Im Zwangsfarbmodus, 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 übergeordneten Element erbt), wird es zum verwendeten Farbwert der color Eigenschaft seines übergeordneten Elements berechnet. In allen anderen Fällen verhält es sich wie none.

Diese Eigenschaft sollte nur verwendet werden, um Änderungen vorzunehmen, die den Farb- und Kontrastanforderungen eines Benutzers unterstützen. Zum Beispiel, wenn Sie erkennen, dass die Farboptimierungen des Benutzeragenten zu einem schlechten Erlebnis in einem Hochkontrast- oder Dunkelmodus führen. Die Verwendung dieser Eigenschaft würde es ermöglichen, das Ergebnis in diesem Modus anzupassen, um ein besseres Erlebnis zu bieten. Es 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 folgenden Beispiel wird das erste Feld das vom Benutzer eingestellte Farbschema verwenden. Zum Beispiel 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 Site-Farben beibehalten.

Durch die Verwendung der forced-colors Medienfunktion könnten Sie weitere Optimierungen für den Zwangsfarbmodus neben der forced-color-adjust Eigenschaft 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 Bild oben im Windows-Hochkontrastmodus:

Das obige Beispiel im Hochkontrastmodus zeigt das erste Feld mit einem schwarzen Hintergrund, das zweite mit dem grauen Hintergrund des CSS.

Spezifikationen

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