Big additions to CSS are quite rare, so the inclusion of the if() function is a pretty big deal for web designers out there. Conditional styles have been expected for a long time, it’s good to see it implemented, although not supported by every browser yet. Let’s see what the big news are about.

You can see all the examples given below in context on this Github repo (demo).

The basics

In short, CSS conditionals allow you to get rid of js, preprocessors, and other cumbersome workarounds when you need to set CSS properties based on specific conditions.

property: if(
   condition-1: value-1;
   condition-2: value-2;
   condition-3: value-3;
   else: value-4
);

In short, for a property, there will be a sequence of styles to apply for various conditions, if not condition is met, the else value will be applied.

At the time, CSS conditions work with the following three types of queries.

1. Style queries

Using style(), you can adapt your CSS to custom properties. With one data attribute, you can now control the style in one place. In the example below, I changed the style (border and background-color) depending on the status of a div.

.test-box {
   border: if(
      style(--status: stop): 2px dashed #ccc;
      style(--status: ready): 2px dashed #ffcc66;
      style(--status: go): 2px dashed #bbff99;
      else: 2px dotted #aaa;
   );
   padding: 15px;
   margin: 10px 0;
   --status: attr(data-status type(<custom-ident>));
   background-color: if(
      style(--status: stop): #ff1a1a;
      style(--status: ready): #ffcc66;
      style(--status: go): #bbff99;
      else: #ddd
   );
}

Another good example of the if() CSS function for a media query is to use it to test if you are on a device that doesn’t use a pointing device, such as a tablet. For that, just check our example where we change the padding of the button on tablets and phones so it’s easier to press.

.button {
   display: inline-block;
   padding: if(
      media(any-pointer: fine): 10px 20px;
      else: 20px 40px;
   );
   background: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   margin: 5px;
}

2. Media queries

No more big blocks for each media query, which separates your values and make it messy to maintain. Now, every element can be defined for each screen size in one place. This can also be used for print CSS, among other things. In the example below, you can see how I used it to adapt the max width of the web page container for various screen sizes.

.container {
   max-width: if(
      media(width >= 1200px): 800px;
      media(768px <= width < 1200px): 600px;
      media(480px <= width < 768px): 450px;
      else: 90%
   );
   margin: 0 auto;
   background: white;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

3. Supports queries

The if() condition also allows you to check for support of various things before using it, letting you have a fallback version to display when a property is not supported. This can be used for color space support, layout or display support, advanced CSS features, typographic units, animation and transformation features, or browser-specific support features.

In this example, we check if the browser can render OKLCH color values, if not we ask it to use the closest HEX value for the background.

body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 20px;

   background-color: if(
      supports(color: oklch(0.83 0.08 94 / 10.24%)): oklch(0.83 0.08 94 / 10.24%);
      else: #e0e0e01a;
   );

}

Browser support of the if() conditional CSS function

Unfortunately, you may have to wait a bit to start using the if() CSS function on production projects, as the support is not wide enough yet. The most notable browsers that are not supporting it are Firefox and Safari, which represent a combined market share of 15 to 20%. However, you should already try to play with it and see how it can help you in a near future for your projects.

What’s coming next?

The evolution of CSS continues behind the scenes! The CSS Working Group is already sketching out some powerful new capabilities for the if() function. Imagine checking if a custom property falls within a certain range, combining multiple logic checks, or making decisions based on an element’s container size.