Variables CSS

CSS Custom Properties: Variables nativas de CSS

/ ᐳ css ᐳ Cascada en CSS ᐳ Variables CSS ᐳ ¿Qué son y para que sirven?

Quizás lo desconozcas, ya que es una característica moderna que no estaba presente en las primeras versiones de CSS, pero existe una forma nativa de guardar valores a través de «variables CSS». Estas variables CSS no existían hace años, y de hecho, fue una de las razones por las que se popularizaron preprocesadores como LESS o Sass, que sí las incorporaban.

CSS Custom Properties - Variables CSS

Sin embargo, las denominadas variables CSS realmente no son variables, sino que solemos denominarlas así por su parecido con la programación y porque es más fácil comprender rápidamente lo que son, pero tienen sus diferencias. La forma oficial de llamarlas es custom properties (propiedades personalizadas).

CSS Custom Properties

Las CSS Custom Properties (muchas veces conocidas por variables CSS) son un mecanismo de CSS que permite dar un valor personalizado a las propiedades. El objetivo principal suele ser evitar escribir múltiples veces ese valor, y en su lugar, ponerle un nombre más lógico y fácil de recordar, que hará referencia al valor real.

De esta forma, si necesitamos cambiar el valor en algún momento, podemos hacerlo en esa propiedad personalizada y no en múltiples partes del documento, donde nos podríamos equivocar al añadir el mismo valor o incluso hacer mucho más difícil de mantener el código.

Definir una variable CSS

Para definir una custom property haremos uso de los dos guiones -- previos al nombre que queramos utilizar. Además, debemos fijarnos en el elemento que definimos la variable, en este ejemplo la pseudoclase :root:

:root {
  --background-color: black;
}

Hay varios detalles que comentar sobre este fragmento de código:

En primer lugar, la pseudoclase :root hace referencia al elemento raíz del documento, o lo que es lo mismo, al elemento <html>. La diferencia de utilizar html o :root como selector es que este último tiene algo más de especificidad CSS. Mientras que html tiene 001, :root tendría 010.

Al colocarla en :root estamos definiendo que la custom property estará definida para el ámbito de esa etiqueta <html> (o cualquier elemento hijo), es decir, a todo el documento. Sin embargo, ya veremos que podemos aplicar estas variables sólo a partes concretas del DOM de nuestra página.

Nota: Las custom properties se suelen agrupar en las primeras líneas de un bloque CSS, separándolas por un espacio de otras propiedades estándar. Esto facilita la lectura del código.

Utilizar una variable CSS

A la hora de utilizar una custom property, hay que utilizarla dentro de la expresión var():

.element {
  background: var(--background-color);
}

En este caso estamos aplicando a la propiedad background el valor que contiene --background-color para el elemento .element. Esto último es muy importante entenderlo, ya que una custom property puede tener diferentes valores dependiendo del ámbito en el que se encuentra.

Además, es muy recomendable que la expresión var() tenga dos parámetros. El primero de ellos, la custom property en cuestión, el segundo de ellos, el valor por defecto en el caso de que esa propiedad no esté definida en el ámbito actual:

.element {
  background: var(--background-color, blue);
}

En nuestro caso, el elemento con clase element tendrá siempre el color de fondo negro, pero podría adoptar el color azul si la custom property no se hubiera declarado.

Ámbito de las custom properties

El ejemplo anterior es muy básico y puede que no se aprecie el detalle de los ámbitos con las custom properties, así que vamos a verlo con un ejemplo más específico.

Observa el marcado HTML del siguiente ejemplo, donde tenemos tres elementos con clase child, los dos primeros dentro de parent y el tercero fuera:

<div class="parent">
  <div class="first child">First child</div>
  <div class="second child">Second child</div>
</div>
<div class="third child">Third child</div>

<style>
.parent {
  --background-color: black;

  color: white;
}

.first {
  --background-color: purple;
}

.child {
  background: var(--background-color, blue);
}
</style>

Sin embargo, ahora estamos definiendo la variable --background-color en diferentes ámbitos:

Los dos primeros elementos .child tomarán color negro, ya que se le aplica a .parent (e hijos).
El primer elemento .child se sobreescribe con color púrpura, ya que se le aplica a .first.
El tercer elemento no tendrá ninguna variable definida, por lo que tomará color azul.

Esto nos permite mucha flexibilidad y potencia a la hora de utilizar custom properties en CSS, ya que son tremendamente útiles y versátiles, permitiéndonos utilizar incluso la cascada de CSS a nuestro favor.

Las custom properties tienen un buen soporte en navegadores en la actualidad, a excepción, como siempre, de Internet Explorer. Si necesitaras soporte para IE11, quizás podría venirte bien el polyfill ie11CustomProperties.

Diferencia con Sass

También es importante mencionar que las variables CSS no funcionan exactamente igual que las variables Sass (o en general, las variables de preprocesadores).

Sass al igual que muchos otros preprocesadores de CSS, no trabajan directamente en el navegador, sino en una capa previa (capa de preprocesamiento). Por lo tanto, muchas tareas se realizan antes de llegar al navegador.

Es el caso de las variables de Sass, dichas variables son leídas por Sass y convertidas a CSS «plano» (sin variables):

/* En Sass las variables se declaran en el top */
$var: #fff;

.parent {
  background: $var;   /* Será #fff */
}

.parent .element {
  $var: #888;
}

.element {
  background: $var;   /* Será #fff */
}

Es por eso que no deben tomarse las custom properties como equivalente de las variables SCSS, ya que tienen matices diferentes.

Variables CSS desde Javascript

Existen varias formas de manipular estilos CSS desde Javascript, ya sea directamente a través de la propiedad .style del elemento en cuestión, o utilizando la función global de cada página .getComputedStyle(), que devuelve los estilos computados por el navegador.

Sin embargo, en esta ocasión nos centraremos en una serie de métodos de ayuda que nos hacen la vida más fácil, ya que podemos establecer, obtener y/o eliminar propiedades CSS (custom properties incluídas) de un elemento de forma muy sencilla.

Observen el siguiente método mediante el cuál añadimos (o modificamos) la propiedad border de un elemento del DOM de nuestro HTML:

const element = document.querySelector(".element");
element.style.setProperty("border", "2px solid red");

Al igual que lo hacemos con una propiedad CSS, lo podríamos hacer con una custom property, la cuál quedaría añadida en el atributo HTML style del elemento.

Los métodos de ayuda que tenemos para modificar propiedades son los siguientes:

Método	Descripción
`.setProperty(name,value,priority)`	Añade/cambia el valor de una propiedad CSS.
`.getPropertyValue(name)`	Obtiene el valor de una propiedad CSS.
`.getPropertyPriority(name)`	Devuelve `important` si tiene prioridad.
`.removeProperty(name)`	Elimina una propiedad CSS de un elemento.

El método que hemos visto anteriormente es .style.setProperty(), con el cuál podemos añadir (o modificar) un valor a una propiedad. Además, si establecemos el tercer parámetro con el important, sería equivalente a añadirle el !important al valor de la propiedad.

Por otro lado, tenemos el método opuesto .style.getPropertyValue() mediante el cuál podemos obtener el valor de una propiedad concreta o el método .style.getPropertyPriority(), con el cuál te devuelve el string important si lo tiene definido. Por último, el método .style.removeProperty() como su propio nombre indica, elimina una propiedad de un elemento.

Nota: Ten en cuenta que estas propiedades solo funcionan si los estilos CSS o custom properties han sido definidas a través del atributo style de CSS o con estos mismos métodos (que lo hacen por la misma vía).

Volver Al índice

Cascada en CSS Capítulo anterior

¿Qué son y para que sirven? Capítulo siguiente

Acceder a Discord Comunidad de Manz.dev