title: Nesting CSS @supports and @media queries
body: <p>I have been trying to figure out whether it's possible to nest CSS feature queries (also known as “CSS <code>@supports</code>”) and regular media queries, and what would be the correct way to do it.</p>
  
  <p><strong>Example A</strong> shows the <em>feature query</em> inside the <em>media query.</em><br>
  <strong>Example B</strong> shows the <em>media query</em> inside the <em>feature query.</em></p>
  
  <p>Is it even possible to nest them at all? If so, is there a preferred nesting style? A or B?</p>
  
  <pre><code>.foo {
      background: red;
  }
  
  /* EXAMPLE A */
  @media (min-width: 50em) {
      .foo {
          background: green;
      }
  
      @supports (flex-wrap: wrap) {
          .foo {
              background: blue;
          }
      }
  }
  
  /* EXAMPLE B */
  @supports (flex-wrap: wrap) {
      .foo {
          background: green;
      }
  
      @media (min-width: 50em) {
          .foo {
              background: blue;
          }
      }
  }
  </code></pre>