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-Eigenschaft von CSS ermöglicht es Autoren, bestimmte Elemente vom erzwungenen Farbmodus auszunehmen. 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 Eigenschaft forced-color-adjust muss eines der folgenden Schlüsselwörter sein.

Werte

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 Eigenschaft color vom Elternteil erbt (also, es gibt keinen kaskadierten Wert oder der kaskadierte Wert ist currentcolor, inherit, oder ein anderes Schlüsselwort, das vom Elternteil erbt), wird sie auf den verwendeten Farbwert der color-Eigenschaft ihres Elternteils berechnet. In allen anderen Fällen verhält sie sich wie none.

Diese Eigenschaft sollte nur verwendet werden, um Änderungen vorzunehmen, die die Farb- und Kontrastanforderungen eines Benutzers unterstützen. Beispielsweise, wenn Ihnen bewusst wird, dass die Farboptimierungen des User-Agent zu einem schlechten Erlebnis im hohen Kontrast- 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. 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 untenstehenden Beispiel verwendet das erste Kästchen das vom Benutzer festgelegte Farbschema. Zum Beispiel hat es im Windows-Hochkontrastmodus mit schwarzem Schema einen schwarzen Hintergrund und weißen Text. Das zweite Kästchen erhält die auf die .box-Klasse gesetzten Seitenfarben bei.

Durch die Verwendung der Medienfeature forced-colors könnten Sie neben der Eigenschaft forced-color-adjust auch andere Optimierungen für den erzwungenen Farbmodus 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 oben gezeigte Beispiel im Hochkontrastmodus zeigt das erste Kästchen mit einem schwarzen Hintergrund, das zweite mit dem grauen Hintergrund des CSS.

Spezifikationen

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