Inspect the working example
The outer box is 240px. --size contains tomato, while width requests var(--size,20px). The custom property exists, but tomato is not a valid width value.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Custom token | Read --size | tomato exists |
| Substitution | width:tomato | Invalid receiving-property value |
| Layout result | Measure the inner box | 240px auto width, not 20px fallback |
Follow the browser mechanism
The fallback is not selected simply because a present token later fails the width grammar. Substitution can make the receiving declaration invalid at computed-value time. The property then uses its invalid-declaration handling, which gives auto width in this block.
A missing variable does select this fallback
The contrast removes --size while retaining width:var(--size,20px).
<style>body{margin:8px}</style>
<style>.outer{width:240px}.note{width:var(--size,20px);height:24px;background:#e3efe8}</style><section class="outer"><section class="note"></section></section>The missing variable resolves to the fallback 20px, producing a20px box.
Try the repair
Does var(--size,20px) validate every supplied --size as a length?
Show the worked answer
No. Validate the receiving property or use an appropriate registered custom-property design; this fallback alone does not enforce the width grammar.
- Inspect token presence and receiving-property validity separately.
- Measure the actual box in both cases.