渐进增强和优雅降级之间有什么不同？

最新推荐文章于 2024-08-09 21:04:47 发布

大德大威顾神

最新推荐文章于 2024-08-09 21:04:47 发布

阅读量596

点赞数

本文链接：https://blog.csdn.net/q759859479/article/details/80597822

版权

渐进增强和优雅降级之间有什么不同？

1.背景介绍

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以产生了的一种解决方式在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。

先看一个例子：

transition { /*渐进增强写法*/

-webkit-transition: all .5s; /*Safari and Chrome*/

-moz-transition: all .5s;/*Firefox*/

-o-transition: all .5s;/*Opera*/

transition: all .5s;

}

transition { /*优雅降级写法*/

transition: all .5s;

-o-transition: all .5s;/*Opera*/

-moz-transition: all .5s;/*Firefox*/

-webkit-transition: all .5s;/*Safari and Chrome*/

}

2.知识剖析

2.1什么是渐进增强和优雅降级

渐进增强（progressive enhancement）

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）

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

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，对版本较高的浏览器追加不同的功能

3.常见问题

在网页布局中如何选择？

4.解决方案

如果软件开发的预算和时间充足，就不存在抉择的问题，可以两者都调整到一个最佳状态，而不用权衡，做选择题了。然而现实很残酷，要么开发周期短，要么开发预算少，或者二者兼而有之，这个时候该如何抉择？

分析使用你客户端程序的版本比例。

如果低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。。

大多数公司是怎么处理这个问题的：

绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。

5.编码实战

   < 
  body> 
 
   < 
  div></ 
  div> 
 
   < 
  p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</ 
  p> 
 
   < 
  p>< 
  b>注释：</ 
  b>本例在 Internet Explorer 中无效。</ 
  p> 
 
   < 
  input 
  type= 
  "text" 
  class= 
  "text"> 
 
   </ 
  body>

 
  div { 
 
  width: 
  100 
  px; 
 
  height: 
  100 
  px; 
 
  background: 
  blue; 
 
  /* transition: width 2s; */ 
 
  -webkit-transition: 
  width 2 
  s; 
 
  /* Safari and Chrome */ 
 
   } 
 
  div 
  :hover { 
 
  width: 
  300 
  px; 
 
   } 
 
  .text{ 
 
  height: 
  50 
  px; 
 
  width: 
  500 
  px; 
 
  -webkit-box-shadow: 
  0 0 30 
  px 
   2 
  px 
   #333; 
 
   }