当前位置: 首页 > news >正文

渐进增强和优雅降级区别

文章目录

  • 前言
  • 一、渐进增强
  • 二、优雅降级
  • 三、两者区别
  • 四、渐进增强和优雅降级如何抉择


前言

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

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

一、渐进增强

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

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

<input type='text' id='field-email' name = 'field-email'>

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

<input type='email' id='field-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)”策略的原因所在。


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

一般选渐进增强。
如果受众年龄覆盖面广,客户端从移动、平板到电脑,比如淘宝,选渐进增强。
如果单一,比如一个移动端页面,渐进增强也没有太大意义。

相关文章:

渐进增强和优雅降级区别

文章目录 前言一、渐进增强二、优雅降级三、两者区别四、渐进增强和优雅降级如何抉择 前言 渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等&#xff0c;不支持css3&#xff0c;但是css3的样式又特别优秀&#xff0c;所以在高级浏览器中应用css3样式&#xff0c;在低…...

使用provision创建的arxml文件,导入到第三方工具需要注意哪些方面?

provision是一款基于AP AUTOSAR的ARXML设计工具&#xff0c;可以帮助您快速创建和配置ARXML文件。 如果您想要将provision创建的ARXML文件导入到第三方工具中&#xff0c;您需要注意以下几个方面&#xff1a; 您需要确认第三方工具支持的AP AUTOSAR版本和provision生成的ARXML…...

Node.js的核心模块——path

文章目录 path是什么&#xff1f;path怎么用&#xff1f;结论 path是什么&#xff1f; path是Node.js的核心模块&#xff0c;专门用来处理文件路径&#xff0c;path模块为处理文件路径提供了一系列实用的功能和API。 path怎么用&#xff1f; 这里主要介绍一些path模块的常见…...

【MAC】 M2 brew安装 docker 运行失败 解决

MAC 安装 brew install --cask docker 之后一直显示docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?. 网上看了一些文章 发现 这个不适用于M2 所以要从官网上下载 docker 安装成功...

iPhone苹果手机触屏失灵无法关机,如何强制重启

参考:https://zhuanlan.zhihu.com/p/615223121 1&#xff0c;只轻按一下音量上键后快速松开 2&#xff0c;只轻按一下音量下键后快速松开 3&#xff0c;只按住右侧电源键长按不松手&#xff0c;直到手机关机。...

SQL-每日一题【1484. 按日期分组销售产品】

题目 表 Activities&#xff1a; 编写解决方案找出每个日期、销售的不同产品的数量及其名称。 每个日期的销售产品名称应按词典序排列。 返回按 sell_date 排序的结果表。 结果表结果格式如下例所示。 示例 1: 解题思路 前置知识 group_concat函数的功能   将group by产生的…...

java重写与重载的区别

在Java中&#xff0c;重写&#xff08;Override&#xff09;和重载&#xff08;Overload&#xff09;是两种不同的概念&#xff1a; 重写&#xff08;Override&#xff09;&#xff1a; 重写是指子类重新定义&#xff08;覆盖&#xff09;了从父类继承而来的方法。重写要求子类…...

Unity 框架学习--1

由浅入深&#xff0c;慢慢演化实现框架 两个类的实现代码完全一样&#xff0c;就只有类名或类型不一样的时候&#xff0c;而且还需要不断扩展&#xff08;未来会增加各种事件&#xff09;的时候&#xff0c;这时候就用 泛型 继承 来提取&#xff0c;继承解决扩展的问题&#…...

ERROR: While executing gem ... (Gem::FilePermissionError)

sudo gem install -n /usr/local/bin cocoapodsERROR: While executing gem ... (Gem::FilePermissionError)You dont have write permissions for the /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/gems/2.6.0 directory.解决办法&#xff1a; 1.删…...

QT学习笔记-oracle oci数据库驱动交叉编译并移植到ARM开发板

QT学习笔记-oracle oci数据库驱动交叉编译并移植到RK3568ARM开发板 0、背景1、搭建交叉编译环境2、交叉编译过程3、把数据库驱动部署到目标系统中 0、背景 在上一文《QT学习笔记-QT安装oracle oci驱动》中介绍了在Windows环境下使用QT访问oracle数据库时遇到驱动无法加载问题的…...

微服务03-RabbitMQ

1、简介 MQ,中文是消息中间件(队列)(MessageQueue),字面来看就是存放消息的队列。也就是事件驱动架构中的Broker。 简单来说,消息中间件就是指保存数据的一个容器(服务器),可以用于两个系统之间的数据传递。 几种常见MQ的对比: RabbitMQActiveMQRocketMQKafka公司…...

QtCreator ui设置界面 Layout 的属性 layoutStretch

layoutStretch 用于控制Layout在被用户进行缩放时。里面控件的缩放比例。如一个水平布局里面有两个控件 一个 QLineEdit 和 QPushButton。首先将两个控件的尺寸策列的水平策略都设置为Expanding。此时在将包含这两个控件的水平布局的 layoutStretch 进行如下设置。 运行程序就…...

APP外包开发的iOS开发语言

学习iOS开发需要掌握Swift编程语言和相关的开发工具、框架和技术。而学习iOS开发需要时间和耐心&#xff0c;尤其是对于初学者。通过坚持不懈的努力&#xff0c;您可以逐步掌握iOS开发技能&#xff0c;构建出功能丰富、优质的移动应用。今天和大家分享学习iOS开发的一些建议方法…...

sentinel客户端和dashboard交互

回顾 在前面的章节中&#xff1a;通过阐述sentinel简单使用、滑动窗口、核心流程源码分析把sentinel限流、熔断等主要功能说明清楚了&#xff0c;但我们在实际使用的过程中&#xff0c;不可能通过硬编码的方式设置规则&#xff0c;且规则也没法直观的维护&#xff0c;为此肯定…...

vue或uniapp使用pdf.js预览

一、先下载稳定版的pdf.js&#xff0c;可以去官网下载 官网下载地址 或 pdf.js包下载(已配置好&#xff0c;无需修改) 二、下载好的pdf.js文件放在public下静态文件里&#xff0c; uniapp是放在 static下静态文件里 三、使用方式 1. vue项目 注意路径 :src"static/pd…...

virtualBox桥接模式下openEuler镜像修改IP地址、openEule修改IP地址、openEule设置IP地址

安装好openEuler后,设置远程登入前,必不可少的一步,主机与虚拟机之间的通信要解决,下面给出详细步骤: 第一步:检查虚拟机适配器模式:桥接模式 第二步:登入虚拟机修改IP cd /etc/sysconfig/network-scripts vim ifcfg-enpgs3 没有vim的安装或者用vi代替:sudo dnf …...

git unable to get local issuer certificate (_ssl.c:1007)>

原因1&#xff1a;Git无法验证SSL证书 这个错误通常是由于Git无法验证SSL证书导致的。您可以尝试以下方法解决此问题&#xff1a; 确认您的计算机上是否安装了正确的SSL证书。如果没有&#xff0c;请下载并安装它们。您可以使用以下命令在Mac上安装SSL证书&#xff1a; brew…...

QT之时钟

QT之时钟 会用到一个时间类:qtime 定时类:qtimer #------------------------------------------------- # # Project created by QtCreator 2023-08-13T10:49:31 # #-------------------------------------------------QT += core guigreaterThan(QT_MAJOR_VERSION,…...

机器学习基础(四)

KNN算法 KNN:K-Nearest Neighbor,最近领规则分类。 为了判断位置实例的类别,以所有已知类别的实例作为参照选择参数K。计算未知实例与所有已知实例的距离。(一般采用欧氏距离)选择最近K个已知实例。根据少数服从多数的投票法则,让未知实例归类为K个最近邻样本中最多数的类…...

HTML详解连载(5)

HTML详解连载&#xff08;5&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽行高&#xff1a;设置多行文本的间距属性名属性值行高的测量方法 行高-垂直居中技巧 字体族属性名属性值示例扩展 font 复合属性使用场景复合属性示例注意 文本缩进属性…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...