Apuntes sobre CSS Custom Properties

Artículo en constante actualización

Las CSS Custom Properties permiten definir variables dentro del rango que le especifiquemos, si por ejemplo la definimos dentro de un .container , sólo se podrá usar en todos los elementos que estén dentro de esa clase.

Se definen de la siguiente manera:

Y se las llama así:

Se puede usar un fallback si no es soportado por un navegador, por ejemplo:

color: var(  – nombreDeVariable, #ffffff); // Si no acepta variable el navegador, utiliza el #ffffff.

Como me comenta dinaelurdaneta en Twitter el fallback no sólo nos sirve para la falta de soporte. Como declaramos un valor inicial y en caso de no existir ese valor para la Custom Property toma el valor del fallback, nos puede venir bien si hacemos componentes que se reutilizan en una o varias aplicaciones.

Diferencias entre variables y preprocesadores

Preprocesadores

  • Los preprocesadores no se ejecutan en el navegador.
  • Reemplazan a las variables con valores estáticos cuando se compilan.
  • El DOM no reconoce a las variables y las variables por sí mismas no modifican el DOM.

CSS Custom Properties

  • Son más flexibles.
  • El navegador actualiza las variables CSS nativas en su ejecución.
  • Esto hace a las variables más dinámicas y con más posibilidades, por ejemplo, actualizando sus valores en distintos breakpoints.
  • Permite cambiar el valor de la propiedad en un media querie, sin necesidad de nombrar a la propiedad. Ej:
.ball {     –animate: bounce;    animation: var(  – animate) 1.5s ease infinite;}@media (min-width: 500px) {     animate: slide; 

// antes de las CSS Custom Properties, había que hacer
// animation: slide 1.5s …;
}

Soporte

El soporte a día de hoy (30/05/2020) es bastante amplio.

Más info en Can I use: https://caniuse.com/#search=css%20custom%20properties

Gracias por leer

Un saludo!
Ale
https://alejandronarvaja.com

UI Developer | alejandronarvaja.com