Skip to main content
HTML Validation

CSS: “--X”: Character Y is neither a decimal digit number, decimal point, nor "e" notation exponential mark.

About This CSS Issue

The value of a custom property has a calc(), min(), max() or clamp() expression with a word where a number should be, such as undefined left behind by a script.

The name in the message is the custom property (any name starting with --), and the letter is the first letter of the word the validator found. Inside a math function it tries to read each operand as a number, so calc(undefined * 1px) reports "Character u", calc(10px + auto) reports "Character a", and calc(px * 2) reports "Character p". The constants pi, infinity and NaN are allowed there and don't trigger it.

The validator is stricter than browsers here. A custom property accepts almost any value, and browsers don't check the math inside it when they read the stylesheet, so they keep the declaration. The validator still checks math functions inside custom properties, although it lets a plain --button-min-width: undefined through without a message.

The value is broken all the same, and it shows where the variable is used. With min-width: var(--button-min-width), the browser substitutes calc(undefined * 1px), which isn't a valid length, so min-width behaves as if it were unset. A fallback such as var(--button-min-width, 120px) doesn't help: it only applies when the custom property isn't set at all.

The word is usually undefined, printed by a script or template that writes the style from a JavaScript variable that was never set. Fix the script so the variable always holds a number, or leave the declaration out when there is no value. If a theme, plugin or site builder generates the CSS, the fix belongs in its settings or with its developer. Inside the math, var() is accepted, so calc(var(--button-columns, 1) * 120px) is fine.

Invalid example

<button type="button" style="--button-min-width: calc(undefined * 1px);">Add to cart</button>

Valid example

<button type="button" style="--button-min-width: calc(120 * 1px);">Add to cart</button>

Find issues like this automatically

Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.

Help us improve our guides

Was this guide helpful?
🌍 Trusted by teams worldwide

Validate at scale.
Ship accessible websites, faster.

Automated HTML & accessibility validation for large sites. Check thousands of pages against WCAG guidelines and W3C standards in minutes, not days.

Scheduled Reports
API Access
Open Source Standards
€5 / week

1K Weekly

1,000 monthly checks. Cancel anytime.

Get 1K Weekly →

Join teams across 40+ countries