CSS 渐进增强与优雅降级

你可能听过优雅降级（graceful degradation）和渐进增强（progressive enhancement）这两个词，它们是构建Web应用时，处理多浏览器支持的两种方法论，并在Web社区中引发过激烈的辩论。

持优雅降级观点者认为，应该针对最高级、最完善的浏览器来设计网站。然后，再为那些被认为过时或有功能缺失的浏览器提供候选方案，使之基本可用，但不至于完全失效。这样一来，新特性在老浏览器中会降级，且一般会有一个分界点，声明不支持哪些老浏览器。有时候会警告使用老浏览器的用户，建议更换，如“您的浏览器已经老掉牙了，建议使用现代浏览器！”。

与优雅降级正好相反，持渐进增强观点者则认为，应该关注于内容本身。首先，保证最核心的功能，让任何低端的浏览器都能看到网站的内容。然后，再通过CSS或Javascript来进行效果、交互等改进，为更先进的浏览器提供渐进式增强，带来更好的用户体验。

其实，渐进式增强并不是一种技术，而是一种开发方式，是一种Web设计的新理念。过去，人们往往习惯性的认为，要让网站在所有浏览器下表现一致。这种出发点本身并没有什么问题，但会让高级浏览器的优势完全丧失，无法充分显示出来。

目前，人们普遍认为渐进式增强是一种更为合理的设计理念，也慢慢被越来越多的设计师所接受，并为之付诸行动。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

CSS 渐进增强与优雅降级相关推荐

浏览器兼容CSS渐进增强 VS 优雅降级如何选择
由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...
自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡 transition 7.理论知识 ...
渐进增强和优雅降级之间的区别？
一省:HTML 16. 渐进增强和优雅降级之间的区别? 1. 渐进增强: 一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果.交互.追加功能达到更好的体验. 2. 优雅 ...
杂谈：渐进增强与优雅降级
作为一名前端开发人员,最头疼的莫过于浏览器兼容.远古时期万恶的IE6,到现在CSS3不兼容的IE7/8.为了保证不同版本浏览器都有共同或更优化的用户体验,前端搬砖的我们不得不与浏览器兼容顽强斗争.而渐 ...
渐进增强和优雅降级有什么区别
渐进增强: 针对低版本的浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果.交互等改进和追加功能达到更好的用户体验优雅降级:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容 ...
前端学习（239）:渐进增强和优雅降级
2021/1/3-每日三题第10弹：雨停了天晴了，你又觉得你行了？你知道渐进增强和优雅降级之间有什么不同吗？？？
前言: "朋友们好啊,我是xxxxxx掌门人xx,今天有朋友给我发来几张截图,我一看,嗷,原来是元旦假期要结束了,我大意了啊,没有闪,~~~,我劝,这位朋友,耗子尾汁,好好反思,武林要讲武德 ...
好程序员web前端学习路线分享css3中的渐进增强和降级
好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...
《图解CSS3：核心技术与案例实战》——1.3节渐进增强
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第1章,第1.3节渐进增强,作者大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 1.3 渐进 ...

CSS 渐进增强与优雅降级

CSS 渐进增强与优雅降级相关推荐

最新文章

热门文章