Ein kurzer Blick auf den ersten öffentlichen Arbeitsentwurf für das Color Adjust Modul 1

Wir sprechen hier viel über den Dark Mode, seitdem Apple ihn als Systemeinstellung in MacOS 10.14 und anschließend als Teil von Safari eingeführt hat. Das ist interessant sowohl wegen der Designmöglichkeiten, die sich dadurch eröffnen, als auch wegen der Anpassung des Benutzererlebnisses auf Basis tatsächlicher Benutzerpräferenzen.

Diese Woche erhielten wir einen Editor's Draft der Spezifikation für das Color Adjust Modul Level 1 und den ersten öffentlichen Arbeitsentwurf dazu. All dies ist in Arbeit, aber die Weiterentwicklung ist interessant zu verfolgen. Die Spezifikation führt drei neue CSS-Eigenschaften ein, die dem User-Agent mitteilen sollen, wie viel Kontrolle er bei der Bestimmung des visuellen Erscheinungsbilds einer gerenderten Seite basierend auf Benutzerpräferenzen haben soll.

color-scheme ist die erste im Entwurf definierte Eigenschaft und vielleicht ihr Kernstück. Sie akzeptiert die Werte light und dark, die – wie Sie vielleicht schon erraten haben – den Präferenzen für Light Mode und Dark Mode von Betriebssystemen entsprechen, die diese unterstützen. Und, am Rande bemerkt, wir könnten Labels wie „Day“ und „Night“ statt „Light“ und „Dark“ vorfinden, aber im Grunde geht es um ein helles Farbschema im Vergleich zu einem dunklen.

Diese einzelne Eigenschaft hat einige wichtige Implikationen. Erstens ist die Idee, dass sie es uns ermöglicht, Stile basierend auf den Systemeinstellungen eines Benutzers festzulegen, was uns eine feingranulare Kontrolle über dieses Erlebnis gibt.

Eine weitere mögliche Implikation ist, dass die Deklaration der Eigenschaft überhaupt dem User-Agent ermöglicht, die Verantwortung für die Bestimmung der Farben eines Elements zu übernehmen. Die Deklaration von light oder dark informiert den User-Agent darüber, dass ein Element Farbschemata „kennt“ und gemäß einer übereinstimmenden Präferenzeinstellung gestylt werden sollte. Andererseits können wir dem Browser durch die Verwendung des Werts auto die volle Kontrolle überlassen, um zu entscheiden, welches Farbschema basierend auf den Systemeinstellungen des Benutzers verwendet werden soll. Dies teilt dem Browser mit, dass ein Element Farbschemata „nicht kennt“ und der Browser entscheiden kann, wie er unter Verwendung der Benutzereinstellungen und der Standardstile des Systems vorgeht.

An dieser Stelle sei darauf hingewiesen, dass wir auch ein Media-Feature prefers-color-scheme haben könnten (derzeit im Editor's Draft für die Media Queries Level 5 Spezifikation), das ebenfalls dazu dient, die Präferenzen eines Benutzers zu erkennen und uns mehr Kontrolle über das Benutzererlebnis auf Basis von Systemeinstellungen zu geben. Robin hat eine gute Übersicht dazu. Der Color Adjust Module Level 1 Working Draft erwähnt auch die mögliche Verwendung eines Farbschema-Werts in einem <meta>-Element, um die Unterstützung von Farbschemata anzuzeigen.

Natürlich gibt es mehr zu dieser Eigenschaft, einschließlich eines only-Schlüsselworts, der Verkettung von Werten zur Angabe einer Präferenzreihenfolge und sogar eines offen gestalteten benutzerdefinierten Identifikationsschlüsselworts. Graben Sie sich also unbedingt ein, denn es gibt viel zu erfassen.

Ziemlich interessant, oder? Hoffentlich beginnen Sie zu sehen, wie dieser Entwurf neue Möglichkeiten eröffnen und sogar beeinflussen könnte, wie wir Designentscheidungen treffen. Und das ist erst der Anfang, denn es gibt noch zwei weitere Eigenschaften!

• forced-color-adjust: Dies wird verwendet, wenn wir Farbschemata unterstützen möchten, aber das Standard-Stylesheet des User-Agents mit unserem eigenen CSS überschreiben wollen. Dies beinhaltet eine Notiz über die mögliche Zusammenführung in color-adjust.
• color-adjust: Im Gegensatz zum Erzwingen von CSS-Überschreibungen auf den User-Agent gibt diese Eigenschaft Browsern einen Hinweis, dass sie Farbwerte basierend auf den Präferenzen des Benutzers und anderen Faktoren wie Bildschirmqualität, Bandbreite oder allem, was als „notwendig und ratsam für das Ausgabegerät erachtet wird“, ändern können. Eric Bailey hat die Möglichkeiten, die diese Eigenschaft eröffnen könnte, in Bezug auf Anwendungsfälle, verbesserte Barrierefreiheit und allgemeine Implementierungen aufgeschrieben.

Der aktuelle Entwurf wird sich sicher noch erweitern, aber hier können wir uns über die großartige Arbeit der W3C-Autoren informieren, den Kontext ihrer Herausforderungen verstehen und sogar zur Arbeit beitragen. (Siehe Rachel Andrews Ratschläge zur Beteiligung.)