当前位置: 首页 > 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 复合属性使用场景复合属性示例注意 文本缩进属性…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...