CSS @supports: Write Future-Proof CSS

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.

Here’s what it looks like in practice:

How @supports Works

The @supports rule checks if a browser understands a CSS property-value pair. You can test for single or multiple features:

Here’s how I use @supports to progressively improve a layout:

Testing Multiple Properties

Sometimes you need to test for multiple CSS properties. Here’s how to handle complex feature detection:

Best Practices

1. Start with solid fallback styles that work everywhere
2. Use @supports to enhance the experience with modern features
3. Test features individually when possible
4. Consider using multiple @supports rules for different feature combinations
5. Keep fallback code maintainable - don’t create overly complex style overrides