Adventskalender 2019

[Gunnar Bittersmann]

@@Matthias Apsel

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:

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:

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 – den Trick hab ich in der CSSBattle desöfteren angewandt.

Aber jetzt: Kaffee!

Protip: Erst Kaffee, dann Forum! 🤪

LLAP 🖖