Table of Contents
How Does @supports Work?
Why Use Feature Detection Instead of Browser Detection?
Common Use Cases for @supports
1. Using New Layout Features Safely
2. Testing for Property-Value Pairs
3. Providing Fallback Styles
A Few Things to Keep in Mind
Home Web Front-end CSS Tutorial What is feature detection in CSS using @supports?

What is feature detection in CSS using @supports?

Jul 02, 2025 am 01:14 AM
css

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.

What is feature detection in CSS using @supports?

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.

The above is the detailed content of What is feature detection in CSS using @supports?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Integrating CSS and JavaScript effectively with HTML5 structure. Integrating CSS and JavaScript effectively with HTML5 structure. Jul 12, 2025 am 03:01 AM

HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.

How to create responsive images using CSS? How to create responsive images using CSS? Jul 15, 2025 am 01:10 AM

To create responsive images using CSS, it can be mainly achieved through the following methods: 1. Use max-width:100% and height:auto to allow the image to adapt to the container width while maintaining the proportion; 2. Use HTML's srcset and sizes attributes to intelligently load the image sources adapted to different screens; 3. Use object-fit and object-position to control image cropping and focus display. Together, these methods ensure that the images are presented clearly and beautifully on different devices.

Describe the `:has()` pseudo-class (Parent selector) Describe the `:has()` pseudo-class (Parent selector) Jul 15, 2025 am 12:32 AM

The:has()pseudo-classinCSSallowstargetingaparentelementbasedonitschildelements.Itworksbyusingthesyntaxparent:has(child-selector)toapplystylesconditionally.Forexample,div:has(img)appliesstylestoadivcontaininganimage.Multipleselectorscanbeusedwithcomma

Describe the `opacity` property Describe the `opacity` property Jul 15, 2025 am 01:23 AM

opacity is an attribute in CSS that controls the overall transparency of an element, with values ranging from 0 (fully transparent) to 1 (fully opaque). 1. It is often used for the image hover fade effect, and enhances the interactive experience by setting the opacity transition; 2. Making a background mask layer to improve text readability; 3. Visual feedback of control buttons or icons in the disabled state. Note that it affects all child elements, unlike rgba, which only affects the specified color part. Smooth animation can be achieved with transition, but frequent use may affect performance. It is recommended to use it in combination with will-change or transform. Rational application of opacity can enhance page hierarchy and interactivity, but it should avoid interfering with users.

Explain property inheritance in CSS Explain property inheritance in CSS Jul 15, 2025 am 01:25 AM

InCSS,propertyinheritanceaffectshowstylesarepassedfromparentelementstochildren.Somepropertieslikecolorandfont-familyinheritbydefault,applyingtoallnestedelementsunlessoverridden.Non-inheritedpropertiessuchasborder,margin,andpaddingmustbesetexplicitly.

How to style selection highlighting (`::selection`)? How to style selection highlighting (`::selection`)? Jul 16, 2025 am 12:50 AM

Use the ::selection pseudo-element of CSS to customize the highlighting style when the web page text is selected to improve the aesthetics and unity of the page. 1. Basic settings: define background-color and color through ::selection, such as yellow background with dark gray fonts; specific elements such as p::selection can also be limited. 2. Compatibility processing: Add the -webkit- prefix to be compatible with Safari and mobile browsers, and the Firefox and Edge standards are well supported. 3. Pay attention to readability: Avoid excessive color contrast or too fancy, and should be coordinated with the overall design. For example, choose a soft blue base in dark mode to improve visual comfort. Reasonable use can enhance the texture of the interface, ignore details

Describe the `word-break` and `word-wrap` properties Describe the `word-break` and `word-wrap` properties Jul 16, 2025 am 02:08 AM

Word-break and overflow-wrap (formerly word-wrap) do differently when dealing with long words or unbreakable content. 1. Word-break controls how to break lines of words in block elements, break-all forces long words to break, keep-all avoids breaking, suitable for Chinese, Japanese and Korean texts. 2. Overflow-wrap disconnects long words when necessary to prevent overflow, break-word makes the context more intelligent. 3. In usage scenarios, use word-break:break-all for code, and use overflow-wrap:break-word for user comments. 4. Pay attention to differences in browser compatibility and different mobile behaviors

Describe the `list-style` property Describe the `list-style` property Jul 15, 2025 am 12:06 AM

list-style is abbreviation attribute in CSS for controlling the pre-marking style of list items. 1. You can set the list-style-type, list-style-position and list-style-image at the same time; 2. By default, unordered lists use disc styles, and ordered lists use numeric numbers; 3. Support setting types, positions and pictures, and specify backup styles to deal with image loading failures; 4. In actual development, the default styles are often cleared to ensure consistency, and pay attention to text indentation and image loading issues.

See all articles