Stay Ahead with the Power of Upskilling - Invest in Yourself! 
The @supports at-rule allows you to conditionally apply CSS rules based on whether the browser supports specific CSS features. This is particularly useful for creating responsive designs that gracefully degrade on older browsers.
Basic Syntax
CSS
@supports (feature: value) {
/* Styles to apply if the feature is supported */
}
Example: Using CSS Grid
CSS
@supports (display: grid) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
In this example, the grid layout will only be applied if the browser supports the display: grid property. If not, the browser will fallback to the default layout.
Additional Features
- Multiple conditions: You can combine multiple conditions using logical operators (and, or, not).
- Feature queries: You can query specific CSS features, such as flexbox or calc().
Example:
CSS
@supports (display: flex) and (calc(100vw – 20px) > 0) {
/* Styles to apply if Flexbox is supported and the viewport width is greater than 20px */
}
Best Practices
- Test thoroughly: Test your website on different browsers and devices to ensure that the fallback styles are working as expected.
- Use progressive enhancement: Start with a basic layout that works on all browsers and gradually add more features using @supports for browsers that support them.
- Consider feature detection: In addition to @supports, you can use JavaScript feature detection to check for browser support and apply appropriate styles.
The @supports at-rule is a powerful tool for creating responsive web designs that gracefully degrade on older browsers. By using @supports, you can leverage modern CSS features while ensuring that your website remains accessible to a wider audience.
