Eine Vorschau von 4 neuen CSS -Farbfunktionen

In diesem Artikel werden die neuesten Änderungen im CSS -Farbfeld und mögliche zukünftige Änderungen mit einer überraschenden Menge an Inhalten untersucht. Neue und bevorstehende Methoden zur Definition von Farben sind auf die Anzahl der noch größeren Weise als vorhanden. Schauen wir uns kurz an.

Erstens ist es wichtig zu betonen, dass diese Inhalte sehr komplex sind. Ich persönlich finde es schwierig, es vollständig zu verstehen. Aber hier sind einige wichtige Punkte:

• Bis alle bevorstehenden Änderungen haben wir nur RGB als Farbmodell, und alles basiert darauf.
• Wir haben unterschiedliche "Farbräume", um sie anders zu handhaben (z. B. ordnet die RGB () -Funktion das RGB -Farbmodell mit linearen Koordinaten in einen Würfel ab, die HSL () -Funktion ordnet das RGB -Farbmodell an einen Zylinder ab), aber sie gehören zum SRGB -Farbdarm.
• Mit den bevorstehenden Änderungen erhalten wir ein neues Farbmodell und (!) Erhalten wir eine neue Funktion, die dieses Farbmodell auf unterschiedliche Weise ordnet. Ich denke, es ist ein doppelter oder sogar dreifacher Schlag.

Ich kann Ihnen nicht alle Details im Detail erklären - ich schreibe dies, weil ich glaube, dass viele Leute, wie ich, wissen möchten, warum wir uns darum kümmern sollten, und das versuche ich zu verstehen, warum ich mich darum kümmern sollte.

Display-P3 schaltet mehr leuchtende Farben ein, die bisher unerreichbar waren.

 Körper {
  Hintergrund: Farbe (Display-P3 1 0,08 0); */
}

Es stellt sich heraus, dass moderne Monitore mehr Farben, insbesondere zusätzliche leuchtende Farben, anzeigen können, aber wir haben einfach keine Möglichkeit, diese Farben mithilfe der klassischen CSS -Farbsyntax wie Hex, RGB und HSL zu definieren. Sehr seltsam, oder? ! Wenn Sie jedoch Display-P3 verwenden, können Sie diese leuchtenden Farben weiterhin auf diese leuchtenden Farben zugreifen.

Die Panik der Entwicklungsfirma bemerkte dies früh und begann, diese Farben als "geheime Waffen" zu verwenden:

? Zusätzlich zu WebGL ist die Farbe P3 jetzt ein wichtiger Teil des Geheimwaffenstapels der Panik. Shh, sag es niemandem, du solltest diese Seite auf dem iMac Pro -Bildschirm anzeigen! https://www.php.cn/link/f08c64512c2ce6b9642b58563e9c029b

- Panik (@Panic) 24. Mai 2019

Jen Simmons beschreibt auch, wie man sie verwendet, einschließlich Fallback -Optionen für nicht unterstützte Browser:

P3 -Farbe anzeigen. Im Browser entworfen. wunderbar.

Lassen Sie mich Ihnen zeigen, wie Sie zu P3 wechseln, eine Farbe finden und dann eine Fallback -Farbe für ältere Browser finden. Alle Vorgänge werden in Safari Web Inspector durchgeführt. (Öffnen Sie den Sound und hören Sie meine Erklärung an!) Pic.twitter.com/aakhrn2s3e

- Jen Simmons (@jensimmons) 5. Januar 2022

Ressource

• CSS breite Bandbreite mit Display-P3 (Webkit-Blog)
• Der ständig wachsende Farbumfang im Internet (Ollie Williams)

HWB ist "menschlicher", aber das ist ein bisschen fraglich und basiert immer noch auf SRGB.

Ich wusste nicht, was HWB () vorher ist - dank Stefan Judis 'Blog -Beitrag.

Normalerweise betrachte ich HSL als "humanisiertes" CSS-Farbformat (und für die Programmkontrolle geeignet), da die Sättigung und Helligkeit von 360 ° und 0 bis 100% eine gewisse Bedeutung haben.

Aber in hwb () haben wir den Farbton (ich denke genauso wie HSL), dann das Weiß und die Schwärze . Stefan:

Durch das Hinzufügen von Weiß und Schwarz zur Farbe wirkt sich die Sättigung aus. Angenommen, Sie fügen der Farbe die gleiche Menge Weiß und Schwarz hinzu, der Farbton bleibt gleich, aber die Farbe verliert die Sättigung. Dies funktioniert für bis zu 50% weiß und 50% schwarz (HWB (0DEG 50% 50%)), was zu farbigen Farben führt.

Stefan bezweifelt, ob dies einfacher zu verstehen ist als HSL, und ich stimme zu. Vielleicht muss ich mich nur mehr daran gewöhnen, aber es scheint abstrakter zu sein, als einfach die Helligkeit oder Sättigung zu ändern.

HWB ist auf dieselbe Farbdarmsumme (SRGB) wie alle alten Farbformate beschränkt. Hier werden keine neuen Farben freigeschaltet.

Ressource

• HWB -Farbauswahl
• hwb () - Humanisierte Farbnotation? (Stefan Judis)

Labor ist wie ein RGB () mit einem breiteren Farbumfang

 div {
  Hintergrund: Labor (150% -400 400);
}

Als ich nachher fragte, mag ich Eric Portis 'Erklärung des Labors:

Labor ist wie RGB, es hat drei lineare Komponenten. Je niedriger die Zahl bedeutet, desto weniger das Ding und je größer die Zahl bedeutet, desto mehr das Ding. Sie können also Labor verwenden, um das hellste, grünste Grün aller Zeiten zu spezifizieren, das für alle sehr hell und grün sein wird, aber bei Monitoren mit einem breiteren Farbumfang heller und grüner ist.

Wir erhalten also alle zusätzlichen Farben, was großartig ist, aber es gibt ein weiteres Problem mit SRGB (neben dem begrenzten Farbausdruck), dh es ist nicht wahrnehmungsgemäß einheitlich . Brian Kardell:

Der SRGB -Raum ist nicht wahrnehmungsgemäß einheitlich. Die gleichen mathematischen Bewegungen haben an verschiedenen Positionen im Farbraum unterschiedliche Grad an Wahrnehmungseffekten. Wenn Sie damit über die Erfahrungen des Designers informieren möchten, finden Sie hier ein interessantes Beispiel, das den Prozess der hart arbeitenden Arbeit veranschaulicht.

Ein klassisches Beispiel hier ist, dass in HSL Farben mit genau der gleichen "Helligkeit" tatsächlich völlig anders anfühlen.

HSL und Labor :: Helligkeit?

Die gleiche Farbe aus unserer schwierigen Farbabstimmung, aber diesmal habe ich die Laborversion der gleichen Farbe gezeigt. Bitte beachten Sie, wie nahe der Helligkeitswert des Labors an den Ergebnissen liegt, für die wir gestimmt haben!

? Nicht alle Farbräume sind gleich! https://www.php.cn/link/ff15242553d87dd31723dcd88a087382 pic.twitter.com/xkeguq3Kzg

- Adam Argyle (@Argyleiink) 3. Dezember 2019

Aber im Labor ist es offensichtlich wahrnehmend einheitlich, was bedeutet, dass manipulierende Farben programmgesteuert eine vernünftigere Aufgabe sind. Ein weiterer Vorteil ist, dass die Laborfarbe als Gerätsunabhängig angegeben ist. Michelle Barker:

Labor und LCH werden in der Spezifikation als Gerätsunabhängige Farben definiert. LAB ist ein Farbraum, auf den in Software wie Photoshop zugegriffen werden kann. Es wird empfohlen, wenn Sie möchten, dass die Farbe auf dem Bildschirm beispielsweise auf einem T-Shirt gedruckt wird.

Ressource

• Lab () (MDN)
• Leitfaden zur Verwendung moderner CSS -Farben für RGB, HSL, HWB, LAB und LCH (Michelle Barker)

LCH ist wie HSL () mit einem breiteren Farbumfang

Denken Sie daran, als ich sagte, HSL sei "menschlich", weil es einfacher zu verstehen ist als RGB? Das Ändern von Farbton, Sättigung und Helligkeit ist sinnvoll. LCH () In ähnlicher Weise haben wir Helligkeit , Chromatizität und Farbton . Zurück zu meinem Gespräch mit Eric Portis:

LCH ist eher HSL: ein polarer Koordinatenraum. H = Hue = ein Kreis. Mathematik, um komplementäre Farben zu wählen (oder welche Transformation, nach der Sie nachgehen), wird trivial (fügen Sie einfach 180 hinzu - oder einen anderen Wert!)

Ich denke, Sie würden sich für LCH entscheiden, nur weil Sie seine Syntax mögen oder weil es einige der komplexen programmatischen Operationen macht, die Sie einfacher ausführen möchten - und Sie wissen, dass es über 50% der Farben kostenlos ausdrückt.

Wir gewinnen auch hier wahrgenommene Einheit. Lea Verou scheint aufgeregt zu sein, dass Helligkeit tatsächlich Sinn macht:

In HSL ist die Helligkeit bedeutungslos. Farben können den gleichen Helligkeitswert haben, aber die wahrgenommene Helligkeit ist sehr unterschiedlich. […] Bei LCH ist jede Farbe mit der gleichen Helligkeit gleichermaßen wahrnehmend hell, und jede Farbe mit der gleichen Chromatizität ist gleichermaßen wahrnehmungsgesättigt.

Ein weiterer Vorteil des neuen Modells besteht darin, dass wir die "graue Deadzone" im CSS -Farbgradienten loswerden können. Ich denke nicht, dass die beiden reichen Farben aufgrund dieser Wahrnehmungseinheit nicht seltsam werden und sich in nichtreichen Gebieten allmählich verändern.

Hier ist eine kleine persönliche Vorhersage: Ich würde sagen, LCH () könnte ein Designer -Favorit werden. Es wird bald viele neue Farboptionen geben, und es ist immer zu schwierig und seltsam, verschiedene Farben zu wählen. LCH scheint psychologisch am effektivsten zu sein.

Ressource

• LCH () (MDN)
• LCH Farbe in CSS: Was, warum und wie? (Lea Verou)

"Sicher"

Labor und seine Freunde sehen so neu aus, weil es in CSS neu ist… aber das Labor wurde in den 1940er Jahren erfunden. In seinem Gespräch mit Adam Argyle verwendet er einen unvergesslichen Ausdruck: Alle Farbräume haben eine Achillesferse . Das heißt, sie sind ein wenig schlecht in Dingen. Für SRGB ist es ein Problem mit der grauen Deadzone und ein begrenzter Farbumfang. Labor ist gut, aber es hat sicherlich seine eigenen Schwächen. Zum Beispiel wird der blaue zu weiße Gradient im Labor ziemlich ungeschickt durch den lila Bereich gehen.

Im Dezember 2020 sagte Björn Ottosson: „Hey, ein neuer Farbraum erschien gerade“ und jetzt kommt Oklab. Offensichtlich glauben CSS -Entscheidungsträger, dass der Wert dieses Farbraums hoch genug ist, dass Oklab () und Oklch () normalisiert wurden. Ich denke, wir sollten uns darum kümmern, weil sie normalerweise besser sind, aber zitieren Sie nicht, was ich gesagt habe.

Warum verwendet Anzeige P3 die Funktion color (), während andere Funktionen nicht verwendet werden?

Ich weiß es wirklich nicht. Ich denke, die CSS Color () -Funktion ist relativ neu, und so hat Safari es überhaupt in sie eingesetzt. Ich weiß nicht, ob Display P3 seine dedizierten Funktionen erhält oder ob wir alle mit CSS Color () oder was beginnen sollten.

 /* Auf diese Weise werden Anzeige p3*/verwendet
Farbe (Display-P3 1 0,08 0);

/* Aber das funktioniert nicht*/
Farbe (Oklch 42,1% 0,192 328,6);

/ * Müssen Sie das tun? ‍♀️ */
Oklch (42,1% 0,192 328,6);

/ * Aber Sie können Farbraum im Verlauf verwenden ... */
Hintergrundbild: Linear-Gradient (
    rechts
    in Oklch,
    LCH (50% 100 100),
    LCH (50% 100 250)
  );

Die relative Farbsyntax ist sehr nützlich.

Es gibt eine sehr coole Funktion namens "relative Farbsyntax", in der Sie die CSS -Farbe grundsätzlich dekonstruieren können, während Sie sie in ein anderes Format bewegen. Angenommen, Sie haben (anscheinend) die berühmteste CSS -Hex -Farbe, Nebelhund, und Sie möchten ihn in HSL umwandeln:

 Körper {
  Hintergrund: HSL (von #f06D06 HSL);
}

Vielleicht funktioniert das nicht sofort, aber hey, jetzt können wir Alpha dazu hinzufügen! Es gibt tatsächlich keine andere Möglichkeit, Alpha auf vorhandene Sechskantfarben anzuwenden, daher ist dies sehr wichtig:

 Körper {
  Hintergrund: HSL (aus #F06D06 HSL / 0,5);
}

Aber ich kann es auch ändern. Angenommen, ich möchte den Nebelhund ein wenig sättigen, bevor ich die Deckkraft hinzufüge, da die niedrigere Deckkraft ihn natürlich verdunkelt, ich möchte das ausgleichen. Ich kann Calc () für die dort impliziten Variablen verwenden:

 Körper {
  Hintergrund: HSL (aus #F06D06 H Calc (s 20%) l / 0,5);
}

Das ist so cool. Ich bin sicher, wir werden etwas Erstaunliches daraus sehen. Es ist sicherlich nicht auf HSL beschränkt. Ich benutze nur HSL, weil ich es jetzt bequem finde. Wenn ich will, kann ich mit der benannten Farbe Rot beginnen und es in LCH ändern:

 Körper {
  Hintergrund: LCH (aus rot l calc (c 15) h / 0,25);
}

Diese sind nützlich, wenn sie frei mit benutzerdefinierten Eigenschaften kombiniert werden.

Es gibt keine speziellen Funktionen mehr für Alpha.

Es sollte klar sein, dass der Alpha -Wert in der CSS -Farbfunktion vor ihm kein Komma gibt - sondern einen Vorwärtsschräggang:

 /* Alt! */
RGB (255, 0, 0);
RGBA (255, 0, 0, 0,5);

/* Neu! */
RGB (255 0 0);
RGB (255 0 0 / 0,5);
HSL (0DEG 40% 40%)
HSL (0DEG 40% 40% / 90%) /* kann ein Prozentsatz anstelle von 0,9 oder anderem Wert sein* /

/* Der neue Farbinhalt hat nur eine einzelne Grundfunktion, keine Alpha -Minor -Funktion*/
Labor (49% 39 80)
Labor (49% 39 80 / 0,25)

/* P3 mit Farbfunktionen anzeigen, im Grunde genommen genauso wie Vorwärts -Schrägstriche*/
Farbe (Display-P3 1 0,08 0 / 0,25);

Sie können sogar Ihren eigenen CSS -Farbton definieren.

Aber ich kann wirklich nicht darüber nachdenken. Das hat mich schockiert, es tut mir leid.

Das obige ist der detaillierte Inhalt vonEine Vorschau von 4 neuen CSS -Farbfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!