4 ms·

Here is a much better link to how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if https://developer.mozilla.org/en-US/docs/Web/CS

• cubefox 10mo ago
  padding: 1em; padding: if(style(--size: "2xl"): 1em; else: 0.25em); > Note: Remember to include the else condition. In if()-supporting browsers, if no else value were included and --size was not equal to "2xl", the padding would be set to initial. This is counterintuitive. You would expect the above falls back to "1em" (from "padding: 1em;") when "else" is not specified. Instead, omitting "else" apparently means "else: initial".
  • kaelwd 10mo ago
    That's the same as regular css variables unfortunately padding: 1em; padding: var(--padding); With no fallback value that resolves to padding: unset if the variable is not defined. The only ways I know of to work around this are style queries: padding: 1em; @container style(--padding) { padding: var(--padding); } Or cascade layers: @layer base { padding: 1em; } @layer override { padding: var(--padding, revert-layer); }