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:

--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.

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.

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
Alejandro Narvaja

Alejandro Narvaja

UI Developer | alejandronarvaja.com

More from Medium

Understanding Media queries in CSS

Easy Responsive CSS Grid

CSS Book

Multi step form | Multi step form html css | Javascript Multi Step Form

Multi step form | Multi step form html css | Javascript Multi Step Form

What does CSS do? The power of Cascading Style Sheets (1/3)