print-color-adjust

Die CSS-Eigenschaft print-color-adjust ist so etwas wie eine Kostenmaßnahme beim Drucken einer Webseite. Wissen Sie, wie Sie eine Webseite buchstäblich auf ein Stück Papier drucken können? Davon sprechen wir. Durch die Anwendung von print-color-adjust geben wir dem Browser einen „Hinweis“, wie er Farben beim Drucken behandeln soll, z. B. das Ignorieren dunkler Hintergründe, was den Benutzern teure Tintenkosten ersparen kann.

.element {
  print-color-adjust: economy;
}

Laut Spezifikation ersetzt print-color-adjust die veraltete Eigenschaft color-adjust. Ursprünglich war color-adjust als Kurzschreibweise für eine Sammlung von „leistungsoptimierten“ Farbanpassungseigenschaften gedacht, aber print-color-adjust war die einzige unterstützte Bestandteileigenschaft. Beachten Sie, dass es auch eine Version namens webkit-print-color-adjust gibt, die von Chrome und Safari unterstützt wird.

Warum das wichtig ist

Sie denken vielleicht: „Moment mal, ist Rot nicht einfach Rot?“ Und ja, das stimmt absolut. Was bringt es, eine Farbe zu optimieren oder anzupassen, die überall gleich ist?

Der Punkt ist, dass Browser bereits dazu neigen, diese Bestimmungen selbst zu treffen und Farben anzupassen, z. B. ein leicht anderes Rot auszugeben, wenn der User-Agent aufgrund der Bildschirmqualität oder anderer Faktoren keine bestimmten Hex-Werte rendern kann. Die Eigenschaft sagt dem Browser praktisch: „Hey, ich möchte, dass du diese Farbe verwendest, aber es ist in Ordnung, wenn du das nicht kannst und deine beste Alternative für die Situation anwendest.“ Oder umgekehrt kann sie den Browser anweisen, die Farbe zu jedem Preis genau abzugleichen.

Warum ist das wichtig? Die Spezifikation beschreibt einen Anwendungsfall, bei dem die Beibehaltung des Zebra-Muster-Streifens einer formatierten Tabelle auf einer gedruckten Seite die Lesbarkeit verbessern könnte.

Zum Beispiel könnte eine Mapping-Website, die gedruckte Anweisungen anbietet, die Schritte in den Anweisungen „zebra-streifen“, abwechselnd zwischen weißem und hellgrauem Hintergrund. Das Verlieren dieses Zebra-Musters und ein rein weißer Hintergrund würde die Anweisungen bei ablenkenden Fahrten schwerer lesbar machen.

Syntax

print-color-adjust: [economy | exact];

• Initial: economy
• Applies: alle Elemente
• Inherited: ja
• Computed value: angegebener Schlüsselwert
• Animationstyp: diskret

Werte

/* Keyword values */
print-color-adjust: economy;
print-color-adjust: exact;

/* Global values */
print-color-adjust: inherit;
print-color-adjust: initial;
print-color-adjust: revert;
print-color-adjust: revert-layer;
print-color-adjust: unset;

• economy (initialer Wert): Dieser Wert erlaubt dem Browser, Anpassungen an Farbe und Stil eines Elements vorzunehmen, wo er dies für notwendig hält, sei es zur Verbesserung der Lesbarkeit, zum Ersetzen einer Farbe, die ein Gerät nicht anzeigen kann, oder aus anderen Gründen. Beachten Sie, dass dies der Standardwert ist und Browser auch dann so verhalten, wenn die Eigenschaft nicht angewendet wird.
• exact: Dieser Wert weist den Browser an, eine Farbe auf jeden Fall abzugleichen, um das deklarierte Styling zu erhalten. Er würde verwendet, um Stile hervorzuheben, die für das Element „wichtig“ oder „bedeutend“ sind.

Beachten Sie, dass die Standardverwendung von economy – ob die Eigenschaft aufgerufen wird oder nicht – darauf hindeutet, dass print-color-adjust als Signal für Browser gedacht ist, das wichtige Stile kennzeichnet, die erhalten werden müssen. Der Browser trifft die endgültige Entscheidung.

Demo

Hier haben wir einige Abschnitte mit einer Überschrift, einem Absatz und einigen Farben. Die Farben des Textes sind absichtlich unleserlich, um darzustellen, wie der Browser sie beim Drucken korrigieren würde. print-color-adjust ist auf seinen Standardwert economy eingestellt. Aber vergleichen wir ein paar Screenshots, die den Unterschied zwischen diesem und der Deklaration von exact Farben zeigen.

Spezifikation

Die Eigenschaft print-color-adjust ist in der Spezifikation CSS Color Adjustment Module Level 1 definiert, die zum Zeitpunkt der Erstellung im Editor-Entwurfsstatus ist. Das bedeutet, sie wurde noch nicht vom W3C verabschiedet und könnte in späteren Revisionen aktualisiert, geändert oder sogar gestrichen werden. Daher ist diese Eigenschaft nicht für die Produktion bereit und gilt als experimentell.

Browser-Unterstützung

Wir werden die caniuse Browser-Support-Daten für color-adjust hier einfügen, da diese zum Zeitpunkt der Erstellung verfügbar sind.

Hier ist, was wir für das Präfix -webkit-print-color-adjust haben.

Zwischen Browsern, die print-color-adjust und webkit-print-color-adjust unterstützen, ist fast alles abgedeckt, außer Internet Explorer.

Verwandt