The proposed CSS @when/@else Rules

So if you have been wondering why CSS is so crucial in web development? The answer lies in its ability to shape the visual aspects of websites. CSS (Cascading Style Sheets) is important for creating aesthetically pleasing web pages by controlling layout, colors, fonts, and various design elements.

But what if you could go beyond the traditional methods and apply styles conditionally based on specific criteria? This is where the proposed CSS when/else rules come in.

Although these rules are still in the proposal stage and not yet implemented in browsers, they offer a glimpse into the future of CSS. Developers can look forward to using these features to enhance the power and flexibility of CSS for conditional styling. For more details, you can refer to the W3C module.

Now, let’s look at this feature to understand what the when/else rules are all about.

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, where styles are applied universally.

Comparison Table: when/else Rules vs. Traditional CSS

Example of Traditional CSS

/* Traditional CSS example */
body {
    background-color: white;
    color: black;
}

@media (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

Example of CSS @when/@else Rules (Proposed)

/* Proposed CSS @when/@else example */
@when (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
} @else {
    body {
        background-color: white;
        color: black;
    }
}

Although these when/else rules are still in the proposal stage and not yet implemented in browsers, they offer a glimpse into the future of CSS. Developers can look forward to using these features to enhance the power and flexibility of CSS for conditional styling. For more details, you can refer to the W3C module.

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.

Common Use Cases for CSS @when/@else Rules

1. Responsive Design: Adjusting layout and font sizes based on viewport dimensions.

   • Example: Switching from a multi-column layout to a single-column layout on mobile devices.

2. Feature Detection: Applying styles only if certain CSS features are supported by the browser.

   • Example: Using grid layout styles only if the browser supports CSS Grid.

3. Environment Adaptation: Changing styles based on user preferences or environmental conditions like dark mode.

   • Example: Applying a dark color scheme if the user has set their system to dark mode.

4. State-Based Styling: Modifying styles based on the state of an element, such as hover or focus.

   • Example: Changing the background color of a button when it is hovered over.

5. Fallbacks for Older Browsers: Providing alternative styles for browsers that do not support modern CSS properties.

   • Example: Using flexbox as a fallback for browsers that do not support grid layout.

I personally think this new features will enhance readability, and with the combination of 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. like this:

@when media(max-width: 769px) and supports(display: grid) and supports(display: flex) {
  .grid {
    grid-template-columns: 1fr;
  }

  .flex {
    flex-direction: row;
  }
}

And most importantly, less JavaScript. to achieve something like this:

window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    document.body.classList.add('mobile');
  } else {
    document.body.classList.remove('mobile');
  }
});

You can now achieve same in CSS:

body.mobile .container {
  /* Styles for mobile */
}

@else {
  .container {
    /* Default styles */
  }
}

Responsive design using the rules

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

@else {
  .column {
    width: 50%;
  }
}

There is so much more you can achieve with these rules! Tell me in the comments section: Are you looking forward to this feature? Will you be using it? What do you think?