Apuntes sobre CSS Custom Properties

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:

--nombreDeVariable: propiedad;

Y se las llama así:

color: var(--nombreDeVariable);

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.

Si usáramos la regla @property en nuestro CSS, entonces el valor del fallback de nuestra variable CSS quedaría anulado. Por ejemplo:

@property --nombreDeVariable {
syntax: "<number>";
inherits: false;
initial-value: 1;
}
color: var(--nombreDeVariable, valorFallback);
// valorFallback queda anulado ya que initial-value: 1; funciona como fallback por defecto.

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 (03/03/2022) es bastante amplio.

Datos de caniuse.com | Imagen generada desde caniuse.bitsofcode.de

Gracias por leer

Un saludo!
Ale
https://alejandronarvaja.com

 by the author.

--

--

UI Developer | alejandronarvaja.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store