Die Möglichkeiten der color-adjust-Eigenschaft

Die color-adjust Eigenschaft wurde in print-color-adjust umbenannt.

Das offene Web taucht weiterhin an Orten auf, an denen wir es ursprünglich nie erwartet hätten: auf unseren Handys, Fernsehern, Uhren, Büchern, Spielkonsolen, Fast-Food-Menüs, Zapfsäulen, Aufzügen, Autos – sogar auf unseren Kühlschränken.

Indem wir keine zu vielen oder zu strengen Annahmen darüber treffen, wie das Web genutzt werden sollte, bleibt es flexibel und anpassungsfähig. Diese Qualitäten haben es ihm ermöglicht, geschlossene Technologien wie Flash und Silverlight zu übertreffen.

Mit dem Wachstum des Webs kommen neue Funktionen, um seinen neuen Formfaktoren und Anwendungsfällen besser gerecht zu werden. Eine Funktion, auf die ich mich freue, ist die color-adjust-Eigenschaft, die im CSS Color Module Level 4 vorgeschlagen wurde. Sie ist eine Anerkennung dafür, dass das Web weiterhin auf Geräten angezeigt wird, die weniger als hervorragende Displays haben.

Es gibt zwei Werte für color-adjust: economy und exact. Ein Wert von exact weist den Browser an, keine Anpassungen an den in der Stylesheet deklarierten Farben vorzunehmen.

.card { 
  background-color: #98b3c7;
  border-bottom: 0.25rem solid #7c92a3;
  color: #f3f3f3;
  color-adjust: exact;
  ...
}

Die Deklaration color-adjust: exact; in diesem Beispiel zwingt den Browser, alle Farben so genau wie möglich auf allem mit der Klasse card darzustellen. Genau bedeutet hierbei, so nah wie möglich an der besten Fähigkeit des Host-Geräts zu sein.

Die Beschreibung des Wertes economy in der Spezifikation lautet: „Der User-Agent sollte Anpassungen am Styling der Seite vornehmen, wie es für das Ausgabegerät als notwendig und ratsam erachtet wird.“ Sie legt das Vertrauen in die Hände des Browsers und erlaubt ihm, Anpassungen an den Farb-Werten nach eigenem Ermessen vorzunehmen.

Beste Fähigkeit

Die Kontrolle an einen Browser zu übergeben, mag anfangs etwas beängstigend erscheinen. Als Branche sind wir wirklich gut darin, Farbsysteme bis zum Exzess zu zerreden. Und das ist auch gut so! Die Verwendung von Farben, einschließlich richtiger Kontrastverhältnisse, ist ein unglaublich wichtiger Aspekt des Designs und kann oft ein Produkt ausmachen oder zerstören.

Aber wir müssen verstehen, dass unser platonisch ideales Design möglicherweise nicht wie beabsichtigt in der realen Welt erlebt werden kann. Nicht jeder besitzt ein Gerät, das auf einem Retina-Display mit einem luxuriösen DCI-P3-Farbraum ausgibt; auch hat nicht jeder immer perfekte Sehkraft oder ideale Lichtverhältnisse. Unter diesen Umständen ist es besser, sich anzupassen, anstatt zu zerbrechen.

Wir leben jetzt in einer Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First-Welt. Begrenzte Farbanzeigen sind nicht so selten, wie man denkt, und werden wahrscheinlich im Laufe der Zeit noch häufiger vorkommen. Besonders hervorheben möchte ich den Anstieg der Internetnutzung durch einkommensschwache Bevölkerungsgruppen und Schwellenmärkte. Damit einher gehen günstigere Geräte mit geringerer Display-Qualität.

Browser-Unterstützung

Zum Zeitpunkt der Veröffentlichung dieses Artikels wurde color-adjust seit Firefox 48 (und Android Firefox 60) unterstützt.

Chrome und Safari, beide WebKit-Browser, erfordern eine vendor-präfixte Deklaration von -webkit-print-color-adjust. Kurioserweise signalisiert -webkit-print, dass ihre Implementierung dieser Eigenschaft nur für den Druck gedacht ist. Während die W3C-Dokumentation Anwendungsfälle für den Druck erwähnt, ist sie so formuliert, dass sie sich nicht darauf beschränkt.

Leute drucken immer noch Webseiten! Papier erfordert keinen Datenplan und die Verbindung bricht nicht ab, wenn Sie unter die Erde fahren. Erst gestern sah ich im Zug jemanden, der eine Sammlung gedruckter Seiten nutzte, um für seine nächste Prüfung zu lernen. Und hier kommt Ihr Galaxien-Hirn-Moment: Gedruckte Seiten sind einfach begrenzte Farbanzeigen.

Ich wäre auch nachlässig, wenn ich Situationen nicht erwähnen würde, in denen Druckstile fehlen oder schlecht formuliert sind, was einen Drucker potenziell dazu zwingen könnte, Tinte zu verschwenden, um zu versuchen, das zu tun, was die Stylesheet von ihm verlangt. Druckertinte ist wahnsinnig teuer – das zu berücksichtigen, ist eine Wohltat für Ihr (oder das Budget Ihrer IT-Abteilung).

Potenzielle Anwendungsfälle

Bevor wir weitergehen, möchte ich darauf hinweisen, dass das Folgende reine Spekulationen sind, die auf der Formulierung in der W3C-Spezifikation basieren – mit Fokus auf Drucken, aber nicht darauf beschränkt.

Ich glaube, color-adjust könnte eine dieser Eigenschaften sein, die explizit im body-Selektor deklariert werden könnten, um den Vorteil der Kaskade am besten zu nutzen.

body {
  color-adjust: economy;
  ...
}

Diese Deklaration besagt: „Jedes Mal, wenn ich auf dieser Website Farben deklariere, verwende die von mir angegebenen Werte. Wenn Sie es nicht können, ist das in Ordnung – tun Sie, was Sie für richtig halten.“ Das ist viel besser, als wenn der Browser versucht, Styling-Anweisungen um jeden Preis buchstäblich zu interpretieren, was die Seite potenziell komplett unleserlich macht.

Sie könnten color-adjust spezifischer deklarieren, z. B. verschachtelt in einer @supports-Regel innerhalb einer Print-Media-Query, aber das ist unnötige Mehrarbeit. Es würde Dinge wie den High Contrast Mode und die kommende Farbraum-Medienfunktion nicht berücksichtigen. Besser ist es, das Unbekannte zu umarmen und ein weites Feld abzudecken.

Ich bin auch sehr gespannt, wie color-adjust mit anderen Browserfunktionen zusammenarbeiten könnte, z. B. mit der Ambient Light Sensor API (RIP Battery Status API). Es wäre nett, wenn es Möglichkeiten gäbe, mit anderen spezialisierten Anzeigemodi zu experimentieren – macOS' Night Shift, erhöhter Kontrast, Graustufen und reduzierte Transparenz kommen einem alle in den Sinn.

Ein Hinweis zur Barrierefreiheit

Ich frage mich, ob Software (Browser-Präferenz-Umschalter oder Erweiterung, Lesezeichen-Skript usw.) geschrieben werden könnte, um das, was die Hardware des Geräts als sich selbst meldet, zu überschreiben. Ähnlich wie beim User Agent Spoofing könnte sie einen Browser dazu „verleiten“, zu denken, er hätte eine begrenzte Farbanzeige, und economy verwenden, um einen besseren Kontrast zwischen Text- und Hintergrundfarbe zu erzwingen. Dies wäre sehr ähnlich zu den Lesemodi einiger Browser, nur dass das Seitenlayout besser erhalten bliebe.

Das gesagt, glaube ich nicht, dass color-adjust ein Allheilmittel für alle farbbezogenen Barrierefreiheitsprobleme ist. Wir können nicht immer das Gerät und den Kontext kennen, in dem unsere Websites und Webanwendungen angezeigt werden, einschließlich der Farben, zu denen color-adjust letztendlich rendern würde. Aus diesem Grund ist es immer noch wichtig, auf Ihre Farbkontrastverhältnisse zu achten.

Anpassen, nicht brechen

color-adjust fühlt sich wie eine natürliche Erweiterung von Jen Simmons' Intrinsic Web Design an: flüssige und flexible UI, proportionale Größenbestimmung, bei Bedarf Media Queries und einfache Deklarationen, die die Hauptarbeit leisten.

Die Schönheit der CSS-Kaskade bedeutet, dass Sie den Intent (Absicht) elegant erstellen und dann nach Bedarf anpassen können. Die Dokumentation von color-adjust erwähnt ausdrücklich eine Situation, in der es nützlich sein könnte, sicherzustellen, dass die Zebra-Streifen einer Tabelle beim Drucken erhalten bleiben, um die Lesbarkeit zu verbessern. Eine solche Anpassung kann auf einen einzelnen Selektor beschränkt werden, ohne dass Zeit darauf verwendet werden muss, sie für jede andere Komponente rückgängig zu machen.

body {
  color-adjust: economy;
  ...
}

tr {
  color-adjust: exact;
}

Die Schönheit der Fehlertoleranz von CSS bedeutet, dass Browser, die diese Deklaration nicht verstehen, sie ignorieren und mit dem Parsen des Restes der Stylesheet fortfahren. Browser, die sie unterstützen, können sie nutzen, ohne komplizierte Build-Tool-Konfigurationen oder gefährliches User Agent Sniffing.

Es ist wichtig, unsere Websites und Webanwendungen so zu gestalten, dass sie sich an die Umgebung und die Umstände des Benutzers anpassen und nicht umgekehrt. Gute Benutzererlebnisse treffen den Benutzer dort, wo er ist, nicht dort, wo wir hoffen, dass er sein wird.