title: CSS @supports vs Checking Support via JS
body: <p>While searching for a way to check CSS support in browsers I came across two different approaches: CSS and JavaScript. I have used JS before for checking feature support in browsers, but not for CSS properties. From what I can tell newer browsers have added support for CSS <code>@supports</code>, but what about the browsers that don't? </p>
  
  <p>Example of CSS <code>@supports</code>:</p>
  
  <pre><code>@supports (display: flex) {
      div { display: flex; }
  }
  </code></pre>
  
  <p>So, if older browsers don't support CSS <code>@supports</code>, would it be practical to utilize both JS and CSS approaches? Regarding my example above, would it be possible to do almost an if/else statement with it such as: </p>
  
  <pre><code>@supports (display: flex) { 
      div { display: flex; }
  } else { 
      div { display: none; }
  }
  </code></pre>
  
  <p>I understand it probably wouldn't be the key word <code>else</code>, but being able to perform something along those lines would be beneficial. So, to sum up and organize my questions:</p>
  
  <ol>
  <li>What is the best approach to checking CSS property support with <code>@supports</code> in older browsers not supporting this CSS syntax?</li>
  <li>Would it make sense or be practical to utilize both CSS and JS for this?</li>
  <li>Is there some sort of <code>if/else</code> syntax for CSS <code>@supports</code>?</li>
  </ol>