@@Matthias Apsel > > ~~~css > > html { > > --background-color: #e6f2f7; > > background-color: var(--background-color); > > } > > > > li a { color: var(--background-color) } > > > > li a:hover, li a:focus, li a:visited { color: #306f91 } > > ~~~ > > Wobei das unter Umständen bei der Transition hässliche Farbübergänge liefert. Warum sollte? Verwechselst du das mit dem Übergang von `transparent` (was IIRC `#0000`, also transparentes Schwarz ist) zu einer Farbe (nicht Schwarz)? Bspw. zu Weiß, wo der Übergang dann transparent → grau → weiß ist? Oder war; ich glaube mich zu erinnern, dass Browser an dem Algorithmus nachgebessert haben. Beim Übergang von `#e6f2f7` zu `#306f91` ist aber gar keine Transparenz im Spiel. Die hatten wir ja gerade aus Gründen rausgenommen. Anyway: {:@en} > Interessant auch die Frage, ob sich die Variablen ohne Whitespace einfügen. Dann könnte man auch `var(--background-color)00` resp. `var(--background-color)ff` schreiben. Ich glaube, so geht’s nicht. Aber so: ~~~css foo { --color: -20deg 80% 30%; background: hsl(var(--color) / 0) } foo:hover, foo:focus { background: hsl(var(--color) / 1) } ~~~ Oder auch mit `rgb()`, wenn’s denn sein muss. (Muss aber nicht.) Nur Teile des Werts einer CSS-Eigenschaft in einer *custom property*{:@en} – den Trick hab ich in der [CSSBattle](https://cssbattle.dev/) desöfteren angewandt. > Aber jetzt: Kaffee! Protip: Erst Kaffee, dann Forum! 🤪 LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Matthias Apsel > > ~~~css > > html { > > --background-color: #e6f2f7; > > background-color: var(--background-color); > > } > > > > li a { color: var(--background-color) } > > > > li a:hover, li a:focus, li a:visited { color: #306f91 } > > ~~~ > > Wobei das unter Umständen bei der Transition hässliche Farbübergänge liefert. Warum sollte? Verwechselst du das mit dem Übergang von `transparent` (was IIRC `#0000`, also transparentes Schwarz ist) zu einer Farbe (nicht Schwarz)? Bspw. zu Weiß, wo der Übergang dann transparent → grau → weiß ist? Oder war; ich glaube mich zu erinnern, dass Browser an dem Algorithmus nachgebessert haben. Beim Übergang von `#e6f2f7` zu `#306f91` ist aber gar keine Transparenz im Spiel. Die hatten wir ja gerade aus Gründen rausgenommen. Anyway: {:@en} > Interessant auch die Frage, ob sich die Variablen ohne Whitespace einfügen. Dann könnte man auch `var(--background-color)00` resp. `var(--background-color)ff` schreiben. Ich glaube, so geht’s nicht. Aber so: ~~~css foo { --color: -20deg 80% 30%; background: hsl(var(--color) / 0) } foo:hover, foo:focus { background: hsl(var(--color) / 1) } ~~~ Oder auch mit `rgb()`, wenn’s denn sein muss. (Muss aber nicht.) Nur Teile des Werts einer CSS-Eigenschaft in einer *custom property*{:@en} – den Trick hab ich in der [CSSBattle](https://cssbattle.dev/) desöfteren angewandt. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling