渐进增强和优雅降级区别

文章目录


前言

渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等,不支持css3,但是css3的样式又特别优秀,所以在高级浏览器中应用css3样式,在低版本中保持基本功能。

渐进增强和优雅降级也是一种程序开发思想,比如在vue源码中,数据更新和渲染就有运用优雅降级这一思想。

一、渐进增强

主要是针对低版本浏览器进行页面重构,保证功能的情况下,再针对高级浏览器进行效果、交互等方面的改进和追加功能。以达到更好的用户体验。

1、对于HTML而言,这意味着浏览器在遇到未知元素或属性时并不会报错,而且也不会对页面产生影响。比如电子邮件表单标记:

html 复制代码
<input type='text' id='field-email' name = 'field-email'>

需要使用新input元素,应该把type改成这样:

html 复制代码
<input type='email' id='field-email' name = 'field-email'>

尚未实现email类型的浏览器会回退到默认的text类型。实现了email类型的就会对email进行校验等。这样我们既渐进增强了这个页面,也不会对旧版本浏览器产生不好的影响。

2、css中渐进增强同样也反映在浏览器如何对待新属性上。例如:

css 复制代码
.overlay {
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
}

不支持rgba的浏览器,相应元素背景色是黑色;支持rgba的则会覆盖第一行的样式,展示rgba中配置的透明色。

3、浏览器厂商也基于相同原理为自家浏览器引入实验性特性。

css 复制代码
.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

非自家浏览器前缀则会忽略该特性。

4、条件规则和检测脚本。

如果希望根据浏览器是否支持某个css特性来提供完全不同的样式,那么可以选择@supports块。这个特殊代码块称为条件规则,它会检测括号中的声明,并且只在浏览器支持该声明的情况下,才会应用块中的规则。

css 复制代码
@supports(display: grid) {
	/* 在支持网格布局的浏览器中要应用的规则 */
}

二、优雅降级

一开始就构建完整的功能,再针对低版本的浏览器进行兼容。

css 复制代码
.transition { /*优雅降级写法*/
	border-radius:30px 10px;
	-moz-border-radius:30px 10px;	
	-webkit-border-radius:30px 10px;
}

比起渐进增强,这个写法理论上是一样的。但是如果浏览器同时支持前缀写法和正常写法,后面的旧版浏览器就股改了新版样式,可能会出现奇怪问题代码演示

参考链接:渐进增强和优雅降级之间有什么不同?

为了避免不必要的问题,建议使用渐进增强。

三、两者区别

  • 优雅降级是从复杂现状开始的,并视图减少用户体验的共给;而渐进增强是从一个非常基础的,能用起作用的版本开始的,并在此基础上不断扩充,以适应未来环境的需要。

  • 降级(功能衰竭)意味着往回看,而渐进增强意味着往前看,同时保证其根基处于安全地带。

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

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


四、渐进增强和优雅降级如何抉择

一般选渐进增强。

如果受众年龄覆盖面广,客户端从移动、平板到电脑,比如淘宝,选渐进增强。

如果单一,比如一个移动端页面,渐进增强也没有太大意义。

相关推荐
1024小神9 分钟前
next项目使用状态管理zustand说明
前端
Asort9 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我11 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse13 分钟前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a14 分钟前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang20 分钟前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清24 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手28 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku29 分钟前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦34 分钟前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack