How to correctly use if() in CSS

CSS is introducing a new if() function for conditional styling, but there's a common pitfall when using calculations within conditions. The browser treats custom property values as strings unless they're registered with @property, which means calculations like calc(var(--n)/2) won't be evaluated. To fix this, you need to register the custom property with @property and specify its syntax and initial value. This registration is only required when calculations are involved - exact value matching works without registration.