CSS: Unrecognized at-rule @if

The CSS @if rule is not part of any stable CSS specification and is not recognized by the W3C validator.

CSS Conditional Rules (like @media and @supports) are the standard way to apply styles conditionally in CSS. The @if rule exists only as a proposal in the CSS Conditional Rules Module Level 5 draft and has no browser support. If you're seeing @if in your stylesheets, it likely came from a CSS preprocessor like Sass or Less, where @if is a compile-time directive. Preprocessor syntax should never appear in the final CSS output sent to the browser.

If you're writing Sass or Less, make sure your build process compiles the source files into plain CSS before including them in your HTML. If you need conditional logic in standard CSS, use @media for viewport or device conditions, or @supports for feature detection.

HTML example with the issue

<style>
  .banner {
    background: blue;
  }
  @if (width > 600px) {
    .banner {
      background: red;
    }
  }
</style>

Fixed example using @media

<style>
  .banner {
    background: blue;
  }
  @media (min-width: 600px) {
    .banner {
      background: red;
    }
  }
</style>

Fixed example using @supports

If the condition is about feature support rather than viewport size:

<style>
  .layout {
    display: flex;
  }
  @supports (display: grid) {
    .layout {
      display: grid;
    }
  }
</style>

Learn more:

MDN Reference

MDN Web Docs: CSS At-rules

→