优雅降级与渐进增强

 

渐进增强

（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

使用场景

客户大部分都是低级浏览器

优雅降级

（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

使用场景

客户都是年轻人，用的都是新浏览器

 

前缀CSS3

（-webkit- / -moz- / -o-*）和正常CSS3在浏览器中的支持情况是这样的：

很久以前：浏览器前缀CSS3和正常CSS3都不支持；

不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；

现在：浏览器既支持前缀CSS3，又支持正常CSS3；

未来：浏览器不支持前缀CSS3，仅支持正常CSS3.

 

因为CSS的规则是写在后面的样式会覆盖写在前面的样式，所以写在后面的样式优先级更高。

.transition { /*渐进增强写法，最后的正常写法是最通用的样式，优先级最高，这样就能适应老旧的浏览器*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*优雅降级写法，最好的样式写在第一个，如果是老旧的浏览器就覆盖最好的样式*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

例子

当下，webkit核心的浏览器不仅支持border-radius属性，也支持-webkit-border-radius属性。

.not-a-square {
   // 这两个家伙干的不是同一个活 
   border-radius: 30px 10px;
   -webkit-border-radius: 30px 10px;
}

当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。

正常写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。

前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧。

实例网站

 

参考文章：

https://www.cnblogs.com/web-wjg/p/7240985.html

https://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/