CSS @when At-Rule
The proposed @when at-rule is part of an evolving CSS conditional-rule design intended to express conditions for applying style rules. It is not a broadly supported, production-ready CSS feature.
@when Syntax
/* Proposed syntax - not for production use */
@when media(width >= 700px) {
.panel {
display: grid;
}
}The example shows the rule in context. Check the support and status notes below before using this syntax.
How @when Works
The proposed @when rule was intended to organize conditional CSS branches, typically alongside @else. It is not an interoperable replacement for existing feature queries.
Proposal Status
The @when rule has appeared in CSS conditional-rules proposals, but its syntax and adoption should not be treated as stable. Browsers may ignore an unrecognized @when block entirely.
Use @media for environment queries, @supports for feature detection, and @container for container conditions in production stylesheets.
Intended Use
The proposal aims to express conditional styling using a readable condition structure. The example illustrates the idea rather than a guaranteed implementation.
Use Supported Alternatives
For production CSS, use @media for viewport and media conditions, @supports for feature queries, and @container for container-based conditions. These have established syntax and browser implementations.
@media (min-width: 700px) {
.panel {
display: grid;
}
}Progressive Enhancement
Do not rely on @when for essential styles. Write the base layout using supported CSS and treat any future conditional syntax as optional enhancement until its specification and implementation mature.
@when Example
The example above illustrates a proposed conditional syntax only. It is not a reliable working browser demonstration. Use the supported @media alternative shown earlier for production.
/* Proposed syntax - not for production use */
@when media(width >= 700px) {
.panel {
display: grid;
}
}Browser Support
The proposed @when rule is not Baseline and should not be relied upon for production styling. See Can I Use? and search for the relevant feature.
Because the proposal is not reliably implemented, browsers may ignore the entire @when block. Present its syntax as experimental rather than as a working example.
Specifications
The proposed rule has been discussed in CSS Conditional Rules work. Its syntax and status can change. Consult the current CSS Conditional Rules drafts rather than assuming this example is standardized.