En mi artículo “Diferentes grados de uso de propiedades personalizadas”, noté una situación sobre los colores y las propiedades personalizadas de CSS en la que fui “demasiado lejos” al dividir los valores de color HSL. Dividir cada color en sus partes H, S y L puede ser un paso demasiado lejos.
Pero probablemente quieras dividirlo así:
html {
--color-1-hsl: 200deg 15% 73%;
--color-1: hsl(var(--color-1-hsl));
}Entonces, dos propiedades personalizadas por color en su sistema de color. ¿Por qué? Porque ahora tienes una forma realmente fácil de usarlo y tienes una forma de aplicar alfa al color si quieres.
.card {
background: var(--color-1);
}
.card-with-alpha {
background: hsl(var(--color-1-hsl) / 0.5);
}Realmente no hay otra forma de tomar un color existente en CSS y aplicarle transparencia alfa. Bueno, digo eso, pero en realidad …
/* Future CSS! (works in Safari TP right now) */
.card-with-alpha {
background: hsl(from var(--color-1) h s l / 0.5);
}Eso es genial, pero no estoy del todo seguro de cuándo podremos confiar en eso en la producción.
¿Sabes qué más no podemos usar para algo súper importante en la producción? Trabajos de pintura Houdini. Sin Firefox o Safari todavía en esos.
¡Qué lástima, porque Dave casi se resquebraja! La idea aquí es que los trabajos de pintura de Houdini básicamente devuelven una imagen con la que pintas <canvas> API. Puede pintar un rectángulo en Canvas con cualquier formato de color, luego establecer el globalAlpha, devuélvalo como una imagen, ¡y eso básicamente desbloquea alfa en cualquier formato de color! Funciona (en Chrome):
Dave arrojó el código a GitHub y lo escribió en un blog. Por supuesto, también hizo un buen video:
Me gusta y suscríbete.
Pero si necesita un sistema como este en producción, simplemente realice la técnica de propiedades personalizadas que enumeré primero.
Una versión anterior de esta publicación fue tuiteada, pero lo estoy escribiendo aquí porque blogueros reales.