Welchen Rechenaufwand machen CSS Farbgenerierungen in unterschiedlichster Form aus?

[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