The new if() function in CSS has landed in the latest Chrome
CSS is kinda-sorta becoming a true “programming language” with each passing day. With the introduction of new features like CSS variables, the calc() function, The pseudo-classes like :has() and :is(), and the ever versatile @media queries, CSS is making it easier to write complex styles and layouts.
The recent addition to this list is the new if() function in CSS. However, only in Chrome 137 and above at the moment. But it’s a good start I believe.
The if() function in CSS
The if() function allows you to conditionally apply styles based on a given condition, making it easier to write responsive and adaptive designs.
The syntax looks like this:
div {
color: if(
style(<some-condition>): <some-value>;
style(<some-other-condition>): <some-other-value>;
else: <default-value>;
);
}
As you can tell, in the if() function, you can specify multiple conditions and their corresponding styles. If none of the conditions match, the else value is applied.
The style() function defines the condition and the value to be applied if the condition is true.
Example Usage
Here’s a simple example of how you can use the if() function in CSS.
<div class="dark">dark</div>
<div class="light">light</div>
We can use the if() function to conditionally apply background colors based on the class of the element like so.
div {
color: var(--color);
background-color: if(
style(--color: white): black;
else: pink
);
}
.dark {
--color: black;
}
.light {
--color: white;
}
Here, the if() function checks if the --color variable is set to white. If it is, the background color is set to black, otherwise it defaults to pink.
Here’s a CodePen to see it in action.
See the Pen The if() function in CSS by Amit Merchant (@amit_merchant) on CodePen.
A more advanced example
The if() function truly shines in the scenarios where you need to apply different styles based on, let’s say, HTML attributes.
For instance, in this example by Una, we can leverage the data-status attribute to dynamically change the border-color, background-color, or even the grid-column of an element.
<div class="container">
<div class="card" data-status="pending">
</div>
<div class="card" data-status="complete">
</div>
<div class="card" data-status="pending">
</div>
<div class="card" data-status="inactive">
</div>
</div>
Here’s how you can apply dynamic styles.
.card {
--status: attr(data-status type(<custom-ident>));
border: 1px solid;
border-color: if(
style(--status: pending): royalblue;
style(--status: complete): seagreen;
else: gray
);
background-color: if(
style(--status: pending): #eff7fa;
style(--status: complete): #f6fff6;
else: #f7f7f7
);
grid-column: if(
style(--status: pending): 1;
style(--status: complete): 2;
else: 3
);
}
Here’s the CodePen to see it in action.
Browser Support
The if() function is currently supported in the latest version of Chrome (version 137 and above). But it seems like more browsers are considering adding support for it in the future. So, use it with caution!
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
