# CSS: Unrecognized at-rule @if

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-unrecognized-at-rule-if
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

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

## Fixed example using `@media`

```html
<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:

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