CSS変数 - 複数のフォールバックが機能しない

Question

MDNによると、var関数は複数のフォールバックを受け入れます。しかし、私は彼らを働かせることができません。

Chrome、Firefox、Safariで次のコードを試しました。上記のすべてのブラウザで.demo3のbackground-colorは透過的です。

コードにエラーがありますか、またはブラウザが変数フォールバックを実装していないためですか？複数のフォールバックのために

:root { 
 
    --my-var: red; 
 
} 
 

 
.demo1 { 
 
    background-color: var(--my-var); 
 
} 
 

 
.demo2 { 
 
    background-color: var(--my-background, pink); 
 
} 
 

 
.demo3 { 
 
    background-color: var(--my-background, --my-var, pink); 
 
}

<div class="demo1">No fallback</div> 
 

 
<div class="demo2">Single fallback</div> 
 

 
<div class="demo3">Multiple fallbacks</div>

Answer 1

してみてください：background-color: var(--my-background, var(--my-var, pink));