Farbanpassung - CSS-Tricks

Die color-adjustEigenschaft wird in der Spezifikation als "Beibehalten von Farben in Geräten mit unterschiedlichen Fähigkeiten" beschrieben. Sie wissen, wie es Telefone, Tablets und andere Geräte ohne Bildschirme in Retina-Qualität gibt? Nun, diese Eigenschaft gibt dem Browser einen Hinweis, um Entscheidungen darüber zu treffen, wie Farben basierend auf dieser Qualität behandelt werden sollen.

Sie denken vielleicht etwas in der Art von: "Warten Sie, ist Rot nicht nur Rot?" Und ja, das ist absolut wahr. Was bringt es, eine Farbe zu optimieren oder anzupassen, die wahr ist, unabhängig davon, wo sie angezeigt wird?

Der Punkt ist, dass Browser bereits dazu neigen, diese Bestimmungen vorzunehmen und Farben selbst anzupassen, z. B. ein etwas anderes Rot auszugeben, wenn der Benutzeragent aufgrund der Bildschirmqualität eines anderen Faktors nicht in der Lage ist, ein bestimmtes Hex zu rendern. Die Eigenschaft sagt effektiv zum Browser: "Hey, ich möchte, dass Sie diese Farbe verwenden, aber es ist cool, wenn Sie Ihre beste Alternative für die Situation nicht anwenden können und wollen." Umgekehrt kann es den Browser anweisen, die Farbe um jeden Preis genau anzupassen.

Gedruckte Stile

Interessanterweise verwendet die Spezifikation das Beispiel des Druckens von Webseiten in der gesamten Definition von color-adjust. Es gibt jedoch keine tatsächliche Dokumentation, die zum Drucken vorgesehen ist. Das hat Chrome und Safari nicht davon abgehalten, eine vorangestellte Version mit dem Namen zu implementieren. Dies webkit-print-color-adjustist ein starkes Indiz dafür, dass sie für Druckzwecke bestimmt ist.

Warum ist das wichtig? Die Spezifikation beschreibt einen Anwendungsfall, bei dem das Beibehalten des Zebrastreifens eines gestalteten Tisches auf einer gedruckten Seite die Lesbarkeit verbessern kann:

Beispielsweise kann eine Mapping-Website mit gedruckten Anweisungen die Schritte in den Anweisungen mit einem Zebrastreifen versehen und zwischen weißem und hellgrauem Hintergrund wechseln. Wenn Sie diesen Zebrastreifen verlieren und einen rein weißen Hintergrund haben, ist es schwieriger, die Anweisungen mit einem kurzen Blick zu lesen, wenn Sie in einem Auto abgelenkt sind.

Syntax

.my-element ( color-adjust: (economy | exact); )

Werte

• economy(Anfangswert): Mit diesem Wert kann der Browser die Farbe und das Design eines Elements anpassen, wenn er entscheidet, ob es die Lesbarkeit verbessern, eine Farbe ersetzen soll, die ein Gerät nicht anzeigen kann, oder einen anderen Faktor. Beachten Sie, dass dies der Standardwert ist. Auch wenn die Eigenschaft nicht angewendet wird, verhalten sich Browser so.
• exact: Dieser Wert weist den Browser an, um jeden Preis eine Farbe zuzuordnen, um das deklarierte Styling beizubehalten. Es wird verwendet, um Stile aufzurufen, die für das Element „wichtig“ oder „signifikant“ sind.

Beachten Sie, dass die Standardverwendung, economyob die Eigenschaft aufgerufen wird oder nicht, darauf hindeutet, dass color-adjustBrowser ein Signal erhalten, das Stile angibt, die wichtig genug sind, um beibehalten zu werden.

Spezifikationsstatus

Die color-adjustEigenschaft ist im CSS-Farbmodul Level 4 definiert, das sich zum Zeitpunkt dieses Schreibens im Status eines ersten öffentlichen Arbeitsentwurfs befindet. Dies bedeutet, dass es noch vom W3C gebilligt werden muss und in späteren Revisionen aktualisiert, geändert oder sogar gelöscht werden kann. Daher ist diese Eigenschaft nicht produktionsbereit und wird als experimentell angesehen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom	Feuerfuchs	IE	Kante	Safari
19 *	48	Nein	79 *	6 *

Handy / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4

Mehr Informationen

• CSS Color Module Level 4 Erster öffentlicher Arbeitsentwurf
• Microsoft Edge-Nutzungsstatistik
• MDN-Dokumentation
• Die Möglichkeiten der Farbanpassungseigenschaft