Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

  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".



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




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: