Propriété CSS print-color-adjust

Syntaxe

print-color-adjust: economy;
print-color-adjust: exact;

/* Valeurs globales */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

Valeurs

Cette propriété est définie par l'un des mots-clés suivants :

economy

L'agent utilisateur peut réaliser des ajustements sur l'élément qu'il estime appropriés et prudents afin d'optimiser la sortie sur l'appareil de rendu. Par exemple, lors de l'impression, un navigateur peut choisir de ne pas inclure les images d'arrière-plan et d'ajuster les couleurs du texte afin que le contraste soit optimisé pour la lecture sur du papier blanc. Il s'agit de la valeur par défaut.

exact

Le contenu de l'élément a été conçu pour utiliser précisément ces couleurs, ces images et ces styles de façon réfléchie et/ou avec un rôle important et où tout changement apporté par le navigateur dégrade la page plutôt que de l'améliorer. L'apparence du contenu ne doit pas être modifiée à moins que l'utilisateur·ice ne le demande. Par exemple, une page pour inclure une liste d'information avec des lignes dont la couleur d'arrière-plan alterne entre blanc et gris clair. Retirer la couleur d'arrière-plan réduit la lisibilité du contenu.

Notes d'utilisation

Il existe plusieurs raisons pour lesquelles un navigateur peut dévier de l'apparence indiquée :

• Le contenu utilise des couleurs trop proches pour le texte et l'arrière-plan, telles que le résultat produit sur l'appareil n'est pas suffisamment lisible.
• Si l'appareil de sortie est une imprimante, les images d'arrière-plan noires ou très foncées peuvent être retirées afin d'économiser de l'encre.
• Lors de l'impression d'une page, le navigateur peut choisir de remplacer du texte écrit avec une couleur claire sur un fond sombre par du texte écrit en couleur sombre sur un fond blanc.

Les options de configuration fournies par l'agent utilisateur ont la priorité sur la valeur de print-color-adjust. Autrement dit, il n'y a aucune garantie que print-color-adjust ait un quelconque effet. Non seulement, la personne peut surcharger ce comportement en paramétrant son navigateur, mais de plus, chaque agent utilisateur peut décider pour lui-même comment gérer print-color-adjust pour chaque situation.

Définition formelle

Syntaxe formelle

print-color-adjust = 
  economy  |
  exact    

Exemples

Préserver un contraste faible

Dans cet exemple, on a une boîte qui utilise background-image avec linear-gradient() pour avoir un dégradé bleu foncé sur un fond noir. Le texte par-dessus est écrit en rouge. Pour cet exemple, on estime que c'est l'apparence voulue dans chaque environnement de rendu, y compris sur le papier et on utilise donc print-color-adjust: exact pour indiquer au navigateur de ne pas effectuer d'ajustements sur la boîte lors du rendu.

CSS

.ma-boite {
  background-color: black;
  background-image: linear-gradient(rgb(0 0 180 / 50%), rgb(70 140 220 / 50%));
  color: #990000;
  width: 15rem;
  height: 6rem;
  text-align: center;
  font:
    24px "Helvetica",
    sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  print-color-adjust: exact;
}

HTML

<div class="ma-boite">
  <p>Il faut plus de contraste&nbsp;!</p>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les autres propriétés relatives aux couleurs : color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color et column-rule-color
• background-image