The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →@when and @else are proposed CSS rules for combining conditional styling logic more directly. They are not currently supported browser features: the W3C CSS Conditional Rules Level 5 document is a work-in-progress Working Draft, and MDN says the rules are not yet supported. For production styles, use established tools such as @media, @supports, and container queries instead.
What does the CSS @when proposal add?
The proposal defines @when as a conditional group rule whose body applies when a boolean condition is true. Its condition can combine media queries and feature-support tests in one expression, using media() and supports() as condition functions. The goal is to express combinations that otherwise require nested conditional rules more clearly. See the W3C CSS Conditional Rules Module Level 5 draft and the proposal text.
@when media((width > 40rem)) and supports(display: grid) {
.layout {
display: grid;
}
}This example illustrates the proposed shape only; it is not a deployable pattern in browsers that do not implement the rules.
How would @else chains work?
The proposed @else rule can take a condition just like @when, or omit it. An omitted condition is treated as always true. A chain starts with a conditional rule other than @else and may continue through consecutive @else rules; only whitespace or comments may separate the rules. Conditions are checked in order. Once a branch matches, later branches in that chain evaluate as false. An @else that is not part of such a chain is invalid and ignored.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
@when media((width > 60rem)) {
.columns { grid-template-columns: 2fr 1fr; }
} @else media((width > 35rem)) {
.columns { grid-template-columns: 1fr 1fr; }
} @else {
.columns { display: block; }
}In the proposal, this structure makes the alternatives mutually exclusive without requiring authors to manually write conditions that avoid overlap or account for every unmatched case.
Why propose a new conditional rule?
CSS already has separate conditional mechanisms, but combining them can become awkward when conditions need to be expressed together. Nesting an @media rule and an @supports rule effectively combines their conditions with an AND; expressing other combinations can require more complicated structures. The proposal aims to put that logic in a single boolean expression and make alternatives easier to scan.
Rank #2
The idea also reflects a long-standing authoring frustration. In CSSWG issue #112, Florian Rivoal described the difficulty of setting default styles, undoing them inside a media query, and then applying alternatives, noting that authors often want an if/else pattern. The issue documents historical discussion, not a guarantee that the proposed syntax will be adopted.
How does @when compare with existing CSS conditionals?
| Mechanism | Condition types | Alternatives and branching | Availability |
|---|---|---|---|
@when and @else proposal |
Designed to combine media conditions and feature-support conditions in a boolean expression. | @else chains provide ordered, mutually exclusive branches. |
Not yet supported according to MDN’s conditional rules reference. |
@media |
Tests media features and conditions, such as viewport characteristics. | Can be used in separate rules or nested with other conditional rules; it does not itself provide the proposed cross-condition branch chain. | Established CSS mechanism; see MDN’s conditional rules reference. |
@supports |
Tests whether a browser supports a CSS declaration or feature. | Can be combined through nesting, but does not provide the proposed @else chain. |
Established CSS mechanism; see MDN’s conditional rules reference. |
| Container queries | Condition styles on a container’s properties, such as its size. | Useful for component-level responsive styling; not the same general-purpose mixed-condition branch model proposed by @when. |
Current conditional CSS mechanism; see MDN’s conditional rules reference. |
Can you use @when in a website today?
No—not as a dependable production feature. The W3C document is a Working Draft, which W3C describes as work in progress and not an endorsement of the contents. MDN says @when and @else are not yet supported. Can I use’s live compatibility table reported 0% global usage and no support in the listed desktop and mobile browser versions when checked in 2026; that is a changeable snapshot, not a permanent statistic. Consult the published Working Draft, MDN, and Can I use’s compatibility table for current status.
For styles that need to work now, compose existing @media and @supports rules, and use container queries when the styling decision depends on a component’s container. Do not ship proposed @when syntax without a tested implementation in the exact browsers and versions your site supports.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
