Blog

Propiedades personalizadas en CSS

18 May 2018 | Desarrollo

Desde siempre se ha dicho que HTML y CSS no son lenguajes de programación, ya que carecen de los elementos necesarios, como variables, bucles, funciones, metodos… Afortunadamente para HTML existe Javascript, que puede manipular el código HTML para agregar/modificar/eliminar código, construir código con variables, dentro de un bucle… Sin embargo para CSS había que seguir escribiendo y repitiendo las mismas líneas de código o los mismos valores una y otra vez.

 

Con la salida de los preprocesadores de CSS como SASS (https://sass-lang.com) y LESS (http://lesscss.org) a los maquetadores se les abrió un nuevo camino en el día a día para hacer algo que los programadores llevan mucho tiempo utilizando: reutilizar código que se repite y el uso de variables. Aunque aun no se puede hablar de que SASS o LESS sean un lenguaje de programación, se acercó un poco más a esa definición.
Aunque el uso de estos preprocesadores quita mucho trabajo, para proyectos pequeños se nos puede quedar un poco grande, además se necesitan instalar ciertas dependencias o aplicaciones para que funcionen (para SASS es necesario tener instalado Ruby y para LESS es necesario el fichero Less.js), así que para algunos casos puede ser un extra que no nos interese asumir.
En este punto es donde entran las propiedades personalizadas CSS, o lo que podriamos llamar variables. Muy lejos de los bucles y las funciones que podemos ver en los preprocesadores de texto, con las propiedades personalizadas podemos hacer que la lectura de un archivo CSS sea más clara.

 

Cuando empezamos a desarrollar un nuevo proyecto es posible que nos encontremos con unos requisitos de diseño como los siguientes:
  • Color principal del texto: #ff5500;
  • Color del texto principal en el hover: #999999:
  • Color secundario del texto: #f5582a;
  • Color del texto secundario en el hover: #ccc;
  • Color principal del fondo: #565656;
  • Color secundario del fondo: #44ff99;
Estos valores no nos dicen nada, y está claro que los usaremos muy a menudo en nuestro archivo CSS. Esta situación nos obliga a tener apuntado en algún sitio la relación entre los colores que vamos a utilizar y su valores. Además, a la hora de revisar el código, éste no es entendible por una persona y nos costará tiempo saber si el color #999999 era el color principal o el color secundario.
Con las propiedades personalizadas vamos a poder crear un archivo CSS que sea entendible por una persona, y sin tener que instalar nada extra.

 

Antes de empezar es conveniente saber que no todos los navegadores son compatibles con las propiedades personalizadas. Para saber qué navegadores son compatibles podemos mirarlo en la siguiente tabla: https://caniuse.com/#search=custom%20properties
Una vez comprobado que podemos utilizar las propiedades personalizadas, vamos a empezar a explicar su uso:
Al igual que en los lenguajes de programación, las variables que vamos a utilizar tienen un alcance (scope en inglés) que tenemos que tener en cuenta para saber dónde podemos usar una variable y dónde no.

 

Si creamos una variable en el elemento “:root”, esta estará disponible para todo el documento (se podría decir que es una variable global), y si utilizamos una variable en la clase “.container” sólo podremos hacer uso de esa variable local, que se podrá usar dentro de los elementos que estén dentro de un elemento con la clase “container” (también se puede decir que es una variable local).
El código para crear, y para recuperar el valor de una variable es el siguiente:
  • Creacion de una variable en el elemento “:root” = :root { --main-bc-color: #ff00ff; }
  • Uso de una variable en un elemento cuyo padre sea “:root” (es decir, cualquier elemento): div { background-color: var(--main-bg-color); }
Como vemos, para crear una variable simplemente tenemos que empezar a escribir 2 guiones seguidos, y el nombre que le queramos dar. Para evitar posibles errores, no vamos a utilizar ninguna palabra reservada, como “margin”, “width”… ya que se podrían confundir con las propiedades margin y width de CSS, además, como ya hemos comentado antes, queremos que nuestras variables sean fácilmente entendibles. En este ejemplo, main-bg-color hace referencia a que sea el color de fondo principal.
Para hacer uso de las variables tenemos que utilizar la palabra reservada “var” y escribir el nombre de la variable (incluidos los guiones) dentro de parentesis.

 

Una vez visto el funcionamiento básico podemos empezar a agregar algo de dificultad y utilidad a nuestras variables.
Por ejemplo, dado el siguiente trozo de código:

 

<div class="uno>
     <div class="dos>
         <div class="tres"></div>
         <div class="cuatro"></div>
     </div>
</div>

 

Imaginemos la variable anterior, “–main-bg-color”. Queremos aplicar el color de fondo a todas las “div” de nuestro documento, salvo a las que tengan la clase “tres”, para asignarles el color de fondo blanco. En vez de crear 1 nueva variable sólo para un caso tan poco común, podemos hacer uso de la variable original y sobreescribir su valor sólo para los elementos con clase “tres”. El código sería el siguiente:

 

:root { --main-bc-color: #ff00ff; }
.tres { --main-bc-color: #ffffff; }

 

con esto, cualquier elemento que posea la clase “tres” tendrá un color de fondo blanco.
¿Y si escribo el nombre de una variable que no existe? Aunque es una mala práctica, es muy peligroso escribir los nombres de las variables sin estar seguros de que realmente existen. Las propiedades pesonalizadas tienen una función para este caso. Se llama “fallback”, y viene a significar que: en caso de que no exista la variable, se utiliza un valor de respaldo. La sintaxis es la siguiente:

 

.dos {color: var(--main-color, red);}

 

Este código lo que hace es recuperar el valor de la variable “–main-color”, y en caso de que no exista, recupera el segundo valor “red”, sin mostrar ningún error por pantalla.
También se puede anidar un fallback dentro de otro, así:

 

.dos {color: var(--main-color, var(--second-color, red));}

 

Este código recuperará el valor de la variable “–main-color”, de no existir esta variable, recuperará el valor de “–second-color”, y en caso de que tampoco exista, se quedará con el valor “red”.
Esta práctica de utilizar “fallback” es muy arriesgada, ya que puede ralentizar la carga de la página web debido a que el navegador tiene que estar comprobando si existe la variable o no. Así que lo mejor será no usar esta funcion y asegurarnos de que las variables existen y tienen un valor.
Para terminar, a las propiedades personalizadas se puede acceder y cambiar el valor, desde Javascript. Sin embargo, ya que Javascript sí es un lenguaje de programación, no tiene mucho sentido modificar una variable de CSS ya que podemos calcularla mediante una función de Javascript.
El código es el siguiente:
  • Si tenemos guardado en una variable un elemento del DOM: elementoDOM.style.getPropertyValue(“--main-color");
  • Para obtener la variable desde cualquier lugar: getComputedStyle(elementoDOM).getPropertyValue(“--main-color”);
  • Para modificar el valor de una variable: elementoDOM.style.setProperty(“--main-color", “#fff00ff");

 

Hasta aquí el post. Con estos nuevos conocimientos ya podremos desarrollar un CSS con multitud colores/tamaños de letra, márgenes… y saber siempre qué variable hace qué función.

Adrian Ahedo

Thank you, but our princess is in another castle.

Adrian Ahedo

Backend Senior Developer

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *