CSS @supports (Feature Queries)

Modern CSS features like Grid or Flexbox aren’t supported in all browsers. CSS @supports lets you check if a browser supports a feature before applying styles, ensuring layouts work everywhere. It’s a tool for progressive enhancement: new features for modern browsers, fallbacks for older ones.

Basic Syntax :

• The property-value pair is checked.
• If the browser supports it, styles inside the block are applied.
• If not, they are ignored, avoiding broken layouts.

@supports (property: value) {
  /* Styles applied only if the browser supports the property */
  .example {
    display: grid;
    gap: 1rem;
  }
}

Logical Operators

CSS @supports can combine multiple conditions using logical operators:

Operator	Example	Meaning
and	@supports (display: grid) and (gap: 1rem)	All conditions must be true.
or	@supports (display: grid) or (display: flex)	At least one condition must be true.
not	@supports not (display: grid)	The condition must be false.

Example

@supports (display: grid) and (gap: 1rem) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

Fallbacks with @supports

A common use case is providing fallback styles for browsers that don’t support certain features:

• Older browsers use flexbox.
• Modern browsers switch to grid, enhancing the layout without breaking functionality.

.container {
  display: flex; /* fallback */
}

@supports (display: grid) {
  .container {
    display: grid; /* modern browsers */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

Checking Multiple Features

You can check for multiple properties at once:

• Ensures all features are supported before applying styles.

@supports (display: grid) and (gap: 1rem) and (color: red) {
  .box {
    display: grid;
    gap: 1rem;
    color: red;
  }
}

@supports with not

The not keyword helps target browsers without support for a feature:

• Useful for older browsers without using hacks or browser-specific CSS.

@supports not (display: grid) {
  .container {
    display: flex; /* fallback for older browsers */
  }
}

Nesting @supports with Other Queries

You can combine feature queries with media queries for more precise control:

• Applies grid layout only on wide screens that support it.

@media (min-width: 768px) {
  @supports (display: grid) {
    .layout {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

Practical Examples

Example 1: CSS Grid Fallback

.container {
  display: flex; /* fallback */
  gap: 1rem;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Example 2: Feature Detection for backdrop-filter

• Adds blur only in browsers that support backdrop-filter.

.card {
  background: rgba(255, 255, 255, 0.5);
}

@supports (backdrop-filter: blur(5px)) {
  .card {
    backdrop-filter: blur(5px);
  }
}