Quickly Testing CSS Fallbacks

Quick Toggle Trick for Testing CSS Fallbacks

When a browser lacks support for a modern CSS feature like Grid, you might rely on an @supports rule to deliver a fallback. That block would look like:

@supports (display: grid) {
  .blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));
    gap: 1rem;
  }
}

To see how the fallback renders, a rapid workaround is to break the query on purpose—simply add an "x" to display: grid, turning it into display: gridx. That instantly flips the browser into the fallback path.

A more structured approach: wrap the fallback styles in their own @supports condition with the grid check negated, using not:

@supports (display: grid) {
  /* grid stuff */
}

@supports not (display: grid) {
  /* at least space them out a bit */
  .block { margin: 10px }
}

This presumes the browser understands @supports in the first place—an increasingly valid assumption, especially if you no longer support IE. Flexbox could serve as the fallback for those few older browsers, though a simple column layout would rarely hurt.

That kind of logic makes the proposed CSS @when syntax awfully appealing, since it would let you write the whole thing in one cleaner statement:

@when supports(display: grid) {

} @else {

}

Which reads so fresh and so clean.