优雅降级和渐进增强

作为一名前端开发人员,最头疼的莫过于浏览器兼容。远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与浏览器兼容顽强斗争。而渐进增强优雅降级两种不同的开发流程,也是在我们项目初期做调研选型时会考虑的一个点。

渐进增强(Progressive Enhancement)

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

优雅降级(graceful degradation)

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

初一看这两个概念有点高大上,其实作为开发人员来说,多多少少已经在项目中运用只是你自己不察觉而已。换个词汇就比较好理解了,渐进增强(向上/前兼容),优雅降级(向下兼容),向上兼容高版本浏览器,向下兼容低版本浏览器。

二者区别

渐进增强优雅降级只是看待同种事物的两种观点。渐进增强和优雅降级都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注的着重点不同,以及这种不同的关注点如何影响项目开发的流程。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 Chrome,Safari,IE、FireFox等)的前一个版本。在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。

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

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

代码案例

.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- / -moz- / -o- (浏览器前缀)
  1. 很久以前:浏览器前缀CSS3和正常CSS3都不支持;
  2. 不久之前:浏览器只支持前缀CSS3,不支持正常CSS3;
  3. 现在:浏览器既支持前缀CSS3,又支持正常CSS3;
  4. 未来:浏览器不支持前缀CSS3,仅支持正常CSS3.

渐进增强的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性。在时期3中前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3。优雅降级的写法,优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性。在时期3中前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3。

现实项目开发中,推荐使用渐进增强的写法(postcss的autofixer也是这种写法),因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样,所以最终还是得以正常CSS3为准。

可参考张鑫旭大神的文章《需警惕CSS3属性的书写顺序》。

如何选择

  • 低版本浏览器用户占比居多,优先采用渐进增强的开发流程;
  • 高版本浏览器用户占比居多,优先采用优雅降级的开发流程;

事实上绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。例如,淘宝,京东,新浪微博等网站前端的更新,不可能追求某个特效而不考虑低版本用户可不可用,一定是确保低版本到高版本的可访问性,再去渐进增强,采用新功能给高版本用户提供更好的用户体验。当然也有一些反例如阿里云,本身就是面向软件开发者,这个群体的人总是喜欢尝试新事物,总是喜欢酷炫的特效,总是喜欢把它们的软件更新到最新版本,而且大多用的是谷歌浏览器,即使用IE浏览器,也是高版本IE浏览器,面对这种情况,优雅降级的开发流程才是更好的选择。


参考文章

  1. 渐进增强、优雅降级
  2. 渐进增强 VS 优雅降级
  3. 渐进增强和优雅降级之间的有什么不同?
  4. 需警惕CSS3属性的书写顺序
  5. 优雅降级和渐进增强的区别

 

转载于:https://www.cnblogs.com/guchengnan/p/9405301.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全国计算机等级考试题库二级C操作题100套(第44套)

第44套: 函数fun的功能是进行数字字符转换。若形参ch中是数字字符’0’~’9’, 则 ‘0’转换成’9’,‘1’转换成’8’,‘2’转换成’7’,……,‘9’转换成’0’;若是其它字符则保持不变;并将转…

ASP.Net中实现中英文复合检索文本框

前段时间,写一个用户部门的管理页面,需要对后台获取的用户数据实现英汉检索功能。  同时,选定一个选项之后,需要触发事件与后台交互,将该用户所在的部门显示到页面右边的ListBox控件中。 一、Dojo的FilteringSelect组…

sklearn 安装_初识sklearn

我的主业是互联网运营,业余的python爱好者,学习python已经快两年,主攻网络爬虫与数据分析,爬虫能使用代理ip、打码平台、OCR识别、基本的js逆向处理反爬;数据分析主要使用pandas与pyecharts进行可视化,我的…

2018.08.02 hdu1558 Segment set(并查集+计算几何)

传送门 这个直接用并查集维护。 每加入一条线段就将它与其他能相交的集合合并&#xff0c;维护一个sizesize域表示每个集合的大小。 代码&#xff1a; #include<bits/stdc.h> #define eps 1e-15 using namespace std; int t,fa[1005],n,siz[1005],cnt; struct pot{dou…

全国计算机等级考试题库二级C操作题100套(第45套)

第45套&#xff1a; 函数fun的功能是&#xff1a;把形参a所指数组中的偶数按原顺序依次存放到a[0]、 a[1]、a[2]、……中&#xff0c;把奇数从数组中删除&#xff0c;偶数个数通过函数值返回。例如&#xff1a; 若a所指数组中的数据最初排列为&#xff1a;9、1、4、2、3、6、5…

java singleton inner class_关于java:Singleton设计模式实现

我看到了不同种类的singleton类实现。然而&#xff0c;这个特定的实现&#xff1a;https://sourcemaking.com/design_patterns/singleton/java/1不在私有构造函数中创建对象。有人能解释一下&#xff0c;这两种实现之间的优缺点是什么吗&#xff1f;给出的描述是最小的&#xf…

python中import os_python import osgeo.gdal出错

用anaconda安装的python和各种包&#xff0c;linux和windows下都有&#xff0c;其中前者是2.7版本&#xff0c;而后者是3.x&#xff0c;用conda install gdal安装gdal包之后&#xff0c;当运行from osgeo import gdal​时出现了各种问题。 windows下的问题​ ​ImportError Tra…

全国计算机等级考试题库二级C操作题100套(第46套)

第46套&#xff1a; 给定程序中&#xff0c;函数fun的功能是&#xff1a;利用指针数组对形参ss所指字符串数组中的字符串按由长到短的顺序排序&#xff0c;并输出排序结果。ss所指字符串数组中共有N个字符串&#xff0c;且串长小于M。 请在程序的下划线处填入正确的内容并把下…

java删除一级域名下cookie_java操作cookie示例(删除cookie)

1.设置Cookie代码如下:Cookie cookie new Cookie("key", "value");cookie.setMaxAge(60);设置60秒生存期&#xff0c;如果设置为负值的话&#xff0c;则为浏览器进程Cookie(内存中保存)&#xff0c;关闭浏览器就失效。代码如下:cookie.setPath("/tes…

[工具库]JOJSONBuilder工具类——一键把多个bean对象数据转换为JSON格式数据

本人大四即将毕业的准程序员&#xff08;JavaSE、JavaEE、android等&#xff09;一枚&#xff0c;小项目也做过一点&#xff0c;于是乎一时兴起就写了一些工具。 我会在本博客中陆续发布一些平时可能会用到的工具。 代码质量可能不是很好&#xff0c;大家多担待&#xff01; 代…

mysql long类型_怒肝两个月MySQL源码,我总结出这篇2W字的MySQL协议详解(超硬核干货)!!...

点击上方蓝色“冰河技术”&#xff0c;关注并选择“设为星标”持之以恒&#xff0c;贵在坚持&#xff0c;每天进步一点点&#xff01;作者个人研发的在高并发场景下&#xff0c;提供的简单、稳定、可扩展的延迟消息队列框架&#xff0c;具有精准的定时任务和延迟队列处理功能。…

状压dp之二之三 炮兵阵地/玉米田 By cellur925

一、简单的状压dp 玉米田 题目描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ≤ 12) square parcels. He wants to grow some yummy corn for the cows on a number of squares. Regrettably, some of the squares…

服务器php 启动命令_服务端的cli方式运行

既然是结合tp5&#xff0c;咱当然要借鉴tp5的优势# tp5自定义命令行这个需要自己看tp5的官方文档&#xff0c;直接搜索就能找到&#xff0c;自己添加command.php文件&#xff0c;我的如下~~~/*** Time: 13:55*/return [iss\crontab\command\IssServer,iss\crontab\command\IssC…

全国计算机等级考试题库二级C操作题100套(第47套)

第47套&#xff1a; 给定程序中&#xff0c;函数fun的功能是&#xff1a;找出形参s所指字符串中出现频率最高的字母&#xff08;不区分大小写&#xff09;&#xff0c;并统计出其出现的次数。 例如&#xff0c;形参s所指的字符串为&#xff1a;abcAbsmaxless&#xff0c;程序执…

android调用照相机拍照获取照片并做简单剪裁

1.调用系统的照相机程序 Intent intent new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, TAKE_PHOTO_WITH_DATA); 2.在onActivityResult中处理返回的data final Bitmap photo data.getParcelableExtra("data"); 如果不需要做剪切处…

用户id可以出现在url中吗_下载Google Drive中的文件

通过Python下载Google Drive中的文件的代码如下&#xff1a;download_googledrive.pyimport

LockSupport的源码实现原理以及应用

一、为什么使用LockSupport类 如果只是LockSupport在使用起来比Object的wait/notify简单&#xff0c; 那还真没必要专门讲解下LockSupport。最主要的是灵活性。 上边的例子代码中&#xff0c;主线程调用了Thread.sleep(1000)方法来等待线程A计算完成进入wait状态。如果去掉Thr…

php网址变量怎么输出,【PHP网站】如何使用dedecms v5.7前台模版里输出变量

dedecmsv5.7是PHP网站内容管理系统&#xff0c;本篇文章将介绍如何使用dedecmsv5.7 前台模版来输出变量&#xff0c;具有一定参考意义&#xff0c;感兴趣的朋友了解一下吧。如何在PHP文件查询出来的数据赋值给前端页面展示出来&#xff1f;例如&#xff1a;PHP文件&#xff1a;…

全国计算机等级考试题库二级C操作题100套(第48套)

第48套&#xff1a; 给定程序中&#xff0c;函数fun的功能是&#xff1a;将形参s所指字符串中的数字字符转换成对 应的数值&#xff0c;计算出这些数值的累加和作为函数值返回。 例如&#xff0c;形参s所指的字符串为&#xff1a;abs5def126jkm8&#xff0c;程序执行后的输出结…

Nginx内核参数相关的优化设定

Nginx内核参数在使用的时候有不少问题需要我们解决&#xff0c;其中在优化方面就需要我们格外的注意。在下面就是对Nginx内核参数优化的详细介绍&#xff0c;希望大家有所收获。 关于Nginx内核参数的优化&#xff1a; net.ipv4.tcp_max_tw_buckets 6000 timewait的数量&#x…