浏览器兼容CSS渐进增强 VS 优雅降级如何选择

由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以导致了工作流程上的不同。

百科解释:

渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本,向上兼容的很少。大多数软件都是向下兼容的,比如说Office2010能打开Office2007,Office2006,Office2005,Office2003等建的word文件,但是用Office2003就不能打开用Office2007,Office2010等建的word文件!
渐进增强和优雅降级的区别:
优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处,以及这种关注如何影响工作的流程。
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
渐进增强观点则认为应关注于内容本身。请注意其中的差别:我甚至连“浏览器”三个字都没提。内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。
通过案例分析:
看如下这两段代码的书写顺序,表示了我们开发的着重点。
.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;
}
前缀CSS3(-webkit-* / -moz-* / -o-*)和正常CSS3在浏览器中的支持情况是这样的:
  1. 很久以前:浏览器前缀CSS3和正常CSS3都不支持;
  2. 不久之前:浏览器只支持前缀CSS3,不支持正常CSS3;
  3. 现在:浏览器既支持前缀CSS3,又支持正常CSS3;
  4. 未来:浏览器不支持前缀CSS3,仅支持正常CSS3.
渐进增强的写法,优先考虑老版本浏览器的可用性,最后才考虑新版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,正常CSS3会覆盖前缀CSS3。优雅降级的写法,优先考虑新版本浏览器的可用性,最后才考虑老版本的可用性。在时期3前缀CSS3和正常CSS3都可用的情况下,前缀CSS3会覆盖正常的CSS3。
就CSS3这种例子而言,我更加推崇渐进增强的写法。因为前缀CSS3的某些属性在浏览器中的实现效果有可能与正常的CSS3实现效果不太一样,所以最终还是得以正常CSS3为准。如果你好奇究竟是什么属性在前缀CSS3和正常CSS3中显式效果不一样,可以看看这篇文章《需警惕CSS3属性的书写顺序》。

如何抉择


如果软件开发的预算和时间充足,就不存在抉择的问题。然而现实很残酷,要么开发周期短,要么开发预算少,或者二者兼而有之,这个时候该如何抉择?就我个人而言,讲讲我的观点。
根据你的用户所使用的客户端的版本来做决定。请注意我的措辞,我没有用浏览器,而是用客户端。因为渐进增强和优雅降级的概念本质上是软件开发过程中低版本软件与高版本软件面对新功能的兼容抉择问题。服务端程序很少存在这种问题,因为开发者可以控制服务端运行程序的版本,就无所谓渐进增强和优雅降级的问题。但是客户端程序则不是开发者所能控制的(你总不能强制用户去升级它们的浏览器吧)。我们所谓的客户端,可以指浏览器,移动终端设备(如:手机,平板电脑,智能手表等)以及它们对应的应用程序(浏览器对应的是网站,移动终端设备对应的是相应的APP)。
现在有很成熟的技术,能够让你分析使用你客户端程序的版本比例。如果低版本用户居多,当然优先采用渐进增强的开发流程;如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。
然而事实情况是怎么样的呢?绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。例如:新浪微博网站前端的更新,拥有这种亿级用户的网站,绝对不可能追求某个特效而不考虑低版本用户可不可用,一定是确保低版本到高版本的可访问性,再去渐进增强,采用新功能给高版本用户提供更好的用户体验。但也不是没有反例。如果你开发的是一款面向青少年的软件(或网站),你知道这个群体的人总是喜欢尝试新事物,总是喜欢酷炫的特效,总是喜欢把它们的软件更新到最新版本(而不像我们老一辈的用户)。面对这种情况,渐进增强的开发流程实为上选。

转载于:https://www.cnblogs.com/chaojiaheng/p/8564801.html

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

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

相关文章

2018年,牛客网小白月赛5

第一次啊,补题,希望大佬批评。 题目按我补题顺序来的。 https://www.nowcoder.com/acm/contest/135#question H 题 最大公倍数 题意:给出两个数,求最大公倍数 欧几里德算法算出最大公约数k; 然后算出。最大公倍数即可 代码如下: …

爬虫笔记(十二)——浏览器伪装技术

为什么要进行浏览器伪装技术? 有一些网站为了避免爬虫的恶意访问,会设置一些反爬虫机制,对方服务器会对爬虫进行屏蔽。常见的饭爬虫机制主要有下面几个: 1. 通过分析用户请求的Headers信息进行反爬虫 2. 通过检测用户行为进行反…

《活出生命的意义》:人生有何意义?

在你一生的阅读体验中,如果能够有一本书,它的某个章节、某种思想、或者某句话能够触动你的内心,解决你的困惑,甚至能改变你的命运,那这样的一本书你一定要视如珍宝,经常翻阅,维克多弗兰克尔的《…

右键添加git-bash

主要: 右键如果没有git-bash,如何给右键手动添加 前面对右键存在git-bash但使用出现问题的解决,也想到如果右键都没有,该如何给右键添加了,于是接着记录下如何添加的过程: 情形: 手动给右键添加…

Weblogic的缓存

2019独角兽企业重金招聘Python工程师标准>>> 最近遇到一个关于weblogic缓存的问题。再把war包放入到weblogic指定目录启动以后,访问页面信息没有更新。最后发现是\weblogic\user_projects\domains\base_domain\servers\AdminServer下的文件没有清除&…

725. 分隔链表

725. 分隔链表 给你一个头结点为 head 的单链表和一个整数 k ,请你设计一个算法将链表分隔为 k 个连续的部分。 每部分的长度应该尽可能的相等:任意两部分的长度差距不能超过 1 。这可能会导致有些部分为 null 。 这 k 个部分应该按照在链表中出现的顺…

LAMP介绍-MySQL安装

2019独角兽企业重金招聘Python工程师标准>>> LAMP: linux-apache-mysql-php (安装方式有:rpm,源码,二进制免编译) linux-操作系统 apache-web服务软件(httpd) mysql-存储数据库 php…

java1

不知道为啥粘贴的图片是一堆编码。。。。 如何插入图片 博客后后台MarkDown编辑器上只有一个按钮,就是用来上传图片并自动插入MarkDown标记的,超级好用 (一)学习总结 1.在java中通过Scanner类完成控制台的输入,查阅JDK…

430. 扁平化多级双向链表

430. 扁平化多级双向链表 多级双向链表中,除了指向下一个节点和前一个节点指针之外,它还有一个子链表指针,可能指向单独的双向链表。这些子列表也可能会有一个或多个自己的子项,依此类推,生成多级数据结构&#xff0c…

标记偏见_分析师的偏见

标记偏见“Beware of the HiPPO in the room” — The risks and dangers of top-down, intuition-based decision making are well known in the business world. Experimentation and data-based decision making become widely acknowledged as the right way to steer a bu…

用户体验数据分析 书单_如何使用数据改善用户体验设计

用户体验数据分析 书单In the current age of technology, if an entrepreneur comes up with a grand idea, chances are they’ll need a pretty sweet website to go along with it. And if they want their idea to really sell, they will also need a website that reall…

推荐11个实用的JavaScript库

2019独角兽企业重金招聘Python工程师标准>>> JavaScript 仍然是 2018 年最受欢迎和使用最为广泛的编程语言,因此 JavaScript 生态系统也会继续发展壮大。 然而,JavaScript 的标准库仍然继续保持“短小精悍”的身材。为了填补标准库功能方面的…

371. 两整数之和

371. 两整数之和 给你两个整数 a 和 b ,不使用 运算符 和 - ​​​​​​​,计算并返回两整数之和。 示例 1: 输入:a 1, b 2 输出:3 示例 2: 输入:a 2, b 3 输出:5 提示&a…

【福利】微信小程序精选Demo合集

小编最近在开发小程序,也读到了不少优秀的小程序源码,项目中有些需求可以直接从源码里粘贴复制过来,虽然这样做不利于自己独立编写代码,但比较是给公司做项目啊,秉着效率第一的原则,简直没有什么比ctrlc,ct…

为什么选择做班级管理系统_为什么即使在平衡的班级下准确性也很麻烦

为什么选择做班级管理系统Accuracy is a go-to metric because it’s highly interpretable and low-cost to evaluate. For this reason, accuracy — perhaps the most simple of machine learning metrics — is (rightfully) commonplace. However, it’s also true that m…

网站漏洞检测针对区块链网站安全分析

2019独角兽企业重金招聘Python工程师标准>>> 目前移动互联网中,区块链的网站越来越多,在区块链安全上,很多都存在着网站漏洞,区块链的充值,会员账号的存储性XSS窃取漏洞,账号安全,等…

223. 矩形面积

223. 矩形面积 给你 二维 平面上两个 由直线构成的 矩形,请你计算并返回两个矩形覆盖的总面积。 每个矩形由其 左下 顶点和 右上 顶点坐标表示: 第一个矩形由其左下顶点 (ax1, ay1) 和右上顶点 (ax2, ay2) 定义。 第二个矩形由其左下顶点 (bx1, by1) …

微观计量经济学_微观经济学与数据科学

微观计量经济学什么是经济学和微观经济学? (What are Economics and Microeconomics?) Economics is a social science concerned with the production, distribution, and consumption of goods and services. It studies how individuals, businesses, governmen…

Python基础综合练习

Pycharm开发环境设置与熟悉。 练习基本输入输出&#xff1a; print(你好,{}..format(name)) print(sys.argv) 库的使用方法&#xff1a; import ... from ... import ... 条件语句&#xff1a; if (abs(pos()))<1: break 循环语句&#xff1a; for i in range(5): while Tru…

安装mariadb、安装Apache

2019独角兽企业重金招聘Python工程师标准>>> 安装mariadb 安装mariadb的步骤与安装mysql的一样 下载二进制源码包 再用tar 解压&#xff0c;创建/data/mariadb目录和用户 初始化 编译启动脚本 启动 安装Apache Apache是软件基金会的名字&#xff0c;软件的名字叫htt…