improve compatibility with browser fallbacks - zilongxuan001/LearnFreecode GitHub Wiki

当CSS起作用时，你很可能遇到浏览器的通用性问题。这也是为什么提供浏览器的回撤机制去避免潜在问题很重要。

当你的浏览器分析页面的CSS时，你会自动忽略任何它无法识别或支持的属性。比如。如果你使用CSS变量在站点上设置背景色。IE会忽视背景色，因为IE不支持CSS变量。这时候，浏览器会使用任何它拥有的关于这个属性的值。如果它不能发现关于这个属性的其他值，它会回到默认值。

这意味着，如果你想提供一个浏览器回撤，尽可能提供一个可以被广泛支持的值。这样的话，老浏览器会有值可以回撤，新浏览器则可以使用你定义的值。

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

结果显示

Basic CSS: Improve Compatibility with Browser Fallbacks | Learn freeCodeCamp

2018-10-15 17:02:19