Using The Upcoming CSS When/Else Rules
Published: 2024-06-15 14:20:14


by [Christiana Uloma](https://blog.openreplay.com/authors/christiana-uloma)



<blockquote><em>
CSS is always evolving, and new proposed rules provide extra features that you should be aware of. This article will explain two new expansions, @when and @else, so that you can be prepared.
</em></blockquote>




<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>




# Using CSS when/else rules 

If you have wondered why [CSS](https://en.wikipedia.org/wiki/CSS) holds such importance in web development, the answer becomes clear once you understand its role in shaping the visual aspects of websites. As we all know, [CSS (Cascading Style Sheets)](https://en.wikipedia.org/wiki/CSS) plays a significant role in developing good-looking web pages as they control the layout, colors, fonts, and various design elements. However, what if there was a way to go beyond the traditional approach and apply styles conditionally based on specific criteria? In this article, we will explore the proposed CSS [`@when/@else`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules) rules, which can enable developers to achieve precisely that.

It’s important to note that these rules are still in the proposal stage and are not part of the standard CSS implemented in browsers yet. Therefore, they cannot be used in production environments at this time. Developers can look forward to these features being adopted in the future, which will enhance the power and flexibility of CSS for conditional styling. Please see this [W3C module](https://www.w3.org/TR/css-conditional-5/#when-rule) for more information. 

That being said, let's dive in to understand what the `@when/@else` rules are.

## Understanding CSS `@when/@else` rules

With CSS, `@when/@else` rules provide a mechanism for applying styles selectively based on specific conditions. In simpler terms, they allow developers to define a set of styles to be applied when a condition is met and an alternative set of styles when it is not. This approach differs from [traditional CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured), where styles are applied universally. 

Below is a table that distinguishes the `@when/@else` rules from the traditional CSS.

| Aspect                  | CSS `@when/@else` Rules                  | Traditional CSS Approaches        |
|-------------------------|-------------------------------------|-----------------------------------|
| Selective Styling       | Styles can be applied conditionally | Styles are applied universally    |
| Dynamic Adaptability    | Allows for responsive design         | Limited flexibility in styling    |
| Specific Conditions     | Styles can be based on criteria      | Styles applied without conditions |
| User Interaction        | Enables interactive styling          | Limited interactivity             |
| State and Event Styling | Different styles for various states  | Limited state-based styling       |
| Customization           | Highly customizable                  | Less customization options        |
| Usability and Aesthetics| Enhances user experience             | Standard styling practices        |

In traditional CSS, styles are universally applied to elements that match a selector. 

For example:
```css
.nav {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.nav-item {
  margin-right: 1rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-item {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}
```
This traditional CSS approach applies the main styles for the `.nav` and `.nav-item` universally, while the responsive styles inside the `@media` target specific screen widths to modify the layout and spacing for smaller screens. 

Here's an example using the `@when/@else` rule syntax: 
```css
/* Using @when and @else */
@when media(max-width: 768px) and supports(display: flex) {
  .nav {
    flex-direction: column;
  }
  
  .nav-item {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}

@else {
  .nav {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: #fff;
    padding: 1rem;
  }
  
  .nav-item {
    margin-right: 1rem;
  }
}
```
As you can see, with the `@when` rule, we check if the screen width is less than or equal to `768px` and if the browser supports Flexbox. If both conditions are true, the first block of styles is applied (vertical layout). Otherwise, the `@else` block provides the traditional horizontal layout. 

NOTE: The `@when` and `@else` rules simplify conditional styling, making your CSS more concise and easier to manage.

## Benefits of using the `@when/@else` rules

Now that we have a glimpse of CSS's `@when/@else` rules let's explore some of its benefits. 

### Generalization with `@when` 

The `@when` rule generalizes conditionals, allowing you to combine different queries (such as `@media` and `@support`) into a single statement. You can wrap multiple conditions into one block instead of writing separate conditional rules for specific tasks.

For example, suppose you want to test whether a media screen is below `769px` and whether the browser supports both grid and flex display features. With `@when`, you can create a generalized rule like this:
```css
@when media(max-width: 769px) and supports(display: grid) and supports(display: flex) {
  .grid {
    grid-template-columns: 1fr;
  }
  
  .flex {
    flex-direction: row;
  }
}
```
In the above code, the `@when` rule is followed by the [media query](https://www.w3schools.com/css/css3_mediaqueries.asp) condition `(max-width: 769px)` and the `supports` conditions for `display: grid` and `display: flex`. Inside the rule, the styles for the `.grid` and `.flex` classes are specified accordingly. 

### Mutually exclusive rules with `@else`

The `@else` statement allows you to write [mutually exclusive](https://medium.com/@hayavuk/mutually-exclusive-selectors-9e8bd29baafb) rules. If the conditions in the `@when` block are evaluated as false, the CSS engine ignores that style block and falls back to default styles. For instance, you can create styles that apply only when certain conditions are met; if not, the fallback styles take effect. 

### Improved readability 

Using [comparison operators](https://www.codecademy.com/article/fwd-js-comparison-logical) in `@when` and `@else` makes media queries easier to read and understand. It simplifies complex logic by combining multiple conditions into concise statements. 

### Support extensions

The [Level 4 CSS update](https://css-tricks.com/css4/) includes extensions to support rules, allowing testing for supported font technologies and other features. 



<CTA_Middle_Design />




## Implementing `@when/@else` rules in CSS

To implement the `@when/@else` rules, we can use a combination of CSS selectors and properties. 

Here’s a step-by-step guide on how to implement the `@when/@else` rules in CSS: 

- Check browser support: Before you start, verify if your target browser supports the `@when/@else` rules. You can check resources like “[Can I use](https://caniuse.com/css-when-else)” for the most current information. 
- Write the base CSS: Define the base CSS styles that will apply regardless of conditions.
- Define your conditions: Determine the conditions under which you want to apply different styles. These can be based on media queries, feature support, or other environmental conditions.
- Use `@when` to apply conditional styles: Start with the `@when` rule followed by your condition in parentheses. Inside the curly braces `{}`, write the CSS rules that should apply when the condition is true.
- Use `@else` for alternative styles: Follow the `@when` block with an `@else` block. Inside the `@else` curly braces, write the CSS rules that should apply when the `@when` condition is not met.
- Test your styles: After implementing your conditional rules, test them across browsers and devices to ensure they work as expected.

Here’s an example to illustrate the process:
```css
/* Base CSS */
.container {
  padding: 20px;
}

/* Conditional CSS */
@when media(max-width: 600px) {
  .container {
    padding: 10px; /* Smaller padding for narrow screens */
  }
}

@else {
  .container {
    padding: 20px; /* Default padding */
  }
}
```
In this example, the `.container` will have a padding of `10px` if the viewport width is less than `600px`. Otherwise, it will default to a padding of `20px`. 

Now, let's take a look at common use cases.👇

- Responsive design: Adjusting layout and font sizes based on viewport dimensions. For example, switching from a multi-column layout to a single-column layout on mobile devices. 
- Feature detection: Applying styles only if certain CSS features are supported by the browser. For example, using grid layout styles only if the browser supports CSS Grid.
- Environment adaptation: Changing styles based on user preferences or environmental conditions like dark mode. For example, a dark color scheme can be applied if the user has set their system to dark mode.
- State-based styling: Modifying styles based on the state of an element, such as hover or focus. For example, changing the background color of a button when it is hovered over.
- Fallbacks for older browsers: Providing alternative styles for browsers that do not support modern CSS properties. For example, using flexbox as a fallback for browsers that do not support grid layout. 

Here’s an example that combines responsive design and feature detection:
```css
/* Base styles */
.container {
  display: flex;
  flex-wrap: wrap;
}

/* Conditional styles */
@when media(max-width: 600px) and supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@else {
  .container {
    display: flex;
    flex-direction: column;
  }
}
```
In this example, if the viewport is less than `600px` wide and the browser supports CSS Grid, the `.container` will use a grid layout with flexible columns. If not, it will default to a flex column layout. 

## Advanced techniques for CSS `@when/@else` rules

Advanced Techniques for CSS `@when/@else` rules offer more control over styles based on different conditions like complex media queries, feature detection, or custom environmental factors. This section talks about advanced approaches and tips that help optimize the usage of `@when/@else` rules. 

Let's go!

### Combining with CSS preprocessors

[CSS preprocessors](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor) like [Sass](https://sass-lang.com/) or [LESS](https://lesscss.org/) can enhance the `@when/@else` rules by allowing you to use [variables](https://www.w3schools.com/css/css3_variables.asp), [functions](https://www.w3schools.com/cssref/css_functions.php), and other programming concepts within your CSS. 

Here’s an example using Sass:
```css
$breakpoint: 600px;

@mixin responsive($property, $value) {
  @when media(max-width: $breakpoint) {
    #{$property}: $value;
  }
  @else {
    #{$property}: adjust-value($value);
  }
}

.container {
  @include responsive(padding, 20px);
}
```
In the code above, the responsive [mixin](https://www.w3schools.com/sass/sass_mixin_include.php) applies different padding values based on the viewport width, using a variable for the breakpoint.

To learn more about Sass, read [this](https://www.creativebloq.com/how-to/get-started-with-sass).

### Dynamic styling based on conditions

[Dynamic styling](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information) can be achieved by setting [CSS variables](https://www.w3schools.com/css/css3_variables.asp) or classes that change styles based on certain conditions. For instance, JavaScript can be used to toggle a class based on user interaction or environmental changes.

Here's an example(JavaScript code):
```javascript
window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    document.body.classList.add('mobile');
  } else {
    document.body.classList.remove('mobile');
  }
});
```
CSS code:
```css
body.mobile .container {
  /* Styles for mobile */
}

@else {
  .container {
    /* Default styles */
  }
}
```
The JavaScript listens for window resize events and adds or removes a ‘`mobile`’ class to the body, which could trigger different styles based on the `@when/@else` rules.

### Responsive design using `@when/@else` rules

[Responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) aims to make web applications look good on all devices. With the `@when/@else` rules, you could write more readable media queries.

For example:
```css
@when media(max-width: 768px) {
  .column {
    width: 100%;
  }
}

@else {
  .column {
    width: 50%;
  }
}
```
This example changes the column width based on the viewport size, making it responsive to different device screens. 

## Best practices for `@when/@else` rules 

When working with CSS, especially with the proposed `@when/@else` rules, it’s important to follow best practices to write efficient and maintainable code. Here are some tips and debugging strategies:

- Plan your CSS: Before writing your CSS, plan the styles that will be needed, the different layouts, and specific overrides. Avoid too much overriding.
- Use flexible units: For maximum flexibility, use relative units like ems, rems, percentages, or viewport units.
- Keep it consistent: Whether you’re working alone or with a team, consistency in naming conventions, color descriptions, and formatting is key.
- Comment your CSS: Comments can help you and others understand the structure and purpose of your CSS. Use them to separate logical sections.

## Debugging `@when/@else` rules

When you come across issues with the functionality or appearance of the `@when/@else` rules, it's important to use debugging techniques to identify and fix the underlying problems. 

Here are some debugging techniques: 

- Browser [DevTools](https://developer.chrome.com/docs/devtools/overview): Modern browsers come with DevTools that allow you to inspect elements and see which CSS rules are being applied. Use this to troubleshoot unexpected behaviors.
- Isolation: If a particular set of rules isn’t working as expected, try isolating them in a separate stylesheet or HTML document to see if other styles are interfering.
- Process of elimination: Temporarily comment out other CSS rules to see if they are causing the issue. 

## Conclusion

In our discussion, we explored the concept of `@when/@else` rules in CSS, which are part of a proposed extension to CSS conditionals. We covered their syntax and potential use cases and provided a step-by-step guide on how they might be implemented. We also discussed advanced techniques, such as combining these rules with CSS preprocessors and using them for responsive design. Although these rules offer promising benefits for readability, maintainability, and flexibility in styling, it’s important to note that they are not yet part of the standard CSS implementation and thus are not supported in current browsers.

For further reading and learning, you can check the following resources:

- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules) provides a comprehensive guide on CSS conditional rules, including the `@when` and `@else` rules which are planned but not yet implemented.
- [W3cubDocs](https://docs.w3cub.com/browser_support_tables/css-when-else.html) offers support tables for CSS `@when/@else` conditional rules, detailing the syntax and usage.
- [LogRocket Blog](https://blog.logrocket.com/extending-css-when-else-chains-first-look/) gives a first look at extending CSS `@when/@else` chains, including practical uses within style sheets.
- [Can I use](https://caniuse.com/css-when-else) provides information on the browser support and syntax for CSS `@when/@else` conditional rules.

Thank you for reading :).