Fallback Styling
Fallback styling ensures graceful degradation by providing alternative styles using the @supports rule when certain features aren’t supported by the browser.
Syntax
@supports not (property: value) {
/* Fallback CSS rules to apply when the property:value pair is not supported */
}
Example: Fallback for Unsupported Grid Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Feature Detection with @supports</title>
<style>
@supports not (display: grid) {
.fallback-container {
float: left;
width: 50%;
}
.fallback-item {
width: calc(50% - 5px);
margin-right: 10px;
}
.fallback-item:nth-child(2n) {
margin-right: 0;
}
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h2 {
margin-top: 0;
}
.box {
background-color: #27b74a;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Fallback Styling</h2>
<div class="box">
<h3>Example: Fallback for Unsupported Grid Layout</h3>
<div class="fallback-container">
<div class="fallback-item">Item 1</div>
<div class="fallback-item">Item 2</div>
<div class="fallback-item">Item 3</div>
<div class="fallback-item">Item 4</div>
</div>
</div>
</body>
</html>
Output:
Feature Detection using @supports in CSS
Building web interfaces that are both visually appealing and accessible across various browsers and devices can be challenging. One key aspect of creating robust web designs is feature detection.
CSS provides a powerful tool for feature detection through the @supports rule.
Table of Content
- Basic Feature Detection
- Complex Feature Detection
- Fallback Styling