forced-color-adjust

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriétéCSSforced-color-adjust permet aux auteurs de ne pas activer les modes de couleurs forcées sur certains éléments. Cela restaure la possibilité de contrôler ces valeurs en CSS.

Syntaxe

css

forced-color-adjust: auto;forced-color-adjust: none;forced-color-adjust: preserve-parent-color;/* Valeurs globales */forced-color-adjust: inherit;forced-color-adjust: initial;forced-color-adjust: revert;forced-color-adjust: revert-layer;forced-color-adjust: unset;

La valeur de la propriétéforced-color-adjust doit être l'un des mots-clés suivants.

Valeurs

auto: En mode de couleurs forcées, les couleurs de l'élément sont définies parl'agent utilisateur. C'est la valeur par défaut.
none: Même en mode de couleurs forcées, les couleurs de l'élément ne sont pas automatiquement définies parl'agent utilisateur.
preserve-parent-colorExpérimental: En mode de couleurs forcées, si la propriétécolor hérite de son parent (c'est-à-dire qu'il n'y a pas devaleur en cascade ou que la valeur en cascade estcurrentColor,inherit, ou un autre mot-clé qui hérite du parent), alors elle prend lacouleur utilisée de la propriétécolor du parent. Dans tous les autres cas, elle se comporte commenone.

Cette propriété ne devrait être utilisée que pour faire des modifications qui prendront en charge les pré-requis de couleurs et de contrastes. Par exemple, si vous savez que les optimisations de couleur faites parl'agent utilisateur conduisent à une mauvaise expérience en mode contrasté ou en mode sombre. L'utilisation de cette propriété vous permettra alors de modifier le résultat dans ce mode pour proposer une meilleure expérience.Elle ne devrait pas être utilisée dans le but d'empêcher les choix de l'utilisateur d'être respectés.

Définition formelle

Valeur initiale	`auto`
Applicabilité	tous les éléments et le texte
Héritée	oui
Valeur calculée	comme défini
Type d'animation	Non animable

Syntaxe formelle

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

Exemples

Préserver les couleurs

Dans l'exemple ci-dessous, la première boîte utilise le jeu de couleur définit par l'utilisateur·ice. Par exemple, dans le mode à forts contrastes sombre de Windows, cela donnera du texte blanc sur fond noir. La seconde boîte conservera quant à elle les couleurs du site définies par la classe.box.

En utilisant la fonctionnalité médiaforced-colors, vous pouvez ajouter n'importe qu'elle autre optimisation pour le mode de couleurs forcées aux côtés de la propriétéforced-color-adjust.

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>  <p>Voici une boîte qui utilisera vos préférences de couleurs.</p></div><div>  <p>Voici une boîte qui conservera les couleurs définies par le site.</p></div>