资讯专栏INFORMATION COLUMN

渐进增强与优雅降级

Drinkey / 1241人阅读

摘要:代码展示渐进增强优雅降级带前缀的个满足了大部分浏览器,而不带前缀的只有最新的一部分浏览器才支持。如何选择渐进增强观点认为应关注于内容本身。优雅降级观点则认为应该针对那些最高级最完善的浏览器来设计网站。

1.代码展示
    /*渐进增强*/
    .div1 {
        -webkit-transition: all 2s; //Safari Chrome
           -moz-transition: all 2s; //Firefox
             -o-transition: all 2s; //Opera
                transition: all 2s; 
    }
    /*优雅降级*/
    .div1 {
                transition: all 2s; 
             -o-transition: all 2s; //Opera
           -moz-transition: all 2s; //Firefox
        -webkit-transition: all 2s; //Safari Chrome
    }

带CSS3前缀的3个满足了大部分浏览器,而不带前缀的只有最新的一部分浏览器才支持。

渐进增强(progressive enhancement):从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能,当浏览器支持时,它们会自动地呈现出来并发挥作用。

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

2.如何选择

“渐进增强”观点认为应关注于内容本身。内容是建立网站的诱因,我们应该在满足向绝大部分用户呈现有用内容的前提下,再做渲染内容或更高级功能的事情。
“优雅降级”观点则认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段。
因此:决定采用哪种方式取决于网站所面向的主要用户群体(或者说主要兼容的浏览器)。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82251.html

相关文章

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

    摘要:而渐进增强和优雅降级两种不同的开发流程,也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员,最头疼的莫过于浏览器兼容。远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与...

    hiyang 评论0 收藏0
  • 杂谈:渐进增强优雅降级

    摘要:而渐进增强和优雅降级两种不同的开发流程,也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员,最头疼的莫过于浏览器兼容。远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与...

    王军 评论0 收藏0
  • 杂谈:渐进增强优雅降级

    摘要:而渐进增强和优雅降级两种不同的开发流程,也是在我们项目初期做调研选型时会考虑的一个点。二者区别渐进增强和优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。 作为一名前端开发人员,最头疼的莫过于浏览器兼容。远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与...

    SimonMa 评论0 收藏0
  • 前端面试题-渐进增强优雅降级

    摘要:一背景介绍渐进增强和优雅降级这两个概念是在出现之后火起来的。二概念理解渐进增强渐进增强一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果交互追加功能达到更好的体验。 一、背景介绍 渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器...

    HollisChuang 评论0 收藏0
  • 渐进增强优雅降级

    摘要:代码展示渐进增强优雅降级带前缀的个满足了大部分浏览器,而不带前缀的只有最新的一部分浏览器才支持。如何选择渐进增强观点认为应关注于内容本身。优雅降级观点则认为应该针对那些最高级最完善的浏览器来设计网站。 1.代码展示 /*渐进增强*/ .div1 { -webkit-transition: all 2s; //Safari Chrome ...

    only_do 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<