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 CSS-Eigenschaft forced-color-adjust ermöglicht es, bestimmte Elemente vom Modus für erzwungene Farben auszunehmen. Dadurch werden die entsprechenden Farbwerte wieder durch CSS gesteuert.
Syntax
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 mit einem der folgenden Schlüsselwortwerte angegeben:
auto-
Die Farben des Elements werden im Modus für erzwungene Farben vom User Agent angepasst. Dies ist der Standardwert.
none-
Die Farben des Elements werden im Modus für erzwungene Farben nicht automatisch vom User Agent angepasst.
preserve-parent-color-
Wenn die Eigenschaft
colorim Modus für erzwungene Farben vom Elternelement geerbt wird (d.h. es gibt keinen Wert aus der Kaskade, oder dieser Wert istcurrentColor,inheritoder ein anderes Schlüsselwort, das den Wert vom Elternelement erbt), ergibt sich als berechneter Wert der verwendete Farbwert dercolor-Eigenschaft des Elternelements. In allen anderen Fällen verhält sich der Wert wienone.
Hinweise zur Verwendung
Diese Eigenschaft sollte nur verwendet werden, um Anpassungen vorzunehmen, die den Anforderungen der Benutzer an Farben und Kontrast gerecht werden. Wenn beispielsweise die Farbanpassungen des User Agents im Modus mit hohem Kontrast oder im Dunkelmodus zu einer schlechten Darstellung führen, können Sie das Ergebnis mit dieser Eigenschaft verbessern. Sie sollte nicht verwendet werden, um die Einstellungen der Benutzer außer Kraft zu setzen.
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 verwendet die erste Box das vom Benutzer eingestellte Farbschema. Im schwarzen Farbschema des Windows-Modus für hohen Kontrast hat sie beispielsweise einen schwarzen Hintergrund und weißen Text. Die zweite Box behält die Website-Farben bei, die für die Klasse .box festgelegt wurden.
Mit dem Media-Feature forced-colors können Sie neben der Eigenschaft forced-color-adjust weitere Anpassungen für den Modus für erzwungene Farben vornehmen.
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>
CSS
.box {
border: 5px solid grey;
background-color: #cccccc;
width: 300px;
margin: 20px;
padding: 10px;
}
@media (forced-colors: active) {
.forced {
forced-color-adjust: none;
}
}
Ergebnis
Der folgende Screenshot zeigt das obige Beispiel im Windows-Modus für hohen Kontrast:
Spezifikationen
| Spezifikation |
|---|
| CSS Color Adjustment Module Level 1 # forced-color-adjust-prop |