Supongamos que creaste algunos estilos iniciales para tu sitio y te diste cuenta de que repetiste algunos de los valores en tu CSS. Usas dodgerblue como color principal y lo agregas a los bordes de los botones, el texto de los vínculos y los fondos de los encabezados. Además, usas una herramienta de diseño para elegir algunas variantes de ese azul para otras partes del sitio. Luego, obtienes una guía de estilo y el color principal ahora es oklch(70% 0.15 270).
Las propiedades personalizadas, o variables CSS, te permiten organizar y reutilizar valores en tu CSS, de modo que tus estilos sean más flexibles y fáciles de comprender.
Cómo crear propiedades
La forma más sencilla de crear una propiedad es establecer un valor en una propiedad nueva con un nombre que definas.
.card {
--base-size: 1em;
}
Todos los nombres de propiedad deben comenzar con dos guiones. Esto evita que intentes usar un nombre de propiedad CSS existente para un valor personalizado. La especificación de CSS nunca agregará una propiedad que comience con dos guiones.
Luego, se puede acceder a esta propiedad con la función var(). En este ejemplo, se establece el tamaño de la fuente dentro de un .card-title en el doble del valor de --base-size.
.card .card-title {
font-size: calc(2 * var(--base-size));
}
Usa una propiedad personalizada
Como viste, puedes usar el valor de una propiedad personalizada con la función var(). Puedes usar la función var() en los valores, pero no en las consultas de medios. Son especialmente útiles como argumentos para otras funciones de CSS.
Resguardos
¿Qué sucede si intentas usar una propiedad personalizada que no tiene un valor establecido? La función var() toma un segundo valor que se usará como valor de resguardo. El valor de resguardo incluso puede ser otra propiedad personalizada con un var() anidado.
#my-element {
background: var(
--alert-variant-background,
var(--alert-primary-background)
);
}
Valores no válidos
Si una propiedad personalizada se resuelve en un valor no válido, por ejemplo, un valor de 1em para la propiedad background-color, no se usarán otras declaraciones válidas en ese elemento para esa propiedad. Esto se debe a que el navegador no puede saber si un valor no es válido hasta que descarta otras declaraciones cuando calcula un valor. En su lugar, el valor utilizado será un valor heredado o inicial.
.content {
background-color: blue;
}
.content.invalid {
--length: 2rem;
background-color: var(--length);
}
En el ejemplo anterior, el elemento .invalid no tendrá un fondo azul. En cambio, como background-color no hereda, el valor será transparent, que es su valor inicial.
Anulación y herencia
En la mayoría de los casos, querrás el comportamiento predeterminado de las propiedades personalizadas, que es que los valores se heredan. Cuando estableces un valor nuevo para una propiedad, ese elemento y todos sus elementos secundarios tendrán ese valor hasta que se anule con otro valor.
Las propiedades personalizadas se determinan por la cascada, por lo que también se pueden anular con un selector más específico.
Más control con @property
Una propiedad personalizada que se crea configurando un valor puede ser de cualquier tipo y se hereda. Para tener más control sobre una propiedad personalizada, puedes usar la regla @property.
Nuestra propiedad --base-size creada anteriormente sería equivalente a esta declaración de @property.
@property --base-size {
syntax: "*";
inherits: true;
initial-value: 18px;
}
El valor syntax establece los tipos de valores CSS que son válidos para la propiedad. Si estableces un tipo diferente en esa propiedad, no será válido y volverá al valor inicial o a un valor heredado establecido más arriba en la cascada.
Cuando creas una propiedad personalizada con @property, puedes inhabilitar la herencia con inherit: false. Anular el valor de una propiedad personalizada con la herencia inhabilitada lo cambia para el elemento seleccionado, pero no para sus elementos secundarios. Esto suele ser útil cuando varios selectores segmentan el mismo elemento.
El initial-value establece el valor de la propiedad, a menos que se cambie más adelante. A menos que la sintaxis sea *, lo que significa cualquier tipo de CSS, el @property debe establecer un initial-value. Esto garantiza que la propiedad siempre tendrá un valor de la sintaxis especificada y nunca será indefinida.
Cómo actualizar propiedades personalizadas con JavaScript
El valor de una propiedad personalizada en un elemento se puede actualizar con JavaScript, que puedes usar para actualizar los diseños de tu sitio de forma dinámica.
const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);
En este ejemplo, se actualiza la etiqueta de estilo en el elemento #my-button, y, si la inspeccionas en las Herramientas para desarrolladores, verás lo siguiente:
<button id="my-button" style="--color: orange">Click me</button>
En el ejemplo anterior, puedes ver cómo configurar propiedades personalizadas accediendo a los datos almacenados en atributos HTML personalizados. Cada botón tiene un atributo data-color con el valor de un color específico. La propiedad personalizada --background establecida en el elemento body se restablece al valor de data-color en el botón en el que se haga clic.
También puedes usar getComputedStyle(element).getPropertyValue("--variable") para obtener el valor de una propiedad en un elemento específico. Esto puede ser útil si tu lógica necesita responder a un valor en cascada.