¿Quieres escribir un efecto de desplazamiento con CSS en línea? Utilice variables CSS.

El otro día estaba trabajando en un blog donde cada publicación tiene un color personalizado para darle una pequeña dosis de personalidad. El autor puede elegir ese color en el CMS cuando escribe la publicación. Sólo una capa superligera de dirección de arte.

Para que ese color aparezca en la parte frontal, escribí el valor directamente en un styleatributo en línea en el articleelemento. Mis plantillas estaban en Liquid, pero se verían similares en otros lenguajes de plantillas:

{% for post in posts %}article  h1{{post.title}}/h1  {{content}}/article{% endfor %}

No hay problema ahí. Pero luego pensé: "¿No sería bueno si el color personalizado solo apareciera al pasar el cursor sobre la tarjeta del artículo?" Pero no puedes escribir estilos de desplazamiento en un styleatributo, ¿verdad?

Mi primera idea fue dejar el styleatributo en su lugar y escribir CSS así:

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

Puedo anular el estilo en línea usando !important, pero no hay forma de deshacerlo al pasar el mouse.

Finalmente, decidí que podía usar un styleatributo para obtener el valor del color del CMS, pero en lugar de aplicarlo de inmediato, almacenarlo como una variable CSS:

article  h1{{post.title}}/h1  {{content}}/article

Luego, esa variable se puede usar para definir el estilo de desplazamiento en CSS normal:

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

Ahora que el valor del color está guardado como una variable CSS, hay muchas otras cosas que podemos hacer con él. Por ejemplo, podríamos hacer que todos los enlaces de la publicación aparezcan en el color personalizado:

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

Y debido a que la variable tiene como ámbito el articleelemento, no afectará nada más en la página. Incluso podemos mostrar varias publicaciones en la misma página donde cada una se muestra en su propio color personalizado.

La compatibilidad del navegador con variables CSS es bastante amplia, con la excepción de Internet Explorer. De todos modos, es solo un pequeño truco que puede resultar útil si te encuentras trabajando con dirección de arte ligera en un CMS, así como un recordatorio de lo increíbles que pueden ser las variables CSS.