Frage zum Wiki-Artikel „currentColor“

[nix]

Der Schatten im Beispiel wird von Safari nicht dargestell

(Mittlerweile?) doch!

[Matthias Scharwies]

Servus!

Der Schatten im Beispiel wird von Safari nicht dargestell

(Mittlerweile?) doch!

Danke, der Artikel war von September 2014.

Ich hab ihn stark gekürzt in das vorangehende Kapitel integriert:

• Grafik/Farbe/Farbpaletten

Mittlerweile gibt's ja custom properties mit viel mehr Wummms.

Herzliche Grüße

Matthias Scharwies

[nix]

Mittlerweile gibt's ja custom properties mit viel mehr Wummms.

Die haben sich anscheinend einigermaßen leise hereingeschlichen.

Aber im Artikel mit denene gibt es, finde ich, unklare Stellen:

„Beim Funktionsaufruf darf sich innerhalb der Klammer kein Leerzeichen befinden.“

Die einzige konkrete Funktion, die da bis zu dieer stelle erwähnt wurde, ist ja var(). Ob das gemeint ist, ob man also nicht var( --x) schreiben „darf“? Kann ich mir nicht vorstellen. Jedenfalls haben hier FF und S kein Problem damit, wenn ich var( --images ) anstelle von var(--images) verwende.

An der Stelle mit

color: var(--akzentfarbe, red);

ist mir wieder einmal eingefallen, was mich an den Farben mit Namen (red, green usw.) ärgert: Für diversee Kennzeichnungsfälle hätte man ab und an gerne „die Frabe vom Dings“, aber „mit x% Transparenz drin“. Bleibt also doch nur die von mir schon länger verwendete Variante mit --my-color: 1 2 3; und später, beim Anwenden, color: rgb(var(--my-color); oder dann eben auch background-color: rgb(var(--my-color) / var(--my-transparency));. (Und öfter mal hätte ich gene auch so etwas wie currentColor für andere Werte (hier: Farben). Natürlich auch im obigen Sinn modifizierbar. Man könnte sich damit doch manche Code-Zeile sparen, das CSS übersichtlicher halten. Auch das weitgehend automatisch Tauschen von Farben aus Paletten, z. B. für das Hervorheben von Dingen in verschachtelten Strukturen könnte ich mir damit vorstellen (nicht ganz zum Text passend, aber die Intention hervorhebend):

header { color: darkblue; background-color: yellow; }
header header { color: inherited background-color; background-color: currentColor; }

Schon etwas wie color: rgb(red, 0.123); würde da schon helfen. (Und: wenn header so verschachtelt werden, ist überflüssig, was da über hierarchische Lücken gesagt wird.)

BTW: da steht dann doch noch(?) ein rgba() zwischen den Beispielen! Wobei „da“ hier und da meint. Immerhin: „Im CSS Color Module 4 ist die rgba()-Funktion in der rgb()-Funktion aufgegangen.“.

Was damit noch geht: ein Hauch OOP:

:root { --my-color: #F3C; }
div { --my-color: C3F; }
p { --my-color: 210; }
…
p, div, body { color: var(--my-color); }

So, und jetzt schau ich mir vielleicht noch @property an. Auch wenn auch dieses keinen CSS-Compiler in sich versteckt haben wird. /Und wenn’s nur wegen dieser Fipptehler …/