CSS @else At-Rule

CSS @else At-Rule

The @else at-rule defines alternative CSS rules when a preceding @when or @else condition does not match. It is part of a proposed conditional styling system that allows multiple conditions to be evaluated in sequence.

@else Syntax

@when media(min-width: 768px) {
  .layout {
    display: grid;
  }
}
@else {
  .layout {
    display: block;
  }
}

The @else rule follows a preceding @when rule. Its declaration block applies when the preceding condition does not match.

The proposed syntax also allows @else to include another condition.

@else media(min-width: 480px) {
  .layout {
    display: flex;
  }
}

An @else rule cannot be used independently. It must belong to a conditional chain beginning with @when.

How @else Works

The @when and @else rules provide a way to choose between alternative groups of CSS declarations.

Conditions are evaluated in order. The first matching branch is selected, and later branches in the same chain are skipped.

If no conditional branch matches, an @else rule without a condition can provide the final alternative.

@when media(prefers-color-scheme: dark) {
  .panel {
    background-color: #222;
    color: #fff;
  }
}
@else {
  .panel {
    background-color: #fff;
    color: #222;
  }
}

In this proposed example, the panel receives dark colors when the user prefers a dark color scheme. Otherwise, the alternative branch supplies light colors.

This differs from separate @media rules, which can all apply independently when their conditions match.

Conditional Chains

Multiple @else rules can follow a single @when rule to form a conditional chain.

@when media(min-width: 1000px) {
  .container {
    width: 960px;
  }
}
@else media(min-width: 600px) {
  .container {
    width: 90%;
  }
}
@else {
  .container {
    width: 100%;
  }
}

The first branch applies at viewport widths of 1000px or more. The second applies at widths from 600px up to, but not including, 1000px. The final branch handles narrower viewports.

Because only the first matching branch is selected, the order of the conditions matters.

Condition Types

The proposed conditional syntax can evaluate different kinds of CSS conditions using functions such as media() and supports().

Testing CSS Feature Support

@when supports(display: grid) {
  .content {
    display: grid;
  }
}
@else {
  .content {
    display: block;
  }
}

The first branch is intended for browsers that support CSS Grid. The alternative branch provides a block layout when the condition is false.

The conditional chain itself still requires browser support for @when and @else.

Browser Compatibility

The @else at-rule is experimental and is not supported as an interoperable feature in mainstream browsers.

For production websites, use established CSS conditional rules such as @media and @supports.

Standard CSS Alternative

.layout {
  display: block;
}
@media (min-width: 768px) {
  .layout {
    display: grid;
  }
}

This example produces a block layout by default and changes it to a grid layout when the viewport is at least 768px wide.

Unlike the experimental conditional chain, this approach works in modern browsers without additional processing.

@else Example

The following example demonstrates a proposed conditional chain that selects a card layout based on viewport width.

@when media(min-width: 900px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
  }
}
@else media(min-width: 500px) {
  .card {
    display: flex;
    gap: 12px;
  }
}
@else {
  .card {
    display: block;
  }
}

The first branch selects a two-column grid for wide viewports. The second selects a flex layout for medium widths. The final branch uses a block layout for narrow screens.

This example illustrates the proposed syntax and is not intended as a working browser demonstration.

Browser Support

The @else at-rule has no broad native browser support. Use standard @media and @supports rules for reliable conditional styling. Visit Can I Use? and search for CSS conditional rules for compatibility information.

Specifications

The @else at-rule is described in the CSS Conditional Rules Module Level 5 draft specification alongside @when. Its syntax and behavior may change as the proposal develops.

CSS Conditional Rules Module Level 5