print-color-adjust
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
La propriété CSS print-color-adjust
définit ce que l'agent utilisateur pourra éventuellement faire pour optimiser l'apparence de l'élément sur l'appareil de sortie. Par défaut, le navigateur peut réaliser des ajustements sur l'apparence de l'élément qu'il estime nécessaires et prudents selon le type et les capacités de l'appareil de sortie.
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;
La valeur de la propriété print-color-adjust
doit être l'un des mots-clés suivants.
Valeurs
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 pourra 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égraderait la page plutôt que de l'améliorer. L'apparence du contenu ne devrait pas être modifiée à moins que l'utilisatrice ou l'utilisateur ne le demande. Par exemple, une page pourrait 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éduirait la lisibilité du contenu.
Notes d'utilisation
Il existe plusieurs raisons pour lesquelles un navigateur pourrait 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 ne serait 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 pourra 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 auront 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 pourra décider pour lui-même comment gérer print-color-adjust
pour chaque situation.
Définition formelle
Valeur initiale | economy |
---|---|
Applicabilité | tous les éléments |
Héritée | oui |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
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(
rgba(0, 0, 180, 0.5),
rgba(70, 140, 220, 0.5)
);
color: #900;
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 !</p>
</div>
Résultat
Spécifications
Specification |
---|
CSS Color Adjustment Module Level 1 # propdef-print-color-adjust |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Appliquer des couleurs aux éléments HTML en utilisant CSS
- Les autres propriétés relatives aux couleurs :
background-image