Introduction to CSS if Statements and Conditional Logic
Conditional logic is a familiar concept to anyone who has written a programming language. Languages like JavaScript or Python use if/else statements to evaluate expressions and execute different blocks of code depending on whether the condition is true or false. Until very recently, vanilla CSS had no equivalent runtime conditional logic – developers relied on media queries, feature queries or preprocessors (like Sass/SCSS) to conditionally apply styles.
This guide covers the following:
- Introduces the new
if()function in CSS - How it differs from earlier conditional techniques
- Provides beginner‑friendly examples
- FAQs for quick-reference related answers
Please note that this guide assumes that you’re already familiar with CSS, if you aren’t please consider checking out some of our beginner CSS guides on HTML All The Things.
What are “if statements” and how do they relate to CSS?
In programming, an if statement checks a condition and then runs one set of instructions when the condition is true and another when it is false. You can think of it as a computer making a decision – if I’m hungry at 12pm, then I’ll go to the cafeteria.
In the context of vanilla CSS, conditional logic wasn’t possible without using a third-party solution like Sass/SCSS which has offered its own @if directive for years. Sass compiles these directives during build time; the resulting CSS has no runtime conditional logic. As the Sass documentation explains, it provides flow‑control similar to JavaScript, allowing styles to be compiled only when a Boolean expression evaluates to true.
It’s important to note that CSS if statements are considered experimental (as of writing this) with browser support limited to Chrome, Edge, Opera, Android Browser, and Chrome for Android. If you’re reading this in the future, hopefully the support has improved – you can check on the current status on Can I Use.
Conditional styling without if statements
If you don’t want to use Sass or SCSS, vanilla CSS users did “workaround” the lack of if statements, by getting conditional logic to work in other ways, such as:
- Media queries (ie.
@media (min-width: 700px) { … }) to apply styles at particular screen sizes. These are part of the CSS conditional rules module and are widely supported. - Feature queries using
@supports, which apply styles only if a browser supports a specific property–value pair. You can combine multiple conditions withand,orornotoperators. - Container queries (
@container) that apply styles based on the size or style of a parent container. - CSS custom properties and pseudo‑classes (
:hover,:focus,:nth‑child(), etc.) for state‑based styling, explained further in our CSS pseudo‑class guide.
All of these techniques let you apply conditional styles, but they are not inline if statements; they require separate rule blocks. The new if() function provides inline conditional logic inside property values for the first time.
Introducing the if() function
How if() works
The CSS if() function is an experimental value function that lets you pick a value based on a series of conditions. MDN describes it as providing “conditional logic to CSS property values” that works similarly to JavaScript if…else statements. It can be used inside the value of any CSS property.
An if() function contains one or more <if‑condition> : <value> pairs separated by semi‑colons, optionally followed by else : <value>. Conditions are evaluated in order; the first condition that evaluates to true returns its associated value. If no condition is true, the else value is returned, or the function returns a guaranteed‑invalid value. There must be no space between if and its opening parenthesis; otherwise the entire declaration is invalid.
The CSS if()function lets you set values of CSS properties based on a series of conditions. This conditional logic works similarly to JavaScript if…else statements and can be used inside the value of any CSS property.
Syntax overview
CSS if() functions support a single condition, multiple conditions, and a fallback by using an else condition. Let’s take a look at what the syntax looks like below.
/* Single Condition */
property: if(condition‑1 : value‑1;);
/* Multiple Conditions */
property: if(condition‑1 : value‑1;
condition‑2 : value‑2;
);
/* Else Condition */
property: if(condition‑1 : value‑1;
else : fallback
);
/* Multiple Conditions w/ Else */
property: if(condition‑1 : value‑1;
condition‑2 : value‑2;
/* …more conditions as needed */
else : fallback
);
- Conditions can test style values, media queries or feature support.
- A single
else : valueis typically placed at the end of the list to act as a fallback/default.
Query types available in if()
There are three types of queries that if() statements support, meaning there are three types of conditions that we can make decisions with. The table below breaks down the three query types…
| Query type | Description |
|---|---|
style() |
Tests a computed style or custom property on the same element. Unlike container style queries, if()’s style() queries do not require a parent element. |
media() |
Checks a media feature, similar to an inline media query. |
supports() |
Performs an inline feature query; returns the value if the browser supports the specified property or function. |
Using if() in practice
Example 1 – Single Condition
In this example I’ve created a simple, single condition if statement, where the paragraph text color changes to red if the CSS custom property (CSS variable) called p-color is set bright.
This is a paragraph
Example 2 – Multiple Conditions and Else
In this example, we’ve expanded on Example 1, by adding another condition and an else.
Demo:
This is a paragraph
You can see from the output, that because the p-color is not set to bright or dull, then it’ll be set to orange.
Example 3 - `media()` Query
In this example, we’re using a media() query to check if the viewport is above or below 1000px wide, and based on that we’re changing the background color of the entire body.
Media queries are already super useful conditional CSS features that are commonly used for responsivity changes. Coupled with if() we can use media to change specific property values rather than full selectors.
body {
background-color: if(
media(width > 1000px): red;
media(width < 1000px): blue;
);
}
Example 4 - `supports()` query
In this example we’re using supports() to check if the browser supports display: grid;, if it does then we want use it , otherwise we’ll use display: block;.
If you’re familiar with CSS you might think that this was already possible (and commonly used) without the use of if() and you’d be correct. But let’s explore the differences below…
Without using if() you can use this common implementation:
/* Fallback for browsers that don't support grid */
.container {
display: block;
}
/* If the browser supports grid, then use it */
@supports (display: grid) {
.container {
display: grid;
}
}
But with if(), we can implement the same solution with fewer lines, as shown below:
.container {
display: if(
supports(display: grid): grid;
else: block;
);
}
FAQ – Frequently Asked Questions
Does CSS support real if/else statements?
Native CSS now supports conditional logic through the if() function, which can return different values depending on conditions. However, CSS does not support a @if block like Sass. if() can only live inside a property value and cannot wrap multiple declarations. It’s also important to note that as of writing this, if() support is not widely supported and may not be appropriate for production websites.
Is the if() function widely supported?
No. As of writing this, MDN marks if() as experimental and warns developers to check browser compatibility carefully. Check the Can I Use if() page to see up-to-date compatibility.
How is if() different from @media or @supports?
@media and @supports apply entire blocks of CSS when a condition is true, whereas if() returns a single property value inline. Use if() for fine‑grained control over individual property values (ie., adjusting a single width or color). Use @media or @supports when you need to change multiple properties or apply complex rules.
Can I nest if() inside other functions or nest functions inside if()?
Yes. if() can be nested within CSS functions and vice versa, as long as the resulting value is valid. For example: margin-top: max(10px, if(media(width > 700px): 20px; else: 15px));
Do I still need Sass/SCSS if CSS has if()?
Sass/SCSS remains valuable for variables, mixins, loops and compile‑time logic. The if() function provides runtime conditional values in CSS, which complement but do not replace Sass features. Many developers will continue using preprocessors to organize and modularize stylesheets. if() is also still not fully supported across all major browsers, but Sass/SCSS is – this will likely change over time, but it could take years before widespread support is reached.
What are some real‑world use cases for if()?
- Theme or mode switching – choose colors, fonts or spacing based on a
-themecustom property. - Responsive tweaks – adjust a single dimension (ie., margin or width) inline without writing a separate
@mediablock. - Feature fallbacks – For example, attempt to use CSS grid, but use something else if it isn’t.
- Stateful components – style components based on
data-*attributes or custom properties (ie status, error, success)
Conclusion
The new if() function is an exciting addition to the CSS toolbox. It brings inline conditional logic that previously required Sass or scattered media queries. By understanding how if() interacts with style, media and support queries, and by combining it with custom properties and data attributes, you can write more expressive, maintainable styles. Keep in mind its experimental status, so use this guide as a reference to experiment with CSS conditionals today and stay prepared for the future of responsive design.
