07-26-2023, 07:05 PM
Example:
<!DOCTYPE html>
<html>
<head>
<title>Feature Queries Example</title>
<style>
/* Apply different styles based on feature support */
p {
color: blue;
}
@supports (background: linear-gradient(to right, lightblue, lightgreen)) {
p {
background-image: linear-gradient(to right, lightblue, lightgreen);
color: white;
}
}
</style>
</head>
<body>
<p>This is a paragraph with blue text color.</p>
</body>
</html>
Explanation:
CSS Feature Queries (@supports) allow you to apply styles based on whether a particular CSS feature is supported by the browser. In this example, we initially set the text color of the p element to blue. If the browser supports the background: linear-gradient property, the @supports rule applies, and the p element will have a gradient background and white text color.
<!DOCTYPE html>
<html>
<head>
<title>Feature Queries Example</title>
<style>
/* Apply different styles based on feature support */
p {
color: blue;
}
@supports (background: linear-gradient(to right, lightblue, lightgreen)) {
p {
background-image: linear-gradient(to right, lightblue, lightgreen);
color: white;
}
}
</style>
</head>
<body>
<p>This is a paragraph with blue text color.</p>
</body>
</html>
Explanation:
CSS Feature Queries (@supports) allow you to apply styles based on whether a particular CSS feature is supported by the browser. In this example, we initially set the text color of the p element to blue. If the browser supports the background: linear-gradient property, the @supports rule applies, and the p element will have a gradient background and white text color.