I use @supports constantly to check if browsers can handle modern CSS features. Think of it as a safety net for your styles - if a browser doesn’t support a feature, you can provide a solid fallback.
@supports
Baseline Widely available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Baseline Widely available
Supported in Chrome: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
Supported in Edge: yes.
Supported in Firefox: yes.
Supported in Safari: yes.
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015
Here’s what it looks like in practice:
/* Fallback for all browsers */.card { display: block; margin: 1rem;}
/* Only applied if grid is supported */@supports (display: grid) { .card { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }}How @supports Works
The @supports rule checks if a browser understands a CSS property-value pair. You can test for single or multiple features:
/* Single feature check */@supports (display: flex) { /* Flex styles here */}
/* Multiple features using and */@supports (display: flex) and (gap: 1rem) { /* Styles that need both flex and gap */}
/* Alternative features using or */@supports (display: flex) or (display: grid) { /* Styles for either flex or grid */}
/* Checking for lack of support using not */@supports not (display: grid) { /* Fallback styles for browsers without grid */}Here’s how I use @supports to progressively improve a layout:
.layout { /* Base styles using flexbox */ display: flex; flex-wrap: wrap; margin: -0.5rem;}
.layout > * { flex: 1 1 300px; margin: 0.5rem;}
/* Enhance with grid and gap if supported */@supports (display: grid) and (gap: 1rem) { .layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin: 0; }
.layout > * { margin: 0; }}Testing Multiple Properties
Sometimes you need to test for multiple CSS properties. Here’s how to handle complex feature detection:
@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .glass-effect { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.5); }}Best Practices
- Start with solid fallback styles that work everywhere
- Use
@supportsto enhance the experience with modern features - Test features individually when possible
- Consider using multiple
@supportsrules for different feature combinations - Keep fallback code maintainable - don’t create overly complex style overrides