CSS Now Has if() Statements. Here’s How They Work

CSS Now Has if() Statements. Here’s How They Work
December 05, 2025 | Read time: 4 minutes

Cut Code Review Time & Bugs in Half

Code reviews are critical but time-consuming. CodeRabbit acts as your AI co-pilot, providing instant Code review comments and potential impacts of every pull request.

Beyond just flagging issues, CodeRabbit provides one-click fix suggestions and lets you define custom code quality rules using AST Grep patterns, catching subtle issues that traditional static analysis tools might miss.

CodeRabbit has so far reviewed more than 10 million PRs, installed on 2 million repositories, and used by 100 thousand Open-source projects. CodeRabbit is free for all open-source repo's.

Get Started Today

Sponsor this newsletter to reach 9,000+ active developers

Conditional logic is a familiar concept to anyone who has written a programming language. In languages like JavaScript or Python, if/else statements allow you to run different code depending on whether a condition is true or false. Until recently, vanilla CSS did not have a native way to do that. Web developers had to rely on media queries, feature queries, container queries, or preprocessors like Sass or SCSS to simulate conditional styling.

That is starting to change. The new CSS if() function introduces real conditional logic inside native stylesheets. In this article you will learn:

  • What if() is and why it matters
  • How it compares to existing CSS techniques
  • Practical examples you can use right away
  • When it is useful and when it is not

This guide assumes you already have a basic understanding of CSS.

What Conditional Styling Looked Like Before if()

Before if() existed, CSS conditional behavior typically relied on:

  • Media queries (for example @media (min-width: 700px) { ... }) for responsive design
  • Feature queries using @supports to apply styles only if a browser supports a specific property or value
  • Container queries using @container, depending on the size or attributes of a parent container
  • CSS custom properties combined with class toggling or pseudo-classes such as :hover or :focus for state-based styling

These techniques work well and are widely supported. The drawback is that they always require separate rule blocks. As projects grow, it is easy for styling logic to spread across multiple places.

The if() function changes this pattern by allowing inline, property-level conditional logic. Instead of writing entire blocks, you can place conditions directly next to the property value itself.

What if() Is and How It Works

The if() function lets you provide one or more condition to value pairs, along with an optional fallback. The browser evaluates each condition at runtime and uses the first matching result.

Basic syntax:

                            
selector {
  property: if(
    condition-1: value-1;
    condition-2: value-2;
    else: fallback-value;
  );
}

Right now, if() supports three types of condition queries:

  • style() for checking custom property values or element style states
  • media() for running inline media queries such as checking screen size or pointer type
  • supports() for checking whether a browser supports a specific CSS feature

Because all logic stays inline, you do not need separate blocks or additional selectors.

Practical Examples

Example 1: Single Condition:

                            
p {
  color: if(style(--p-color: bright): red; else: black);
}

If the custom property --p-color is set to bright, the paragraph text becomes red. Otherwise it stays black.

Example 2: Multiple Conditions with else

                            
div {
  background-color: if(
    style(--theme: light): white;
    style(--theme: dark): #111;
    else: gray
  );
}

This checks for two theme values and then falls back to gray if neither matches.

Example 3: Inline Responsive Logic Using media()

                            
button {
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

Devices with a fine pointer such as a mouse will see a 30px width. Touch devices with a coarse pointer get a wider 44px button.

When You Should Use if()

Situations where if() works very well

  • Small property-level adjustments
  • Theme switching or mode toggling
  • Minor responsive or adaptive tweaks
  • Feature-based fallbacks

Situations where if() is not the best option

  • Large sets of style changes involving many properties
  • Layout restructuring
  • Projects that require broad browser support
  • More advanced logic that still fits better in Sass or SCSS

Browser support for if() is currently limited, so production usage requires careful fallback planning.

Quick FAQ

Does CSS now support full if/else blocks like JavaScript or Sass?

No. if() only works inside a property value.

Is if() supported in every major browser?

Not yet. Support is still limited.

Do I still need Sass or SCSS?

Yes. Preprocessors remain valuable for many use cases including loops, mixins, large scale theming, and complex logic.

Conclusion

The introduction of if() represents an important step forward for CSS. It simplifies common tasks like theming, responsive adjustments, and feature fallbacks without the overhead of extra rule blocks or JavaScript. It also encourages a more granular and component-focused approach to styling.

if() does not replace existing CSS tools. It adds a new option that works alongside them. As browser support improves, it is likely to become a regular part of everyday CSS authoring.