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

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-custom-property-x-character-y-is-neither-a-decimal-digit-number-decimal-point-nor-e-notation-exponential-mark
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Valid example

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