3 ms·
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 v
by cubefox 11mo 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 11mo agoThat'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); }