An @property rule declares a custom property's syntax, inheritance behavior, and initial value. That lets the browser reject a value that does not match the declared type.
Make this comfortable
CSS @property: type a custom value and control inheritance
How the rule works
A progress rail uses a percentage to size its filled track. Register the percentage so an accidental color token cannot silently become the rail length. Keep the property name private to this component family and choose an initial value that leaves the rail in a usable state before data arrives. The registered value can interpolate when a supported transition uses it, but the UI still needs a text progress value for readers who cannot perceive the fill. Registration is not data validation: the backend owns the real completion state, and CSS only presents it. Check zero and full completion, a malformed value, and a reduced-motion preference. Use an ordinary custom property when typing and interpolation bring no practical benefit.
@property --review-progress {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.review-progress { --review-progress: 38%; }
.review-progress__fill { inline-size: var(--review-progress); }Cost and verification
The browser has a typed value to compute; this does not add a network request. The risk is a registration name reused with incompatible syntax elsewhere in a large stylesheet. Keep one declaration owner and inspect computed values after imports and layering. A percentage still needs a meaningful containing width, so the track must have an actual inline size. Avoid animating the fill without considering motion settings and whether frequent updates are necessary. The code is presentation-only; the numerical state belongs in text or accessible markup as well.
Common Mistakes
- Do not register the same property name with competing contracts.
- Do not read a CSS progress width as the source of truth.
- Do not assume a typed token fixes an incorrectly sized container.
Connected lessons
css
foundations
web