通过浏览器降级提高兼容性

Posted 慕斯-ing

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过浏览器降级提高兼容性相关的知识,希望对你有一定的参考价值。

通过浏览器降级提高兼容性

使用 CSS 时可能会遇到浏览器兼容性问题。
所以提供浏览器降级方案来避免潜在的问题就显得很重要。
当浏览器解析页面的 CSS 时,会自动忽视不能识别或者不支持的属性。

例如:如果使用 CSS 变量来指定站点的背景色, IE 浏览器由于不支持 CSS 变量会忽视背景色。
因此,浏览器会使用其它值。如果没有找到其它值,会使用默认值,也就是没有背景色。
这意味着如果想提供浏览器降级方案,在声明之前提供另一个更宽泛的值即可。
这样老旧的浏览器会降级使用这个方案,新的浏览器会在后面的声明里覆盖降级方案。

已经使用了变量做为 .red-box class 的设置背景色。
通过在存在的声明前添加其它的值为 red 的 background 声明来提高浏览器的兼容性。

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

以上是关于通过浏览器降级提高兼容性的主要内容,如果未能解决你的问题,请参考以下文章

HTML5和CSS3工具资源汇总

CSS属性选择器温故-4

关于通过addClass与removeClass用jquery控制有良好兼容的CSS3样式

CSS3 和 HTML5 兼容的浏览器

杂谈:渐进增强与优雅降级

2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼转