title: CSS feature detection with styled-components
body: <p>I typically use Modernizr to feature-detect for CSS features like flex-box support and fall back to older methods if unsupported:</p>
  
  <pre><code>.mz-flexbox {
    // use flex
  }
  
  .mz-noflexbox {
    // use floats
  }
  </code></pre>
  
  <p>How would one accomplish something similar with <a href="https://www.styled-components.com/" rel="nofollow noreferrer">styled-components</a> with something like <a href="https://modernizr.com/" rel="nofollow noreferrer">Modernizr</a> where classes are added to the <code>&lt;html&gt;</code> element to indicate feature support?</p>
  
  <p>My only thought at this point is importing components in my "App.js" and using <code>injectGlobal</code> to target them:</p>
  
  <pre><code>import MyComponent from './components/my-component';
  
  injectGlobal`
    .mz-flexbox {
      ${MyComponent} {
        // use flex
      }
    }
  `;
  </code></pre>
  
  <p>It appears <code>@supports</code> would be a sweet solution, but I do care about Internet Explorer, so this is not a solution for this project.</p>
  
  <p>Lastly, I'm not sure if this is a good way to do this, but would something like this work for feature detection? I'm not 100% on what gets compiled with styled-components and what can be calculated at run-time:</p>
  
  <pre><code>styled.div`
    ${window.Modernizr.flexbox &amp;&amp; css`
      display: flex;
      align-items: center;
    `}
  `;
  </code></pre>
  
  <p>Will that work for detection at run-time?</p>