Variables nativas CSS
Aprende a trabajar con las variables CSS y conoce sus posibles aplicaciones
¿Variables CSS? ¿Y eso qué es?
Las variables CSS se pueden usar en preprocesadores como LESS o SASS, pero su principal diferencia es que son nativas. Esto significa básicamente que no hay que compilar el código previamente para usarlas, sin duda una gran ventaja. De ese modo, en lugar de asignar valores a las propiedades, se asignan variables, y a las variables se les asigna un valor una única vez. De forma que cambiando solo el valor de la variable, se replicará en todas la propiedades donde esté asignada. Veamos un ejemplo:
Sin usar variables:
.card {
background-color: #BADA55;
}
.title {
color: #BADA55;
}Usando variables:
/* Definición de la variable */:root {
--color: #BADA55;
}/* Aplicación de la variable */.card {
background-color: var(--color);
}
.title {
color: var(--color);
}
Muy bien, pero vemos que el ejemplo con variables tiene más líneas de código…
¿Esto para qué sirve?
De entrada, podemos pensar que poco sentido tiene usar variables por sí solas. Sin embargo, de esta manera aparece la posibilidad mantener hojas de estilo kilométricas, que pueden resultar realmente útiles.
Imaginemos que inicialmente hemos definido el color de ciertos elementos. Por ejemplo #00ff00, pero debido a un cambio, nos vemos obligados a modificarlo por #00f000.
En este caso nos daríamos cuenta de que podemos simplificar el proceso si lo hacemos correctamente. No será necesario realizar una búsqueda de todos los elementos por color y cambiarlo. Al haber definido las variables previamente, solamente tendremos que cambiar el valor en la declaración una vez y… ¡listo!
¿Cómo se usan las variables?
La sintaxis es muy sencilla. Solo tienes que asegurarte de declararlas a nivel global o local, y luego usarlas. No tiene ningún misterio.
Declaración a nivel global: Es accesible desde el nivel más alto del DOM. Si de declaran dentro de :root se puede utilitzar en cualquier selector.
:root {
--color: #222;
--bg-color: #24e424;
}div {
color: var(--color);
background-color: var(--bg-color);
}
Declaración a nivel local: Es accesible sólo dentro de su ámbito. Por ejemplo, puede interesarnos manejar las variables únicamente en los elementos que contengan la clase “card”.
.card {
--color: #222;
--bg-color: #24e424;
}/* Funciona */
.card {
color: var(--color);
background-color: var(--bg-color);
}/* No funciona */
div {
color: var(--color);
background-color: var(--bg-color);
}
Si se usa la variable por primera vez, existe la posibilidad de darle un valor por defecto para inicializarla.
div {
background-color: var(--bg-color, red);
}En caso de que a la variable bg-color no se le haya asignado ningún color, por defecto su valor sera red.
Themes dinámicos
Las variables son muy útiles para crear grandes hojas de estilo, pero si añadimos unas pocas líneas de JavaScript, pasan de ser útiles a ser imprescindibles. ¿Imagináis la posibilidad de poder cambiar el estilo de algunos elementos o incluso el theme entero? Puestos a pedir, estaría bien poder hacerlo de forma dinámica sin tener que recargar la página y sin tener bloques de CSS duplicados con clases distintas, ¿no? Veamos cómo hacerlo.
Empezaremos usando un HTML muy sencillo: un texto en un contenedor y un radio button con el que podremos cambiar el estilo completo de la página.
<body>
<p class="text">
Lorem ipsum...
</p><form>
<label for="lightTheme">Light theme</label>
<input type="radio" name="theme" id="lightTheme" value="light" checked="true">
<label for="darkTheme">Dark theme</label>
<input type="radio" name="theme" id="darkTheme" value="dark">
</form></body>
El CSS básico sería el mínimo para tener 2 themes distintos. El Light theme, con fondo claro y texto oscuro y, Dark theme, con fondo oscuro y texto claro.
Definiremos dos variables, una para el color principal y otra para el color de fondo. Las inicializaremos para el Light theme, la de fondo claro y texto oscuro y definiremos un marco para el texto.
/* Definición de las variables */
:root {
--bg-color: #fff;
--color: #222;
}body {
background-color: var(--bg-color);
}
.text {
color: var(--color);
padding: 20px;
border-radius: 20px;
box-shadow: 0px 1px 3px 2px var(--color);
}
El JavaScript también es muy sencillo. Define una función que se ejecute cuando se haga click en uno de los radio buttons para seleccionar el theme deseado. En función del botón seleccionado, se cambian los valores de las variables.
const root = document.documentElement;
const themes = document.querySelectorAll('input[name="theme"]');
themes.forEach((theme) => {
theme.addEventListener('click', changeTheme)
})function changeTheme(ev) {
switch (ev.target.value) {
case 'light':
root.style.setProperty('--bg-color', '#fff');
root.style.setProperty('--color', '#222');
break;
case 'dark':
root.style.setProperty('--bg-color', '#222');
root.style.setProperty('--color', '#fff');
break;
}
}
Y aquí, el mismo ejemplo, con los estilos más trabajados:
Mejorando la accesibilidad con variables CSS
En el ejemplo anterior sólo hemos usado el color como variable, pero se puede usar prácticamente cualquier propiedad: color, border, margin e incluso font-type.
Es importante elegir una tipografía acorde al diseño de la web e importante tener en cuenta que existen tipografías más fáciles de leer que otras. Si podemos mejorar la accesibilidad de una web, ¿por qué no hacerlo?
Pongámoslo en práctica en este ejemplo:
Tenemos una web con una tipografía de tipo handwriting, algo difícil de leer. Le hemos añadido una opción para cambiar la fuente a open dyslexic y poder usar una fuente más accesible, que ayudará a mejorar la experiencia de usuario, sobre todo, a personas con dislexia.
El principio es el mismo que en el ejemplo anterior: Un radio button que permita cambiar de una fuente a otra.
Conclusión
Las variables nativas CSS pueden tener tanto potencial como queramos darle. En este post, hemos visto unos ejemplos muy simples, pero trabajándolos un poco se pueden lograr front-ends más completos y que podréis crear a vuestro gusto.
Como siempre, hay que tener en cuenta que no todos los navegadores funcionan igual. En caniuse.com podréis consultar la compatibilidad de las variables CSS.
Para acabar, dejo un ejemplo con la combinación Light theme / Dark theme y Dancing Script / Open Dyslexic. ¡Espero que os guste!
