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:

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:

Soporte

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

Gracias por leer

Un saludo!
Ale
https://alejandronarvaja.com

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