Variables CSS - lo básico
Las variables CSS, llamadas de hecho custom properties ( propiedades a medida ) están actualmente soportadas en todos los principales navegadores salvo IE ( ya fallecido ) y Edge ( donde ya están trabajando en ello ).
O sea: las variables CSS ya están a la vuelta de la esquina.
Como declarar una variable en CSS
Para declarar una variable CSS utilizamos esta sintaxis:
elemento{ --variable: valor; }
por ejemplo:
elemento{ --color: #abcdef; }
Los dos guiones ( --
) que aparecen delante dicen al CSS que esta propiedad es una variable, y Lea Verou sugiere que podemos pensar en ello como una propiedad CSS con un prefijo vacío ( -webkit-propiedad, -moz-propiedad, --propiedad ).
Como utilizar las variables CSS
Usamos las variables CSS como valor de una propiedad CSS.
Para utilizar una variable CSS ya definida empleamos la función var()
y esta sintaxis:
elemento{ propiedad: var(--variable);}
por ejemplo:
elemento{ color: var(--color);}
See the Pen CSS var: basic* by Gabi (@enxaneta) on CodePen.
Cosas que saber acerca de las variables CSS
1. Las variables CSS se comportan como las demás propiedades CSS: son heredadas, y pueden ser declaradas inline.
See the Pen CSS var: inline + JS* by Gabi (@enxaneta) on CodePen.
2. A diferencia de la demás propiedades CSS que no distinguen entre mayúsculas y minúsculas, las variables CSS son case sensitive. O sea --color
y --Color
son dos variables distintas.
3. La función var()
acepta un segundo argumento: un valor alternativo ( fallback ) en el caso en cual la variable proporcionada no existe.
background-color: var(--bg, orange);
Esto quiere decir que background-color
es orange
en el caso en cual --bg
no está declarada.
4. En el caso en que la variable --bg
está declarada pero tiene un valor invalido, por ejemplo --bg:#error
, la propiedad ( background-color
) toma el valor por defecto: transparent
en este caso.
5. Las variables CSS son como las matrioskas: Sabemos que la función var()
acepta un segundo argumento: un valor alternativo ( fallback ) en el caso en cual la variable proporcionada no existe. Este segundo argumento puede ser otra variable, Y de nuevo si esta variable no existe . . .
.matrioska{ background-color: var(--rojo, var(--bermejo, var(--colorao, red))); }
See the Pen CSS var: fallback* by Gabi (@enxaneta) on CodePen.
Como declarar una variable CSS en JavaScript
Podemos recuperar el valor de una variable CSS utilizando el método getPropertyValue
.
Si hemos declarado el valor de la variable inline podemos escribir:
elemento.style.getPropertyValue("--bg");
Para las variables declaradas en el CSS tenemos que escribir:
window.getComputedStyle(elemento).getPropertyValue("--color");
Para declarar una nueva variable CSS o para restablecer el valor de una variable CSS ya declarada utilizamos el método setProperty
de esta manera:
elemento.style.setProperty("--foo", "test");
Vealo en codepen.io