Welchen Rechenaufwand machen CSS Farbgenerierungen in unterschiedlichster Form aus?

[MB]

moin,

Fragen

1. Welche Rechenbelastungen werden mit unterschiedlichen Darstellungen einer Farbe z.B. mit, rgb(), hsl() und filter() Hexadezimalzahlen und Farbnamen in CSS aufgebracht?
2. Ist es für den Rechner weniger aufwändig, wenn generierte Farben in Variablen gespeichert werden und der Rechner nur auf die Farbresultate zugreifen kann, da die Farbberechnung nur einmal gemacht wird?

Fragen nebenbei

1. Ist filter() eigentlich speziell nur für Grafiken und SVGs gedacht und für die Farbgebung von eintönigen Hintergründen, Texten, Überschriften, Links etc. ungeeignet oder ist das unerheblich und macht es bzgl. auf den Rechenaufwand nix oder wenig aus?
2. Ist die Gestaltung der Hintergründe, Texte, Überschriften, Links, der Boxen etc. mit hsl() genauso gut, wie mit rgb()?

Hintergrund von meiner Fragen
Ich will eigentlich nur mit Hilfe von filter() Akzente, Graustufen und Schatten schon vorhandener Farben generieren und nur die eigentlichen Farben mit hsl() gestalten.

lgmb

[Rolf B]

Hallo MB,

entweder hast Du Dich verirrt, oder ich habe keine Ahnung, was es alles gibt...

Ist es für den Rechner weniger aufwändig, wenn generierte Farben in Variablen gespeichert werden

Welche Variablen? CSS Custom Propertys sind keine. Der Inhalt eines Custom Property ist das, was du ihm zuweist. Und wenn Du ein Custom Property verwendest, wird sein Wert während der Layoutphase ermittelt. Die relevante Datenquelle kann sich ja auf Grund der Kaskade jederzeit ändern.

generierte Farben

Äh, wie generiert? Mit LESS oder SASS?
Oder mit color-mix?
Als relative Farbangabe (hsl(from var(--basisfarbe) h s calc(l + 0.1)))?

Ist filter() eigentlich speziell nur für Grafiken und SVGs gedacht

Nach meinem Verständnis ist es für Arrays in JavaScript gedacht. Ich kenne eine CSS Eigenschaft namens filter, und darin kann man Funktionen wie blur() oder sepia() anwenden. Solche Funktionen werden - meine ich - in der Grafikkarte in Form von Shaderprogrammen realisiert, d.h. die CPU wird davon nicht belastet. Aber die filter-Eigenschaft wirkt auf das ganze Element, nicht nur auf eine bestimmte Farbangabe.

Rolf

[MB]

moin,

entweder hast Du Dich verirrt, oder ich habe keine Ahnung, was es alles gibt...

Sry, wo habe ich mich verirrt 😬?

Ist es für den Rechner weniger aufwändig, wenn generierte Farben in Variablen gespeichert werden

Welche Variablen? CSS Custom Propertys sind keine. […]

Sry, ich meine Custom Properties 🙄
(aber sind doch technisch gesehen Variabeln oder nich?)

[…] Die relevante Datenquelle kann sich ja auf Grund der Kaskade jederzeit ändern.

Danke für die Info 👍!

generierte Farben

Äh, wie generiert? Mit LESS oder SASS?
Oder mit color-mix? […]

Meines Wissens nach versteht der CSS Parser mixins aus Sass nicht, wenn du das mit color-mix meins. Insofern keins von alldem.

[…] Als relative Farbangabe (hsl(from var(--basisfarbe) h s calc(l + 0.1)))?

Dein hsl() konrektes Beispiel meine ich mit "eine Farbe generiert, erzeugt, hervorgebracht, erschafft etc".

Ist filter() eigentlich speziell nur für Grafiken und SVGs gedacht

[…]. Solche Funktionen werden - meine ich - in der Grafikkarte in Form von Shaderprogrammen realisiert, d.h. die CPU wird davon nicht belastet. Aber die filter-Eigenschaft wirkt auf das ganze Element, nicht nur auf eine bestimmte Farbangabe.

Vielen Dank 👍

lgmb

[Rolf B]

Hallo MB,

Sry, ich meine Custom Properties 🙄 (aber sind doch technisch gesehen Variabeln oder nich?)

Oder nicht. Eine Variable gibt's einmal, und sie hat dann diesen Wert. Ein Custom Property wird für jedes Element festgelegt, auf das die Regel mit dem Property darin angewendet wird. Welcher Wert verwendet wird, basiert auf den CSS Kaskadenregeln.

Meines Wissens nach versteht der CSS Parser mixins aus Sass nicht, wenn du das mit color-mix meins.

Nein, ich meine die CSS Funktion color-mix (für die ich gerade die Wiki-Seite schreibe, was sich als eine Schlangengrube an Querverweisen herausstellt). Die ist relativ neu. Wenn SASS die auch kennt, okay, aber es gibt auch eine native CSS Funktion dieses Namens. Sie hat den Vorteil, Custom Propertys entsprechend der Kaskadenregeln auflösen zu können, während SASS das nur einmal kann, beim Compilieren der SASS-Datei.

Dein hsl() konkretes Beispiel meine ich

Aber hast Du auch gemerkt, dass da etwas ziemlich neues steht? Angaben wie hsl(180 50% 30%) sind konstant. Die setzt der CSS Parser einmal beim Laden um und fertig. Da könnte aber auch hsl(180 var(--saturation) 50%) stehen. Dann kann er es erst in der Layout-Phase umsetzen. Und mein Beispiel ist eine relative Farbangabe, die in CSS Colors Level 5 neu hinzukommt, bei der noch mehr Berechnungen nötig werden können. Je nach Kaskade und Einsatz von Custom Propertys muss der Browser das dann je Element auf's Neue tun.

Von der Performance her ist das aber alles egal. Naja. Hm. Auf deiner alten 🥕 vielleicht nicht 😉. Wenn Du 37000 Farben definierst. Auf normalen Seiten glaube ich nicht, dass etwas zu merken ist.

Rolf

[MB]

moin,

Meines Wissens nach versteht der CSS Parser mixins aus Sass nicht, wenn du das mit color-mix meins.

Nein, ich meine die CSS Funktion color-mix […]. […], aber es gibt auch eine native CSS Funktion dieses Namens. […]

Ahh Danke für den Hinweis 👍 😀!!! Ist mir sehr neu. Schau ich mir gleich mal an…

Dein hsl() konkretes Beispiel meine ich

Aber hast Du auch gemerkt, dass da etwas ziemlich neues steht? Angaben wie hsl(180 50% 30%) sind konstant. Die setzt der CSS Parser einmal beim Laden um und fertig. Da könnte aber auch hsl(180 var(--saturation) 50%) stehen. Dann kann er es erst in der Layout-Phase umsetzen. […]

Ja ich weiß. Ich arbeite seit einiger Zeit mit calc() in hsl() oder hsla().

[…] Je nach Kaskade und Einsatz von Custom Propertys muss der Browser das dann je Element auf's Neue tun. […] Von der Performance her ist das aber alles egal. […]

Das reicht mir als AW.

[…] Naja. Hm. Auf deiner alten 🥕 vielleicht nicht 😉.

so siehts aus 🤣

Wenn Du 37000 Farben definierst. Auf normalen Seiten glaube ich nicht, dass etwas zu merken ist.

Vielen lieben Dank 😀 👍!

lgmb

[Gunnar Bittersmann]

@@MB

Sry, ich meine Custom Properties 🙄
(aber sind doch technisch gesehen Variabeln oder nich?)

Custom properties sind mehr als bloß CSS-Variablen.

„Der übelste Streich, den der Teufel je gespielt hat, war, Menschen dazu zu bringen, CSS custom properties ‚Variablen‘ zu nennen.“ —Kitty Giraudel (Tweet)

🖖 Живіть довго і процвітайте

[MB]

moin,

Sry, ich meine Custom Properties 🙄
(aber sind doch technisch gesehen Variabeln oder nich?)

Custom properties sind mehr als bloß CSS-Variablen.

„Der übelste Streich, den der Teufel je gespielt hat, war, Menschen dazu zu bringen, CSS custom properties ‚Variablen‘ zu nennen.“ —Kitty Giraudel (Tweet)

Danke für den Link 👍.

lgmb