title: Edge browser ignores CSS variable
body: <p>As you can see in this example: <a href="https://jsfiddle.net/50mqy8p1/1/" rel="nofollow noreferrer">https://jsfiddle.net/50mqy8p1/1/</a>
  Microsoft Edge ignores <code>display: var(--display-var, block)</code> after a <code>display: none;</code> so the div is not visible. Other browsers show this correct (IE11 works based on the fallback above the var-usage).</p>
  
  <p>Is there any mistake in my code? Or do you know a workaround? Google did not help me here.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Edge Demo&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
        }
        .foo {
          --display-var: flex;
          background: #369;
          height: 100%;
          align-items: center;
          justify-content: center;
        }
        .make-invisible { display: none; }
        .make-visible {
          display: block;
          display: var(--display-var, block);
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="foo make-invisible make-visible"&gt;I am here!&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see below, it also happens if you use only one class and a media query</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Edge Demo&lt;/title&gt;
      &lt;style&gt;
        .foo {
          --display-var: flex;
          display: none;
        }
  
        @media (min-width: 320px) {
          .foo {
            display: block;
            display: var(--display-var, block);
          }
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="foo"&gt;I am here!&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What is our use-case, that let us run in this problem: 
  We have a CMS where a content editor can choose when something should be visible or invisible.
  Then we generate generic visibility/invisibility classes and a generic corresponding small CSS snippet that handles the visibility.
  But sometimes you don't want an element to be 'block', but for example 'flex'. With this CSS-Vars trick, the design can decide what it wants the element to be as soon as it becomes visible without doing anything else.</p>