custom-property
Commonly known as 'CSS Variables'. They allow you to store values (like colors or sizes) in a name starting with '--' and reuse them throughout your stylesheet using the 'var()' function.
Syntax
/* Usage Example */
:root {
--brand-color: #3b82f6;
}
.button{
background-color: var(--brand-color);
}
/* Global values */
custom-property: inherit;
custom-property: initial;
custom-property: revert;
custom-property: revert-layer;
custom-property: unset;custom-property Browser support
Widely available
Since
2017 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
49+
31+
9.1+
15+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more