美文网首页
2017-08-28读书笔记(优雅降级和渐进增强)

2017-08-28读书笔记(优雅降级和渐进增强)

作者: shaocx | 来源:发表于2017-08-28 22:45 被阅读0次

    在看各种文章的时候两个词汇优雅降级和渐进增强。然后我就搜了一下,看了一下具体的含义。

    参考的是这个 stackoverflow-What is the difference between Progressive Enhancement and Graceful Degradation?

    这两个词语分别代表了两种书写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私有属性开始,到最后的支持现在几乎所有主流浏览器的无私有属性写法,代表了浏览器的一点点的适配更多写法的渐进写法。后面那种相反,是从最新的浏览器写法在向下优雅降级。

    但是什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?

    渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

    看着这两点似乎也没什么大的区别,感觉看上去也就是写无关紧要的区别,但是实际上,这是两种思维逻辑、是根本上面产生的不同。

    优雅降级的观点是应该针对那些最高级、功能最全的浏览器来设计网站。其他的都只是在这个基础上考虑的一些补充和适配而已。

    在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

    而渐进增强的观点则认为应更多的关注在内容本身。

    内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

    这是两者产生差异的根本,但是其实两者的差异也并没有这么大,毕竟大多数这种代码都是一致的,只不过是代码规范上的不同。到底要选择哪一种就看各自的喜好了。

    相关文章

      网友评论

          本文标题:2017-08-28读书笔记(优雅降级和渐进增强)

          本文链接:https://www.haomeiwen.com/subject/ljcndxtx.html