How to Use the if() Function in CSS

CSS keeps getting better, and one of the new features is the if() function. It allows us to write conditional logic directly inside CSS values. That means CSS can now choose different property values depending on things like screen size, browser support, or custom variables — without needing JavaScript.

In this article, we’ll learn what the if() function is, how it works, and some simple examples.

What is the if() Function in CSS?

The if() function lets you tell CSS:

“If this condition is true, use this value. Otherwise, use another value.”

This is similar to an if statement in JavaScript, but used inside CSS properties.

For example:

padding: if(media(width < 600px): 8px; else: 16px);

This means:

• If the screen is less than 600px wide, padding will be 8px.
• Otherwise, it will be 16px.

One important note:
The if() function is new and experimental, so not all browsers support it yet. Always test before using it in production.

Basic Syntax

The structure looks like this:

if(condition: value; else: fallbackValue)

There can be:

• One or more conditions
• An optional else value

If none of the conditions are true and no else is provided, the value becomes invalid.

Also, make sure there is no space:

❌ if ( — not allowed
✔️ if( — correct

Types of Conditions You Can Use

The if() function supports three types of conditions:

1. Style (Custom Property) Conditions

You can check the value of a custom CSS variable (--property) and choose a style based on it.

Example:

background-color: if(
  style(--theme: dark): black;
  style(--theme: light): white;
  else: gray;
);

If --theme is set to dark, the background becomes black.
If it’s light, it becomes white.
Otherwise, it becomes gray.

This helps build theme systems without writing extra CSS.

2. Media Queries

You can use a media query directly inside if() to change a property depending on screen size.

Example:

font-size: if(
  media(width < 600px): 14px;
  else: 18px;
);

Here:

• On smaller screens, text becomes 14px.
• On larger screens, it becomes 18px.

This is useful when you only want to change one property without creating a full @media block.

3. Feature Support

You can check whether the browser supports a CSS feature and apply styles accordingly.

Example:

color: if(
  supports(color: lch(80% 20 40)): lch(80% 20 40);
  else: rgb(200, 200, 200);
);

This means:

• If the browser supports modern lch() colors, use it.
• Otherwise, fall back to standard RGB.

This helps you progressively enhance your styles.

Nesting and Partial Values

You can use if() inside other functions.

Example inside calc():

width: calc(
  if(style(--wide: true): 70%; else: 50%) - 20px
);

You can also nest one if() inside another, though too much nesting can make CSS harder to read.

Browser Support and Fallbacks

Because if() is still new:

• Some browsers may not support it yet.
• Always provide fallback values.

A common pattern is:

padding: 16px; /* fallback */
padding: if(media(width < 600px): 8px; else: 16px);

If the browser doesn’t support if(), the first line still ensures your layout works.

When Should You Use if()?

Here are some practical use cases:

1. Theme systems
   Switch colors or styles based on a variable like --theme.
2. Small responsive adjustments
   Change only one property depending on screen size, instead of writing an entire media query block.
3. Progressive enhancement
   Use advanced features (like modern color formats) only when supported.

Things to Keep in Mind

• The feature is experimental, so test carefully.
• Too many nested if() statements can make CSS confusing.
• Always add fallback values for older browsers.

Conclusion

The if() function is a powerful new addition to CSS. It lets you write conditional logic directly inside your styles, making CSS more flexible and intelligent. While support is still growing, it’s a great tool for themes, responsive tweaks, and feature detection.

As the web evolves, CSS is getting closer to becoming a fully dynamic styling language — and if() is a big step in that direction.