Quickly Testing CSS Fallbacks

A handy CSS testing trick!

Browser compatibility isn't always guaranteed. Let's say you need a fallback for browsers lacking CSS Grid support (less common now, but useful for illustration).

You can use @supports blocks:

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

To quickly test the fallback, temporarily modify @supports (display: grid) to something invalid, like @supports (display: gridx). This provides a simple on/off switch for testing.

The above example lacks robust fallbacks. A better approach might involve Flexbox (for browsers supporting Flexbox but not Grid). Alternatively, a simpler column-based fallback could ensure reasonable presentation.

If you're confident the browser supports @supports queries (a bit ironic, I know!), you can use this:

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

@supports not (display: grid) {
  /* basic fallback spacing */
  .block { margin: 10px }
}

This assumption becomes increasingly valid as older browsers are phased out (especially if you've dropped IE support).

This highlights the desirability of an @when syntax:

@when supports(display: grid) {
  /* grid styles */
} @else {
  /* fallback styles */
}

This cleaner syntax would greatly improve readability and maintainability.

The above is the detailed content of Quickly Testing CSS Fallbacks. For more information, please follow other related articles on the PHP Chinese website!