什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?

渐进增强 progressive enhancement:

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

类似 爬山,由低出往高处爬

优雅降级 graceful degradation:

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

类似蹦极,由高处往低处下落

区别:渐进增强是向上兼容,优雅降级是向下兼容。

建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器,转而支持 edge这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。

CSS——优雅降级和渐进增强的更多相关文章

  1. css优雅降级和渐进增强

    今天看前端公众号发布的文章,学到了几个新词 1.modernizr 2.@support 3.优雅降级 其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到.度娘了一下,发现[优雅降级],[渐进增 ...

  2. css可应用的渐进增强新特性

    1. 让有滚动行为的元素平滑滚动  scroll-behavior: smooth; <div class="smooth"> </dvi> .smooth ...

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

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

  4. 渐进增强与优雅降级 && css3中普通属性和前缀属性的书写顺序

     什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新 ...

  5. 优雅降级&渐进增强

    优雅降级(Graceful Degradation) 关注点:最新的浏览器上构建体验很好的WEB应用. 降级:旧版本浏览器提供差强人意的体验,不影响功能的使用. 渐进增强(Progressive En ...

  6. BFC与优雅降级 渐进增强——学习笔记

    BFC(块级格式化上下文) BFC(Block formatting context) 直译为"块级格式化上下文". 元素的显示模式 我们前面讲过 元素的显示模式 display. ...

  7. css3渐进增强 VS 优雅降级

    印象中,渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功 ...

  8. 渐进增强 VS 优雅降级

    渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果.交互.追加功能达到更好的体验. 优雅降级(Gracefu ...

  9. 渐进增强(progressive enhancement)、优雅降级(graceful degradation)

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

随机推荐

  1. Android网络(3):HttpClient作client,Tomcat Servlet作server的交互演示样例

    前面相继介绍了Android网络编程里的Socket传输图片.HttpURLConnection,今天看HttpClient. 第一部分:JavaEE版的Eclipse配置Tomcat [备注:开发后 ...

  2. nuxt 项目启动报错(HTMLElement is not define nuxt.js)

    这两天研究服务端渲染,折腾nuxt,搞得真是心累. 各种报错,nuxt 真是坑多啊,且来说说遇到哪些问题, 1. 搭建nuxt , npx create-nuxt-app <项目名> cd ...

  3. Windows性能监控perfmon工具的使用和性能指标的分析

    Windows性能监控工具perfmon的使用和性能指标分析 一.perfmon提供图表化的实时的性能监视器.性能日志.警报管理,能监控CPU的使用率.内存使用率.磁盘I/O(磁盘的读写速度).网络I ...

  4. css 折角效果/切角效果

    首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...

  5. 标准 IO 测试 标准输出,输入,出错缓冲大小;全缓冲文本流大小

    例子:测试缓冲区大小 #include <stdio.h> int main(int argc, const char *argv[]) { //标准输入大小,没有输入内容时,标准输入缓冲 ...

  6. mongo 分片集群的搭建

    MongoDB版本当前使用的MongoDB版本为4.2.0,下载地址.https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2. ...

  7. [转载]python异常如何全面捕获

    写在前面:最近写python程序,进场遇到异常的问题,因此需要捕获异常.查阅了下资料,整理如下: 常见的异常处理的方法: 假设有下面的一段程序: try:     语句1     语句2     . ...

  8. leetcode-159周赛-5233-规划兼职工作*

    方法: class Solution: def jobScheduling(self, startTime: List[int], endTime: List[int], profit: List[i ...

  9. thinkphp 静态缓存

    要使用静态缓存功能,需要开启HTML_CACHE_ON参数,并且使用HTML_CACHE_RULES配置参数设置静态缓存规则文件 . 大理石构件厂家 虽然也可以在应用配置文件中定义静态缓存规则,但是建 ...

  10. usb基础知识以及枚举过程介绍

    一个USB设备有一个设备描述符,设备描述符里面决定了该设备有多少种配置,每种配置描述符对应着配置描述符:而在配置描述符中又定义了该配置里面有多少个接口,每个接口有对应的接口描述符:在接口描述符里面又定 ...