Vanta Logo
SPONSOR
Automate SOC 2 & ISO 27001 compliance with Vanta. Get $1,000 off.
Up to date
Published
3 min read

Trevor I. Lasn

Staff Software Engineer, Engineering Manager

CSS @supports: Write Future-Proof CSS

Detect CSS feature support and provide smart fallbacks with @supports

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

Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.

Interested in supporting this blog in exchange for a shoutout? Get in touch.


Liked this post?

Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

Understanding Vue's Suspense

How the Suspense component manages async dependencies and improves loading states in Vue apps

Aug 23, 2024
Read article
Webdev
3 min read

Native Popover Element with HTML

Create overlays and dropdowns easily with the native HTML popover API

Jan 24, 2025
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
3 min read

HTML Details Element: The Native Accordion You're Not Using

Discover how the HTML details element can replace your JavaScript accordions and why it might be better than your current solution

Dec 10, 2024
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
3 min read

CSS Supports Nesting Now

CSS nesting is finally supported in all major browsers. Write cleaner, organized stylesheets without Sass or Less

Dec 6, 2024
Read article
Webdev
3 min read

CVE-2025-29927 - Next.js Middleware Bypass Explained In Simple Terms

The vulnerability skips Next.js middleware security checks by adding a single HTTP header

Apr 6, 2025
Read article
Webdev
3 min read

The HTML Native Search Element

The search HTML element is a container that represents the parts of the web page with search functionality

Dec 2, 2024
Read article
Webdev
4 min read

HTTP CONNECT: Building Secure Tunnels Through Proxies

Understand how HTTP CONNECT enables HTTPS traffic through proxies

Nov 28, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/detect-css-features-with-supports-property. It was written by a human and polished using grammar tools for clarity.