Home > Web Front-end > JS Tutorial > body text

What does progressive enhancement mean in JS?

coldplay.xixi
Release: 2020-06-30 15:25:55
Original
3347 people have browsed it

渐进增强的意思是针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

What does progressive enhancement mean in JS?

JS中渐进增强的意思是:

想了解渐进增强什么意思,也同时了解优雅降级,就一个意思,为了实现css3的特效和js之间的配合实现设计效果。不过话是这么说的 但是这个东西思路还是有些不一样。

优雅降级:在网站设计时,术语优雅降级指的是新的或者是复杂特点的明智实施,目的是确保大部分的因特网使用者可以有效的和站点上的页面交互。过去几年站点设计和因特网使用的重要的里程碑包括图片,帧,在线游戏,Java, JavaScript, ActiveX控制,浏览标签,因特网上的语音通话(VoIP)和视频会议技术的引入。

当浏览器或操作系统的更新版本发布时,它们经常包含新的特征来保持和因特网功能的最新增强的同步。

因为各种各样的原因,许多因特网使用者喜欢使用他们已有的浏览器而不是每当一个新的Web站点技术流行时,立即更新到最新版本。当一个站点被有意识设计成有优雅降级的特点时,这些使用者不会突然被强迫升级他们的浏览器除非他们正在使用“古董”。

说人话就是:优雅降级是因某些新发布的CSS样式或HTML标签在老的浏览器上不兼容,而在写代码时做的了一定的处理,确保在浏览器不兼容时,也能够达到原效果或部分原效果。

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

两种方法分别对应着不同的用户群体,优雅降级 属于大部分优质客户(身上装备很好的人),渐进增强属于大部分都是拿菜刀打怪升级的客户

下面这个是觉得非常好用的一个函数!

/**
判断浏览器是否支持某一个CSS3属性
@param {String} 属性名称
@return {Boolean} true/false
@version 1.0
@author ydr.me
2014年4月4日14:47:19
*/
function supportCss3(style) {
var prefix = [‘webkit’, ‘Moz’, ‘ms’, ‘o’],
i,
humpString = [],
htmlStyle = document.documentElement.style,
_toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
return $1.toUpperCase();
});
};
for (i in prefix)
humpString.push(_toHumb(prefix[i] + ‘-’ + style));
humpString.push(_toHumb(style));
for (i in humpString)
if (humpString[i] in htmlStyle) return true;
return false;
}
Copy after login

相关学习推荐:javascript视频教程

The above is the detailed content of What does progressive enhancement mean in JS?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
js
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template