Comment by EmilStenstrom

2 months ago

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

2 comments

EmilStenstrom

  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 2 months 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);
    }