Feature Queries

In the fast-moving world of web development, new CSS features are released constantly. However, not every user's browser is updated at the same time. Feature Queries, using the @supports rule, allow you to ask the browser a question: "Do you understand this specific CSS property and value?"

If the answer is "Yes," the browser applies the CSS inside the block. If "No," it ignores it. This concept is known as Progressive Enhancement—providing a basic experience for everyone while adding "bells and whistles" for those with modern browsers.

1. Basic Syntax and Usage

The syntax for a feature query is very similar to a Media Query. You wrap your conditional styles in an @supports block followed by the property-value pair you want to test.

Code Block Loading...

2. Logical Operators: and, or, and not

Feature queries become powerful when you combine multiple checks using logical operators.

  • and: Applies styles only if both features are supported.
  • or: Applies styles if at least one feature is supported.
  • not: Applies styles only if a feature is not supported.

Code Block Loading...

3. Checking for Modern Visual Effects

A common use case for @supports is checking for high-end visual properties like backdrop-filter (glassmorphism) or sticky positioning, which might behave inconsistently across older browsers.

Code Block Loading...

Key Takeaways

  • Safety First: Feature queries allow you to use cutting-edge CSS without breaking your layout for users on older browsers.
  • The Fallback Pattern: Always write your "fallback" (standard) CSS first, then wrap your "enhanced" CSS inside the @supports block.
  • Logical Precision: Use not to target older browsers specifically, or and to ensure a suite of modern tools (like Grid + Variable support) are available before executing a complex layout.
  • Browser Support: Ironically, @supports itself is very well supported (over 98% of browsers), making it a reliable tool for detection.