CSS: Unrecognized at-rule “@if”

The @if at-rule is not part of the CSS specification and is not recognized by browsers or the W3C validator.

CSS does not have conditional @if logic the way preprocessors like Sass or LESS do. If @if appears in a <style> block or linked stylesheet, it likely means preprocessor code was included directly in the HTML without being compiled first. The W3C validator flags this because it parses the CSS according to the official specification, where @if does not exist.

There is a CSS Conditional Rules specification, but it covers @media and @supports, not a general purpose @if. To apply styles conditionally in plain CSS, use one of those two at-rules instead.

If the intent was to check for browser support of a CSS feature, @supports is the correct replacement. If the intent was to apply styles based on viewport size or device characteristics, @media is the correct replacement.

If the code comes from a Sass or LESS source file, compile it to plain CSS before including it in HTML.

Example with the issue

<style>
  @if (color: red) {
    .box {
      color: red;
    }
  }
</style>

Fixed example using @supports

<style>
  @supports (color: red) {
    .box {
      color: red;
    }
  }
</style>

Fixed example using @media

<style>
  @media (min-width: 768px) {
    .box {
      color: red;
    }
  }
</style>

Learn more:

MDN Reference

CSS At-rules

→