CSS · Feature Detection

CSS Feature Queries

Detect and use CSS features with @supports for progressive enhancement

Find videos you like?

Save to resource drawer for future reference!

What are Feature Queries?

🔍 Check if a browser supports a CSS feature before applying styles!

🎯 @supports Syntax

@supports (property: value) {

/* Enhanced styles */

.element {

property: value;

}

Progressive Enhancement

Provide fallbacks for older browsers, enhanced experience for modern ones

Conditional Styling

Apply styles only when specific features are supported

No JavaScript Needed

Pure CSS solution for feature detection

🔗 Logical Operators

@supports (prop1: val) and (prop2: val)

Both conditions must be true

@supports (prop1: val) or (prop2: val)

At least one condition must be true

@supports not (prop: val)

Condition must be false

🔍

Feature Queries

Check Feature Support

Conditional Styles

Progressive Enhancement

Graceful Fallbacks

💡

Browser Support

@supports works in all modern browsers (96%+ coverage)

Feature Query Examples

See how @supports enables progressive enhancement

Grid Support

CSS Variables

Sticky Position

Backdrop Filter

@supports (display: grid)

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Queries - Grid</title>
  </head>
  <body>
    <div class="container">
      <h1>📐 @supports (display: grid)</h1>
      <p class="subtitle">Enhanced layout for Grid-supporting browsers</p>
      <div class="layout">
        <div class="layout-item">
          <div class="item-title">✨ Grid Supported!</div>
          <p class="item-desc">This spans 2 columns</p>
          <span class="support-badge">Enhanced Layout</span>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 2</div>
          <p class="item-desc">Standard grid item</p>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 3</div>
          <p class="item-desc">Standard grid item</p>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 4</div>
          <p class="item-desc">Standard grid item</p>
        </div>
      </div>
      <div class="code-example">
        <div style="color: #94a3b8; margin-bottom: 10px;">/* Feature Query Syntax */</div>
        <div><span class="highlight">@supports</span> (display: grid) {</div>
        <div style="margin-left: 20px;">.layout {</div>
        <div style="margin-left: 40px;">display: grid;</div>
        <div style="margin-left: 40px;">grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));</div>
        <div style="margin-left: 20px;">}</div>
        <div>}</div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Common Use Cases

🎨 Modern Layout Features

Check for Grid, Flexbox, Subgrid support before using advanced layouts

✨ Visual Effects

Test for backdrop-filter, clip-path, CSS filters before applying effects

🎯 CSS Variables

Detect custom property support for dynamic theming

📱 Position Sticky

Check for sticky positioning before creating fixed navigation

Best Practices

Start with fallbacks - Write CSS that works everywhere first
Progressive enhancement - Add enhanced features with @supports
Test carefully - Ensure fallback styles look good too
Combine logically - Use and/or/not to check multiple features
Keep it simple - Don't over-complicate with too many queries

Browser Support

✅ Excellent Support: Chrome 28+, Firefox 22+, Safari 9+, Edge 12+

📊 Coverage: Over 96% of all browsers support @supports

⚠️ Fallback: Older browsers simply ignore @supports blocks

🔍 Test Tool: Use CSS.supports() in JavaScript to detect support

Previous Topic

Cross-Browser CSS

Browser compatibility, vendor prefixes, feature detection, and progressive enhancement.

Next Topic

Autoprefixer

Automatic vendor prefixing, browserlist configuration, and compatibility management.

Ask a Question

Have a question about Feature Queries? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Feature Detection

CSS Feature Queries

Detect and use CSS features with @supports for progressive enhancement

Find videos you like?

Save to resource drawer for future reference!

What are Feature Queries?

🔍 Check if a browser supports a CSS feature before applying styles!

🎯 @supports Syntax

@supports (property: value) {

/* Enhanced styles */

.element {

property: value;

}

Progressive Enhancement

Provide fallbacks for older browsers, enhanced experience for modern ones

Conditional Styling

Apply styles only when specific features are supported

No JavaScript Needed

Pure CSS solution for feature detection

🔗 Logical Operators

@supports (prop1: val) and (prop2: val)

Both conditions must be true

@supports (prop1: val) or (prop2: val)

At least one condition must be true

@supports not (prop: val)

Condition must be false

🔍

Feature Queries

Check Feature Support

Conditional Styles

Progressive Enhancement

Graceful Fallbacks

💡

Browser Support

@supports works in all modern browsers (96%+ coverage)

Feature Query Examples

See how @supports enables progressive enhancement

Grid Support

CSS Variables

Sticky Position

Backdrop Filter

@supports (display: grid)

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Queries - Grid</title>
  </head>
  <body>
    <div class="container">
      <h1>📐 @supports (display: grid)</h1>
      <p class="subtitle">Enhanced layout for Grid-supporting browsers</p>
      <div class="layout">
        <div class="layout-item">
          <div class="item-title">✨ Grid Supported!</div>
          <p class="item-desc">This spans 2 columns</p>
          <span class="support-badge">Enhanced Layout</span>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 2</div>
          <p class="item-desc">Standard grid item</p>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 3</div>
          <p class="item-desc">Standard grid item</p>
        </div>
        <div class="layout-item">
          <div class="item-title">Item 4</div>
          <p class="item-desc">Standard grid item</p>
        </div>
      </div>
      <div class="code-example">
        <div style="color: #94a3b8; margin-bottom: 10px;">/* Feature Query Syntax */</div>
        <div><span class="highlight">@supports</span> (display: grid) {</div>
        <div style="margin-left: 20px;">.layout {</div>
        <div style="margin-left: 40px;">display: grid;</div>
        <div style="margin-left: 40px;">grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));</div>
        <div style="margin-left: 20px;">}</div>
        <div>}</div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Common Use Cases

🎨 Modern Layout Features

Check for Grid, Flexbox, Subgrid support before using advanced layouts

✨ Visual Effects

Test for backdrop-filter, clip-path, CSS filters before applying effects

🎯 CSS Variables

Detect custom property support for dynamic theming

📱 Position Sticky

Check for sticky positioning before creating fixed navigation

Best Practices

Start with fallbacks - Write CSS that works everywhere first
Progressive enhancement - Add enhanced features with @supports
Test carefully - Ensure fallback styles look good too
Combine logically - Use and/or/not to check multiple features
Keep it simple - Don't over-complicate with too many queries

Browser Support

✅ Excellent Support: Chrome 28+, Firefox 22+, Safari 9+, Edge 12+

📊 Coverage: Over 96% of all browsers support @supports

⚠️ Fallback: Older browsers simply ignore @supports blocks

🔍 Test Tool: Use CSS.supports() in JavaScript to detect support

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Cross-Browser CSS

Autoprefixer

Building Your Learning Module...

CSS Feature Queries

🎯 @supports Syntax

🔗 Logical Operators

@supports (display: grid)

🎨 Modern Layout Features

✨ Visual Effects

🎯 CSS Variables

📱 Position Sticky

Best Practices

Browser Support

Cross-Browser CSS

Autoprefixer

CSS Feature Queries

🎯 @supports Syntax

🔗 Logical Operators

@supports (display: grid)

🎨 Modern Layout Features

✨ Visual Effects

🎯 CSS Variables

📱 Position Sticky

Best Practices

Browser Support