1 de jun. de 2023 | HTML & CSS

CSS Custom Properties

En el post de hoy vamos a ver el concepto de Custom Properties o variables en CSS. Pero en realidad no podemos decir que realmente son variables, por que no lo son.

En realidad no podemos decir que realmente son variables, por que no tienen relación con el comportamiento de una variable de un lenguaje de programación. Estas son las razones:

El valor es heredado a los hijos.
El valor puede re-definirse por cascada

El concepto (herencia y cascada) son muy propios de de CSS y nada tienen que ver con el concepto de variable.

Hasta aquí, creo que el concepto de custom properties y la diferencia con las variables esta clara, ahora vamos a ver como utilizarlas y aprovechar esta característica de CSS.

Uso de custom properties en CSS

El uso de custom properties es muy sencillo:

/* Las variables deben declararse dentro de un selector
   Se  recomienda usar :root para que la variable sea global 
   Para utilizarlas se usa la función var() y entre paréntesis
   se escribe el nombre de la variable
*/

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

body {
	color: var(--text-color);
}

En el ejemplo anterior todos los textos (parrafos, titulos, etc.) serán de color negro por la herencia, el resto de elementos descienden de body (comportamiento propio de CSS).

Veamos un ejemplo de cascada:

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

body {
	color: var(--text-color);
}

h1 {
	color: red;
}

/* En este caso todos los textos (párrafos, títulos, etc.)
   serán de color negro por herencia, pero todos los h1 serán
   rojos, porque hemos usado la cascada para redefinir el valor
   de la propiedad personalizada --color
*/

Otro apunte: A diferencia de otras propiedades CSS, las custom properties distinguen entre mayúsculas y minúsculas

Mas custom properties

Otra característica importante de las custom properties, es que nos permite realizar cálculos, operaciones condicionales e incluso aplicar valores por defecto. ¿Qué? ¿Esto es JavaScript no? No, no es JavaScript.
Pero con las custom properties, todo esto lo podemos dentro de nuestra hoja de estilos CSS.

Veamos un ejemplo:

.contenido {

     /* Si no esta declarada var1, se aplica 15px */

     margin: var(--var1, 10px);

     /* Uso de variables para establecer un valor por defecto */

     padding: var(--var1,var(--var2));

    /* Sumar, restar, multiplicar y dividir -- respetar el espacio en la suma y la resta --  */

     padding-top: calc(var(--var1) + 20px);
     height: calc(var(--var1) - 15px);
     margin-top: calc(var(--var1) * 2);
     width: calc((var(--var1) - 15px)/2);
     
}

Otro ejemplo:

:root{
     /* Crear texto para ser insertado en un :before más tarde */
     --texto:"Click";
}
.contenido:before {
     content: var(--texto);
}
.contenido2:before {
     /* Añadir más texto después de nuestra variable declarada (por ejemplo, un link a proyecto) */
     content:var(--texto)' para ir a nuestro proyecto';
}
.contenido:before {
     /* Ahora lo usaremos para un link a un articulo */
     content:var(--texto)' para ir nuestro articulo';
}

Ejemplo de condicional

:root{
     /* Acceder mediante Javascript */
     --variableCond: if(x > 5) this.width = 10;
}

Bueno pues hasta aquí este post sobre CSS custom properties, una característica que se echaba de menos en CSS.

Ahora una pregunta ... ¿Cuanto de vosotros hacéis uso de las custom properties en vuestros proyectos? Como siempre podéis dejar un comentario aquí abajo.

Un saludo, nos leemos!!

Contacta conmigo

Para contactar conmigo, puedes hacerlo accediendo a la pagina de contacto y rellenando el formulario.

También puedes escribirme a traves Twitter.