Möchten Sie einen Hover-Effekt mit Inline-CSS erstellen? Verwenden Sie CSS Variablen.

Neulich habe ich an einem Blog gearbeitet, bei dem jeder Beitrag eine benutzerdefinierte Farbe für eine kleine Dosis Persönlichkeit hat. Der Autor kann diese Farbe im CMS auswählen, wenn er den Beitrag schreibt. Nur eine superleichte Schicht Art Direction.

Damit diese Farbe im Frontend angezeigt wird, habe ich den Wert direkt in ein Inline-style-Attribut auf dem <article>-Element geschrieben. Meine Templates waren zufällig in Liquid, aber das würde in anderen Template-Sprachen ähnlich aussehen.

{% for post in posts %}
<article style="background: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>
{% endfor %}

Kein Problem. Aber dann dachte ich: „Wäre es nicht schön, wenn die benutzerdefinierte Farbe nur beim Hovern über der Artikelkarte angezeigt würde?“ Aber man kann keine Hover-Styles in einem style-Attribut schreiben, oder?

Meine erste Idee war, das style-Attribut beizubehalten und CSS wie folgt zu schreiben:

article {
  background: lightgray !important;
}
article:hover {
  /* Doesn't work! */
  background: inherit;
}

Ich kann den Inline-Stil mit !important überschreiben, aber es gibt keine Möglichkeit, diesen beim Hovern rückgängig zu machen.

Schließlich beschloss ich, ein style-Attribut zu verwenden, um den Farbwert aus dem CMS zu erhalten, aber anstatt ihn sofort anzuwenden, speichere ihn als CSS-Variable.

<article style="--custom_color: {{post.custom_color}}">
  <h1>{{post.title}}</h1>
  {{content}}
</article>

Dann kann diese Variable verwendet werden, um den Hover-Stil in regulärem CSS zu definieren.

article {
  background: lightgray;
}
article:hover {
  /* Works! */
  background: var(--custom_color);
}

Da der Farbwert jetzt als CSS-Variable gespeichert ist, gibt es alle möglichen anderen Dinge, die wir damit tun können. Zum Beispiel könnten wir alle Links im Beitrag in der benutzerdefinierten Farbe erscheinen lassen.

article a {
  color: var(--custom_color);
}

Und da die Variable auf das <article>-Element beschränkt ist, wird sie nichts anderes auf der Seite beeinflussen. Wir können sogar mehrere Beiträge auf derselben Seite anzeigen, wobei jeder seinen eigenen benutzerdefinierten Farbton wiedergibt.

Die Browserunterstützung für CSS-Variablen ist ziemlich tief, mit Ausnahme von Internet Explorer. Auf jeden Fall ein schöner kleiner Trick, der nützlich sein könnte, wenn Sie mit leichter Art Direction in einem CMS arbeiten, sowie eine Erinnerung daran, wie großartig CSS-Variablen sein können.