Variable Fallbacks and Property Registration

What Is It?

The var function can supply a fallback when a custom property is missing or invalid as a custom property. The @property rule registers a custom property with a syntax, inheritance rule, and initial value.

Properties, Tags and Attributes Explained

• var(): Reads a custom property; var(--accent, blue) uses blue when --accent is missing or has a guaranteed-invalid value.
• @property: Registers a custom property so the browser can validate and interpolate a declared type.
• syntax: An @property descriptor such as "<color>" describing accepted values.
• inherits: An @property descriptor that explicitly chooses whether the registered property inherits.
• initial-value: An @property descriptor defining an initial value; required for typed syntax other than the universal syntax and subject to computational independence rules.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Provide a missing-variable fallback

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variable Fallbacks and Property Registration</title>
  <style>
    .box { color: var(--unknown-accent, #1d4ed8); border: 2px solid currentColor; padding: 12px; }
  </style>
</head>
<body>
  <div class="box">The unknown custom property uses the fallback blue.</div>
</body>
</html>

What you see: The box uses the fallback color because the custom property is not defined. Use fallbacks for optional theme tokens.

Example 2: Register a color token

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variable Fallbacks and Property Registration</title>
  <style>
    @property --accent { syntax: "<color>"; inherits: false; initial-value: #1d4ed8; }
    .box { --accent: #7c3aed; color: var(--accent, #1d4ed8); border: 2px solid currentColor; padding: 12px; }
  </style>
</head>
<body>
  <div class="box">A registered purple color token</div>
</body>
</html>

What you see: Supporting browsers validate --accent as a color. The var fallback keeps the example readable when registration is unsupported. Use registration when type checking or interpolation is useful.

When and Where to Use It

Use ordinary custom properties for shared design tokens. Add registration for a specific need such as typed values or animatable custom colors.

Common Mistake or Useful Tip

var(--token, blue) does not rescue every invalid consuming value. If an unregistered --token is 20px, substituting it into color is invalid even though the variable exists.

Try It Yourself

Remove the --accent declaration to inspect the registered initial value; then try an invalid value such as 20px in a supporting browser.