[help] Improve Compatibility with Browser Fallbacks

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: var(--red-color, red);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks

2

You will have to put the fallback on its own line. Some browsers won’t “understand” var(…) css variables at all so that entire line will simply be ignored.

Put the standard property:value fallback on a line - all browsers will understand that line
Put the line using the css variable on the next line - older browsers will ignore this line, modern browsers will override the previous line with this property:value.

color: blue; /* all browsers will parse this line - the fallback */
color: var(--my-custom-blue);  /* modern browsers will parse this line, overriding previous line*/
1 Like