Zu HD-CSS-Farbe migrieren

Dieses Dokument ist Teil des High-Definition-CSS-Farbleitfadens.

Es gibt zwei Hauptstrategien, um die Farbe Ihres Webprojekts entsprechend anzupassen. Wide-Gamut-Bildschirme:

1. Graceful Degradation: Verwenden Sie die neuen Farbräume und lassen Sie den Browser und um herauszufinden, welche Farbe verwendet wird.

2. Progressive Enhancement: Verwenden Sie @supports und @media, um die Leistungsfähigkeit Browserfunktionen des Nutzers und unter Bedingungen eine umfassende unterschiedliche Farben.

Wenn ein Browser die Farbe display-p3 nicht erkennt:

color: red;
color: color(display-p3 1 0 0);

Wenn ein Browser die Farbe display-p3 versteht:

color: red;
color: color(display-p3 1 0 0);

Beide haben Vor- und Nachteile. Hier ist eine kurze Liste mit Pro- und Nachteile:

Graceful Degradation

• Vorteile <ph type="x-smartling-placeholder">
  </ph>
  • Die einfachste Route.
  • Wenn keine Anzeige mit großem Farbraum verwendet wird, wird die Browserauswahl an sRGB angepasst. Daher liegt die Verantwortung beim Browser.
• Nachteile <ph type="x-smartling-placeholder">
  </ph>
  • Der Browser kann eine Farbe festlegen, die Ihnen nicht gefällt.
  • Der Browser versteht die Farbanforderung möglicherweise nicht und schlägt vollständig fehl. Allerdings Sie können dies abschwächen, indem Sie die Farbe zweimal angeben. Fallback auf die vorherige Farbe zurück, die es versteht.

Progressive Enhancement

• Vorteile <ph type="x-smartling-placeholder">
  </ph>
  • Mehr Kontrolle dank verwalteter Farbwiedergabe.
  • Eine additive Strategie, die sich nicht auf die aktuellen Farben auswirkt.
• Nachteile <ph type="x-smartling-placeholder">
  </ph>
  • Sie müssen zwei separate Farbsyntaxen verwalten.
  • Sie müssen zwei separate Farbgamuts verwalten.

Unterstützung für Gamut und Farbraum prüfen

Der Browser ermöglicht die Überprüfung, ob breite Palette und Farben unterstützt werden Syntaxunterstützung von CSS und JavaScript. Die genaue Farbpalette, die die Nutzenden haben nicht verfügbar gemacht wird, wird eine allgemeine Antwort gegeben, damit die Privatsphäre der Nutzer beibehalten werden. Die genaue Unterstützung des Farbraums ist jedoch verfügbar, da dies nicht der Fall ist. die speziell für die Hardwarefunktionen des Nutzers wie z. B. Gamut gelten.

Supportabfragen für Farbgamut

Mit den folgenden Codebeispielen wird der Farbbereich des Besuchers in seinen Display.

Vom Preisvergleichsportal prüfen

Die am wenigsten spezifische Supportanfrage ist die dynamic-range Medienabfrage:

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

Ungefähre oder höhere Supportwerte können beim color-gamut Medienabfrage:

@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 überprüfen:

1. @media (color)
2. @media (color-index)

Über JavaScript prüfen

Bei JavaScript werden mit der Methode window.matchMedia() kann 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 die restlichen Medienabfragen kopiert werden.

Supportanfragen zum Farbraum

Mit den folgenden Codebeispielen werden der Browser des Besuchers und seine Auswahl geprüft mit denen Sie arbeiten können.

Vom Preisvergleichsportal prüfen

Individuelle Farbräume können über eine @supports-Abfrage:

@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 */
}

Über JavaScript prüfen

Bei JavaScript werden mit der Methode CSS.supports() kann aufgerufen und ein Eigenschaft/Wert-Paar übergeben werden, um zu sehen, die der Browser 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 durchführen

Während Sie darauf warten, dass jeder Browser diese neuen Farbfunktionen implementiert, sollte sowohl die Hardwarefähigkeit als auch die Farbanalyse geprüft werden. Das verwende ich häufig, wenn ich die Farben schrittweise auf High Definition optimiere:

: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);
  }
}

Farbe mit den Chrome-Entwicklertools debuggen

Die Chrome-Entwicklertools wurden aktualisiert und mit neuen Tools ausgestattet, die Entwicklern helfen HD-Farben zu erstellen, zu konvertieren und zu debuggen.

Aktualisierte Farbauswahl

Die Farbauswahl unterstützt jetzt alle neuen Farbräume. Autoren können wie sie mit den Werten des Channels interagieren.

Gamut-Grenzen

Außerdem wurde eine Gamut-Grenzlinie hinzugefügt, die eine Linie zwischen srgb und display-p3-Gamuts angezeigt. Es wird deutlich gemacht, in welchem Farbraum die ausgewählte Farbe enthalten ist.

So können Autoren zwischen HD-Farben und Nicht-HD-Farben unterscheiden. Das ist besonders hilfreich, wenn Sie mit der color()-Funktion und dem neuen da sie in der Lage sind, sowohl Nicht-HD- als auch HD-Farben zu erzeugen. Wenn um zu sehen, in welcher Farbskala Ihre Farbe ist, öffnen Sie die Farbauswahl und sehen Sie nach!

Farben konvertieren

Mit den Entwicklertools konnten Farben zwischen unterstützten Formaten wie HSL, hwb, rgb und hex. shift + click auf einem quadratischen Farbmuster im Stilbereich zum Ausführen dieser Konvertierung. Mit den neuen Farbtools können Sie wird ein Dialogfeld geöffnet, in dem Autoren die die gewünschte Conversion erzielen.

Bei der Conversion ist es wichtig zu wissen, ob die Conversion so gekürzt wurde, Leerzeichen. Die Entwicklertools haben jetzt ein Warnsymbol in der konvertierten Farbe, das dich darauf hinweist zu diesem Clip hinzu.

Weitere Informationen zur CSS-Debugging-Funktion in den Entwicklertools

Nächste Schritte

Mehr Dynamik, konsistente Manipulationen und Interpolationen und ein und Ihren Nutzern eine farbenfrohere User Experience bieten.

Weitere Informationen zu Farben aus der Übersicht.