+- QP School (https://qomplainerzschool.lima-city.de)
+-- Forum: Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=3)
+--- Forum: CSS3 Tutorials (https://qomplainerzschool.lima-city.de/forumdisplay.php?fid=5)
+--- Thread: CSS Feature Queries (/showthread.php?tid=5171)
CSS Feature Queries - Qomplainerz - 07-26-2023
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.