Basic Feature Detection
Basic feature detection involves using the @supports rule to check whether a specific CSS property or value is supported by the browser. This approach is ideal for applying styles that rely on fundamental CSS features.
Syntax:
@supports (property: value) {
/* CSS rules to apply when the property:value pair is supported */
}
Example: Centering Content with Flexbox
<!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: flex) {
.flex-container {
display: flex;
justify-content: center;
}
}
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>Basic Feature Detection</h2>
<div class="box">
<h3>Example: Centering Content with Flexbox</h3>
<div class="flex-container">
<p>This box is centered using Flexbox.</p>
</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