渐进增强 VS 优雅降级
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
比如:
.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;
}
作者:康斌
链接:https://www.jianshu.com/p/d313f1108862
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
渐进增强 VS 优雅降级的更多相关文章
- 浏览器兼容CSS渐进增强 VS 优雅降级如何选择
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...
- 渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序
什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新 ...
- css3渐进增强 VS 优雅降级
印象中,渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功 ...
- 兼容性/pollyfill/shim/渐进增强/优雅降级
http://ued.ctrip.com/blog/browser-compatibility-testing-tools-in-firefox-compatibility-detector.html ...
- css考核点整理(十二)-能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗
能描述下你在项目中都用到了哪些符合逐渐增强和优雅降级的理念的技巧吗
- css优雅降级和渐进增强
今天看前端公众号发布的文章,学到了几个新词 1.modernizr 2.@support 3.优雅降级 其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到.度娘了一下,发现[优雅降级],[渐进增 ...
- 优雅降级&渐进增强
优雅降级(Graceful Degradation) 关注点:最新的浏览器上构建体验很好的WEB应用. 降级:旧版本浏览器提供差强人意的体验,不影响功能的使用. 渐进增强(Progressive En ...
- 渐进增强(progressive enhancement)、优雅降级(graceful degradation)
渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验. 优雅降级 grace ...
- CSS——优雅降级和渐进增强
什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...
随机推荐
- Openssl crl命令
一.简介 crl命令用于处里PME或DER格式的CRL文件 二.语法 openssl crl [-inform PEM|DER] [-outform PEM|DER] [-text] [-in fil ...
- funk_SVD 个人理解
目标函数: $ J = \frac{1}{2} \left\| R - PQ \right\|^{2} + \lambda \left( \left\|P \right\|^{2} +\left\| ...
- Druid详细配置信息
druid的配置项如下 配置 缺省值 说明 name 配置这个属性的意义在于,如果存在多个数据源,监控的时候 可以通过名字来区分开来.如果没有配置,将会生成一个名字, 格式是:"Data ...
- 暂停、恢复CALayer 动画
CALayer都是实现了CAMediaTiming协议(或者叫做接口).所以layer的动画有一个很有意思的属性speed.如果一个layer的动画速度变成0.0的时候,很显然这个动画就不再动了.设置 ...
- 在 Linux 系统上快速获取命令的帮助信息
几种方法: help 命令 man 命令 info 命令 命令 --help man 章节分类如下 1 - commands 2 - system calls 3 - library calls 4 ...
- 【Linux】GDB调试工具
GDB调试工具 Linux中包含一个很强大的调试工具GDB(GNU Debuger),可以用它来调试C和C++程序. 一. GDB的主要功能有: 设置断点,当程序运行到断点处暂停 显示变量的值,可以打 ...
- elasticsearch CriteriaQuery查询例子
elasticsearch CriteriaQuery java API实例应用 CriteriaQuery criteriaQuery = new CriteriaQuery(new Criteri ...
- el判断字符串是否为空
${empty 值} 返回true ,表示为空字符串; 在EL中empty对""和null的处理都返回true,而==null对""返回false,对null ...
- PyCharm创建普通项目配置支持jinja2语法
打开项目的根目录的.idea文件夹中项目名.iml文件(隐藏文件) 打开这个iml文件,在component标签的同级,添加如下代码: <component name="Templat ...
- MFC中cstring,string和char[]的相互转化
int 转 CString:CString.Format("%d",int);...............................string 转 CString CSt ...