Feature detection in CSS using @supports checks if a browser supports a specific feature before applying related styles. 1. It uses conditional CSS blocks based on property-value pairs, such as @supports (display: grid). 2. This method ensures future compatibility and avoids reliance on unreliable browser detection. 3. Common use cases include safely adopting new layout features, testing for specific property-value support, and providing fallback styles. 4. Complex conditions can be created with logical operators like and, or, and not. 5. However, it does not apply to JavaScript features, which require separate tools like Modernizr or the CSS.supports() method.

Feature detection in CSS using @supports is a way to check if a browser supports a specific CSS feature before applying styles that depend on it. This helps ensure your design works well across different browsers, even when some don't support newer CSS properties or values.

How Does @supports Work?

The @supports rule lets you write conditional CSS blocks. You provide a condition — usually a CSS property and value pair — and the browser applies the styles inside only if that condition is true (i.e., supported).

Here’s a basic example:

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

In this case, only browsers that support CSS Grid will apply those styles. Others will skip them entirely.

Why Use Feature Detection Instead of Browser Detection?

Trying to guess what a browser can do based on its name or version is unreliable. New versions come out all the time, and users might be running outdated or niche browsers. With @supports, you're checking for actual capability, not assumptions.

This means:

• Your code adapts better to future browsers.
• It gracefully handles older browsers without hacks.
• You avoid unnecessary polyfills or fallbacks when they’re not needed.

Common Use Cases for @supports

There are several practical ways people use @supports in real projects:

1. Using New Layout Features Safely

If you want to try something like aspect-ratio or subgrid, wrap it in @supports so older browsers don’t break.

@supports (aspect-ratio: 1/1) {
  .box {
    aspect-ratio: 16/9;
  }
}

2. Testing for Property-Value Pairs

Sometimes a browser supports a property but not a specific value. @supports can test for both.

@supports (background: linear-gradient(to right, red, blue)) {
  body {
    background: linear-gradient(to right, red, blue);
  }
}

3. Providing Fallback Styles

You can also use it to offer simpler styles when a feature isn’t available.

.container {
  display: block; /* Fallback */
}

@supports (display: grid) {
  .container {
    display: grid;
  }
}

A Few Things to Keep in Mind

• You can combine conditions with and, or, and not.
• Nesting @supports rules is possible but rarely needed.
• It doesn’t help with JavaScript features — use tools like Modernizr or native CSS.supports() in JS for that.

Here's a slightly more complex condition:

@supports (display: grid) and (not (-webkit-appearance: none)) {
  /* Only applies if grid is supported AND -webkit-appearance is NOT supported */
}

That kind of logic can be useful in edge cases, but most of the time, simple checks are enough.

基本上就這些。Using @supports is straightforward once you understand how to structure the condition. It's a powerful tool for writing modern, resilient CSS without breaking things for users on older platforms.

以上が@supportsを使用したCSSの機能検出とは何ですか？の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。