No puede tomar un valor de color existente y aplicarle un canal alfa. Es decir, no puede tomar un valor hexadecimal existente como#f0f0f0 darle un componente alfa y usar el valor resultante con otra propiedad.
Sin embargo, las propiedades personalizadas le permiten convertir su valor hexadecimal en un triplete RGB para usarlo rgba(), almacenar ese valor en la propiedad personalizada (¡incluidas las comas!), Sustituir ese valor usando var()una rgba()función con su valor alfa deseado, y solo trabajo:
:root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.8);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
Esto parece casi demasiado bueno para ser verdad. 1 ¿Cómo funciona?
La magia radica en el hecho de que los valores de las propiedades personalizadas se sustituyen tal como están al reemplazar las var()referencias en un valor de propiedad, antes de que se calcule el valor de esa propiedad. Esto significa que, en lo que respecta a las propiedades personalizadas, el valor de --coloren su ejemplo no es un valor de color en absoluto hastavar(--color) que aparezca una expresión en algún lugar que espera un valor de color (y solo en ese contexto). De la sección 2.1 de la especificación de variables css:
La sintaxis permitida para las propiedades personalizadas es extremadamente permisiva. La producción <declaration-value> coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga <bad-string-token>, <bad-url-token>, unmatched <) - token>, <] - token>, o <} - token>, o tokens <semicolon-token> de nivel superior o tokens <delim-token> con un valor de "!".
Por ejemplo, la siguiente es una propiedad personalizada válida:
--foo: if(x > 5) this.width = 10;
Si bien este valor es obviamente inútil como variable, ya que sería inválido en cualquier propiedad normal, JavaScript podría leerlo y actuar sobre él.
Y sección 3 :
Si una propiedad contiene una o más funciones var (), y esas funciones son sintácticamente válidas, se debe suponer que toda la gramática de la propiedad es válida en el momento del análisis. Solo se verifica la sintaxis en el tiempo de valor calculado, después de que se hayan sustituido las funciones var ().
Esto significa que el 240, 240, 240valor que ve arriba se sustituye directamente en la rgba()función antes de que se calcule la declaración. Así que esto:
#element {
background-color: rgba(var(--color), 0.8);
}
que no parece ser CSS válido al principio porque rgba()espera no menos de cuatro valores numéricos separados por comas, se convierte en esto:
#element {
background-color: rgba(240, 240, 240, 0.8);
}
que, por supuesto, es CSS perfectamente válido.
Dando un paso más, puede almacenar el componente alfa en su propia propiedad personalizada:
:root {
--color: 240, 240, 240;
--alpha: 0.8;
}
y sustitúyalo, con el mismo resultado:
#element {
background-color: rgba(var(--color), var(--alpha));
}
Esto le permite tener diferentes valores alfa que puede intercambiar sobre la marcha.
1 Bueno, lo es, si está ejecutando el fragmento de código en un navegador que no admite propiedades personalizadas.