Valores de reserva y var()

La función var() acepta un segundo argumento opcional como valor de reserva, que se utiliza cuando la propiedad personalizada no está definida.

El valor de reserva se utiliza cuando:

• La propiedad no está definida en el ámbito correspondiente
• La propiedad tiene el valor initial
• La propiedad se declaró con un valor no válido para su contexto

Anide llamadas a var() para encadenar varios niveles de reserva:

Los valores de reserva pueden ser cualquier valor válido para la propiedad, incluidas otras variables, valores calculados o literales:

Establecer una propiedad personalizada en initial hace que sea como si nunca se hubiera establecido. Combinado con un valor de reserva, esto permite que los componentes dejen de utilizar una propiedad personalizada heredada.

Utilizar initial como valor de una propiedad personalizada es una técnica para garantizar que se active el valor de reserva. Esto puede crear indicadores de funciones opcionales en CSS.

La regla @property (Houdini) registra una propiedad personalizada tipada con un valor inicial garantizado. Esto es más sólido que depender de valores de reserva.

Asegúrese de que las transiciones funcionen incluso cuando no se haya establecido una propiedad personalizada, proporcionando un valor de reserva seguro desde el que se pueda realizar la transición:

Si falta una propiedad personalizada y no se proporciona ningún valor de reserva, la propiedad se calcula como su valor inicial (a menudo la palabra clave initial). En el caso de los colores, esto puede producir resultados inesperados, como transparente o negro. Añada siempre valores de reserva a las propiedades críticas.

Los valores de las propiedades personalizadas pueden hacer referencia a otras propiedades personalizadas, creando una cadena de tokens:

Los valores de respaldo no tienen nada que ver con la especificidad: solo se aplican cuando la propiedad personalizada referenciada no está definida o no es válida. La especificidad determina qué regla establece la propiedad personalizada, no qué valor de respaldo tiene prioridad.

¿Qué hace color: var(--theme-text, #111) cuando --theme-text no está definida?

var(--name, fallback) proporciona un valor de respaldo cuando la propiedad personalizada no está definida. Los valores de respaldo se pueden anidar para crear varios niveles. Use @property para definir propiedades personalizadas tipadas con valores iniciales garantizados. Proporcione siempre valores de respaldo para las propiedades visuales críticas.