Complex Feature Detection
Complex feature detection allows for more sophisticated checks by using logical operators (and, or, not) within the @supports query. This approach is useful for scenarios where feature support is more nuanced or involves multiple properties.
Syntax:
@supports (property1: value1) and (property2: value2) {
/* CSS rules to apply when property1:value1 and property2:value2 are supported */
}
Example: Creating 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 (display: grid) and (grid-template-columns: 1fr 1fr) {
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
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>Complex Feature Detection</h2>
<div class="box">
<h3>Example: Creating Grid Layout</h3>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-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