Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Feature Queries
#1
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.
Also follow me on Youtube for videos about video games:
https://www.youtube.com/channel/UCxfkGVU...2mQ/videos
Reply


Messages In This Thread
CSS Feature Queries - by Qomplainerz - 07-26-2023, 07:05 PM

Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS Grid Masonry Layout Qomplainerz 0 664 07-26-2023, 07:54 PM
Last Post: Qomplainerz
  CSS Custom Scrollbar Styles (Webkit and Firefox) Qomplainerz 0 458 07-26-2023, 07:52 PM
Last Post: Qomplainerz
  CSS Box Decoration Break Qomplainerz 0 406 07-26-2023, 07:49 PM
Last Post: Qomplainerz
  CSS Conic Gradients for Circular Progress Bar Qomplainerz 0 385 07-26-2023, 07:48 PM
Last Post: Qomplainerz
  CSS Grid Subgrid Qomplainerz 0 389 07-26-2023, 07:46 PM
Last Post: Qomplainerz
  CSS Variable Fonts Animation Qomplainerz 0 392 07-26-2023, 07:44 PM
Last Post: Qomplainerz
  CSS Scrollbar Styling Qomplainerz 0 399 07-26-2023, 07:43 PM
Last Post: Qomplainerz
  CSS Grid Auto-fit and Minmax Qomplainerz 0 375 07-26-2023, 07:41 PM
Last Post: Qomplainerz
  CSS clip path Qomplainerz 0 405 07-26-2023, 07:38 PM
Last Post: Qomplainerz
  Advanced media queries in CSS3 Qomplainerz 0 399 07-26-2023, 07:22 PM
Last Post: Qomplainerz

Forum Jump:


Users browsing this thread: 3 Guest(s)