泉州做网站开发公司,国外网站怎么浏览,建站平台一键申请三方支付通道,网站托管服务适合文章目录 前言一、渐进增强二、优雅降级三、两者区别四、渐进增强和优雅降级如何抉择 前言
渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等#xff0c;不支持css3#xff0c;但是css3的样式又特别优秀#xff0c;所以在高级浏览器中应用css3样式#xff0c;在低… 文章目录 前言一、渐进增强二、优雅降级三、两者区别四、渐进增强和优雅降级如何抉择 前言
渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等不支持css3但是css3的样式又特别优秀所以在高级浏览器中应用css3样式在低版本中保持基本功能。
渐进增强和优雅降级也是一种程序开发思想比如在vue源码中数据更新和渲染就有运用优雅降级这一思想。
一、渐进增强
主要是针对低版本浏览器进行页面重构保证功能的情况下再针对高级浏览器进行效果、交互等方面的改进和追加功能。以达到更好的用户体验。
1、对于HTML而言这意味着浏览器在遇到未知元素或属性时并不会报错而且也不会对页面产生影响。比如电子邮件表单标记
input typetext idfield-email name field-email需要使用新input元素应该把type改成这样
input typeemail idfield-email name field-email尚未实现email类型的浏览器会回退到默认的text类型。实现了email类型的就会对email进行校验等。这样我们既渐进增强了这个页面也不会对旧版本浏览器产生不好的影响。
2、css中渐进增强同样也反映在浏览器如何对待新属性上。例如
.overlay {background-color: #000;background-color: rgba(0,0,0,0.8);
}不支持rgba的浏览器相应元素背景色是黑色支持rgba的则会覆盖第一行的样式展示rgba中配置的透明色。
3、浏览器厂商也基于相同原理为自家浏览器引入实验性特性。
.transition { /*渐进增强写法*/-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;
}非自家浏览器前缀则会忽略该特性。
4、条件规则和检测脚本。 如果希望根据浏览器是否支持某个css特性来提供完全不同的样式那么可以选择supports块。这个特殊代码块称为条件规则它会检测括号中的声明并且只在浏览器支持该声明的情况下才会应用块中的规则。
supports(display: grid) {/* 在支持网格布局的浏览器中要应用的规则 */
}二、优雅降级
一开始就构建完整的功能再针对低版本的浏览器进行兼容。
.transition { /*优雅降级写法*/border-radius:30px 10px;-moz-border-radius:30px 10px; -webkit-border-radius:30px 10px;
}比起渐进增强这个写法理论上是一样的。但是如果浏览器同时支持前缀写法和正常写法后面的旧版浏览器就股改了新版样式可能会出现奇怪问题代码演示。 参考链接渐进增强和优雅降级之间有什么不同?
为了避免不必要的问题建议使用渐进增强。
三、两者区别 优雅降级是从复杂现状开始的并视图减少用户体验的共给而渐进增强是从一个非常基础的能用起作用的版本开始的并在此基础上不断扩充以适应未来环境的需要。 降级功能衰竭意味着往回看而渐进增强意味着往前看同时保证其根基处于安全地带。
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后切断并把测试对象限定为主流浏览器如IE、Mozilla等的前一个版本。在这种设计范例下旧版的浏览器被认为仅能提供“简陋却无妨”的浏览体验。可以做一些小得调整来适应某个特定的浏览器。。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因有的网站展示它有的则收集它有的寻求有的操作还有的网站甚至会包含以上的种种但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。 四、渐进增强和优雅降级如何抉择
一般选渐进增强。 如果受众年龄覆盖面广客户端从移动、平板到电脑比如淘宝选渐进增强。 如果单一比如一个移动端页面渐进增强也没有太大意义。
