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