Dieses Dokument ist Teil des High-Definition CSS-Farbleitfadens.
Es gibt zwei Hauptstrategien, um die Farbe Ihres Webprojekts so zu aktualisieren, dass eine breite Farbskala angezeigt wird:
Graduelle Fehlertoleranz: Verwenden Sie die neuen Farbräume und lassen Sie Browser und Betriebssystem bestimmen, welche Farbe basierend auf den Anzeigefunktionen angezeigt werden soll.
Progressive Verbesserung: Verwenden Sie
@supportsund@media, um die Funktionen des Browsers des Nutzers zu bewerten. Wenn die Bedingungen erfüllt sind, können Sie Farben in einem großen Farbraum verwenden.
Wenn ein Browser die display-p3-Farbe nicht erkennt:
color: red;
color: color(display-p3 1 0 0);
Wenn ein Browser die display-p3-Farbe erkennt:
color: red;
color: color(display-p3 1 0 0);
Beides hat Vor- und Nachteile. Hier ist eine kurze Liste der Vor- und Nachteile:
Graceful Degradation
- Vorteile
- Die einfachste Route.
- Wenn es sich nicht um eine Wide-Gamut-Anzeige handelt, wird in der Browser-Gamut sRGB verwendet. Daher liegt die Verantwortung beim Browser.
- Nachteile
- Der Browser kann Gamut Clamp oder Gamut Map an eine Farbe anpassen, die Sie nicht mögen.
- Der Browser versteht die Farbanforderung möglicherweise nicht und schlägt ganz fehl. Sie können dies jedoch umgehen, indem Sie die Farbe zweimal angeben, sodass die Kaskade auf die vorherige Farbe zurückgesetzt werden kann, die sie versteht.
Progressive Enhancement
- Vorteile
- Mehr Kontrolle durch die verwaltete Farbwiedergabe.
- Eine additive Strategie, die sich nicht auf die aktuellen Farben auswirkt.
- Nachteile
- Sie müssen zwei separate Farbsyntaxen verwalten.
- Sie müssen zwei verschiedene Farbgamuts verwalten.
Unterstützung für Gamut und Farbraum prüfen
Der Browser ermöglicht die Prüfung auf Unterstützung für Wide-Gamut-Funktionen und Farbsyntaxunterstützung durch CSS und JavaScript. Die genaue Farbskala des Nutzers wird nicht zur Verfügung gestellt. Es wird eine allgemeine Antwort gegeben, um die Privatsphäre der Nutzer zu wahren. Die exakte Farbraumunterstützung wird jedoch angeboten, da diese nicht spezifisch für die Funktionen der Benutzerhardware wie die Gamut ist.
Support-Anfragen für Farbgamut
In den folgenden Codebeispielen wird der Farbbereich des Besuchers auf dem Display geprüft.
Von Preisvergleichsportal prüfen
Die am wenigsten spezifische Supportanfrage ist die Medienabfrage dynamic-range:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
Ungefährer oder mehr Support kann mit der color-gamut-Medienabfrage erfragt werden:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
Es gibt zwei weitere Medienabfragen, um die Unterstützung zu prüfen:
Aus JavaScript prüfen
Bei JavaScript kann die Funktion window.matchMedia() aufgerufen und eine Medienabfrage zur Auswertung übergeben werden.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
Das obige Muster kann für den Rest der Medienabfragen kopiert werden.
Supportanfragen zum Farbraum
In den folgenden Codebeispielen werden der Browser des Nutzers und die Auswahl der Farbräume geprüft, mit denen er verwendet werden soll.
Von Preisvergleichsportal prüfen
Über eine @supports-Abfrage können Sie Unterstützung für einzelne Farbräume anfordern:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
Aus JavaScript prüfen
Bei JavaScript kann die Funktion CSS.supports() aufgerufen und ein Property-Wert-Paar übergeben werden, um festzustellen, ob der Browser die Funktion versteht.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
Hardware- und Parsing-Prüfungen zusammenstellen
Während Sie darauf warten, dass die neuen Farbfunktionen in den einzelnen Browsern implementiert werden, sollten Sie sowohl die Hardware- als auch die Farbanalysefunktion prüfen. Dies verwende ich häufig, wenn ich Farben schrittweise auf High Definition verbessere:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Farbfehler mit den Chrome-Entwicklertools beheben
Die Chrome-Entwicklertools wurden aktualisiert und enthalten neue Tools, mit denen Entwickler HD-Farben erstellen, konvertieren und debuggen können.
Farbauswahl aktualisiert
Die Farbauswahl unterstützt jetzt alle neuen Farbräume. Autoren können so mit Kanalwerten interagieren wie sie es tun würden.
Gamutgrenzen
Außerdem wurde eine Gamut-Grenze hinzugefügt, die eine Linie zwischen den Skalen von „srgb“ und „display-p3“ zieht. Damit ist zu erkennen, in welchem Farbraum sich die ausgewählte Farbe befindet.
Dies erleichtert Autoren die visuelle Unterscheidung zwischen HD-Farben und Nicht-HD-Farben.
Dies ist besonders hilfreich bei der Arbeit mit der color()-Funktion und den neuen Farbräumen, da damit sowohl Nicht-HD- als auch HD-Farben erzeugt werden können. Wenn Sie überprüfen möchten, in welchem Umfang Ihre Farbe ist, öffnen Sie die Farbauswahl und sehen Sie sich an!
Farben umwandeln
DevTools kann seit vielen Jahren Farben zwischen unterstützten Formaten wie HSL, HWB, RGB und Hex konvertieren. shift + click auf einem quadratischen Farbmuster im Bereich „Stile“, um diese Konvertierung durchzuführen. Mit den neuen Farbtools werden nicht nur Conversions durchlaufen, sondern auch ein Dialogfeld geöffnet, in dem die Autoren die gewünschte Conversion sehen und auswählen können.
Bei der Konvertierung ist es wichtig zu wissen, ob die Konvertierung an den Platz angepasst wurde. In den Entwicklertools wird für die konvertierte Farbe jetzt ein Warnsymbol angezeigt, das dich auf diesen Clip zeigt.
Weitere Informationen zur CSS-Debugging-Funktion in den Entwicklertools
Nächste Schritte
Mehr Dynamik, einheitliche Änderungen und Interpolationen sowie eine insgesamt farbenfrohere Erfahrung für die Nutzer.
Weitere Informationen finden Sie im Leitfaden zu Farbressourcen.