[css-values-5] Allow `if()` in descriptors

[valtlai]

Spec: https://drafts.csswg.org/css-values-5/#if-notation

Could we allow using the if() function in at-rule descriptors (if not already the case)?

My use case would be conditionally loading a hinted or unhinted font:

@font-face {
  font-family: 'The Font';
  src: if(
    media(resolution < 2x): url(the-font-hinted.woff2);
    else: url(the-font-unhinted.woff2)
  );
}

Without if() support (or nesting support, see #11940), we have to needlessly repeat the unchanged descriptors:

@media (resolution < 2x) {
  @font-face {
    font-family: 'The Font';
    src: url(the-font-hinted.woff2);
  }
}

@media (resolution >= 2x) {
  @font-face {
    font-family: 'The Font';
    src: url(the-font-unhinted.woff2);
  }
}

This isn’t DRY and is annoying when there are a lot of @font-face rules.

[svgeesus]

@tabatkins @fantasai @mirisuzanne

[andruud]

Could we allow using the if() function in at-rule descriptors (if not already the case)?

Definitely not the case currently, no substitution function works outside of properties.

But yes, this looks useful. We would have to spec which tests are valid and which are not: if(style(--x: foo)) does not mean anything here, since we're not in the context of an element.

I wonder, though: if we have #11940, do we really need this as well?

[valtlai]

If we only support one or the other, I’d personally prefer if() over the nested @media.

[AtkinsSJ]

Nesting things inside @font-face or other non-style at-rules seems really weird to me so I'd personally rather avoid that.