🎉 hey, I shipped skillcraft.ai
It's like Reddit, but for tech courses. Search smarter. Read honest reviews. Get mentored. See what's worth your time. Join thousands learning together.
Up to date
Published
3 min read

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.


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

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

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

Dec 19, 2024
Read article
Webdev
7 min read

Tips for Reducing Cyclomatic Complexity

Cyclomatic complexity is like counting how many ways a car can go. More options make it harder to drive because you have to make more decisions, which can lead to confusion.

Sep 10, 2024
Read article
Webdev
3 min read

Preloading Responsive Images

How to properly preload responsive images to improve initial page load

Nov 28, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
3 min read

CSS :has() - The Parent Selector We've Always Wanted

Transform your CSS with :has(), the game-changing selector that finally lets us style elements based on their children.

Dec 4, 2024
Read article
Webdev
3 min read

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

The new pseudo-classes :user-valid and :user-invalid give us a smarter way to style form validation states based on user interaction

Dec 12, 2024
Read article
Webdev
4 min read

How To Implement Content Security Policy (CSP) Headers For Astro

Content Security Policy (CSP) acts like a shield against XSS attacks. These attacks are sneaky - they trick your browser into running malicious code by hiding it in content that seems trustworthy. CSP's job is to spot these tricks and shut them down, while also alerting you to any attempts it detects.

Oct 16, 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

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.