“In that case, the browser will use whatever value it has for that property. If it can’t find any other value set for that property, it will revert to the default value, which is typically not ideal.”
I assumed because the browser (Chrome) cannot find the colour specified by the variable, it will revert to background: red. However, it does not. It shows nothing.
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36
Challenge: Improve Compatibility with Browser Fallbacks
You are misunderstanding what the fallback is intended to do. If you are using a browser supports CSS variables, then it will still attempt to show what you specify (the red-wrong). The fallback value (placed before the use of the CSS variable for the background color), will only show if the browser did not support the CSS variable. Fallback values are to make your CSS cross-platform accessible. If a feature is not present in a browser, the fallback value gets used.