<var>
Lets you insert the value of a custom property (CSS Variable) into your stylesheet, making it easier to reuse colors, spacing, and other values across your design.
Syntax
/* Usage Example */
:root {
--primary: #3366ff;
}
.button{
/* Uses the variable defined above */
background-color: var(--primary);
/* Optional: providing a fallback color in case the variable is missing */
color: var(--text-color, white);
}<var> 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