title: CSS custom properties as fallback value of another one instead of fixed (predefined) value
body: <p>CSS Custom Properties allows fallback values in case of missing variable so, for example:</p>
  
  <pre><code>:root {
    --color1:red;
    --color2:blue;
  }
  
  body {
    background:var(--color1,gray);
    color:var(--foo,yellow);
  }
  </code></pre>
  
  <p>will result in a <code>BODY</code> with <em>red</em> background color (because <code>--color1</code> does exist), but with yellow color for text because <code>--foo</code> custom properties does not exist.</p>
  
  <p>It seems not possible to use a CSS custom properties also for the fallback value, so this code:</p>
  
  <pre><code>body {
    background:var(--color1,gray);
    color:var(--foo,--color2);
  }
  </code></pre>
  
  <p>will not result in a <em>blue</em> text, but it will be used default browser color, tipically black one.</p>
  
  <p>Why this behaviour? </p>