渐进增强和优雅降级区别
文章目录
- 前言
- 一、渐进增强
- 二、优雅降级
- 三、两者区别
- 四、渐进增强和优雅降级如何抉择
前言
渐进增强和优雅降级是在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等,不支持css3,但是css3的样式又特别优秀,所以在高级浏览器中应用css3样式,在低…...
使用provision创建的arxml文件,导入到第三方工具需要注意哪些方面?
provision是一款基于AP AUTOSAR的ARXML设计工具,可以帮助您快速创建和配置ARXML文件。 如果您想要将provision创建的ARXML文件导入到第三方工具中,您需要注意以下几个方面: 您需要确认第三方工具支持的AP AUTOSAR版本和provision生成的ARXML…...
Node.js的核心模块——path
文章目录 path是什么?path怎么用?结论 path是什么? path是Node.js的核心模块,专门用来处理文件路径,path模块为处理文件路径提供了一系列实用的功能和API。 path怎么用? 这里主要介绍一些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,只轻按一下音量上键后快速松开 2,只轻按一下音量下键后快速松开 3,只按住右侧电源键长按不松手,直到手机关机。...
SQL-每日一题【1484. 按日期分组销售产品】
题目 表 Activities: 编写解决方案找出每个日期、销售的不同产品的数量及其名称。 每个日期的销售产品名称应按词典序排列。 返回按 sell_date 排序的结果表。 结果表结果格式如下例所示。 示例 1: 解题思路 前置知识 group_concat函数的功能 将group by产生的…...
java重写与重载的区别
在Java中,重写(Override)和重载(Overload)是两种不同的概念: 重写(Override): 重写是指子类重新定义(覆盖)了从父类继承而来的方法。重写要求子类…...
Unity 框架学习--1
由浅入深,慢慢演化实现框架 两个类的实现代码完全一样,就只有类名或类型不一样的时候,而且还需要不断扩展(未来会增加各种事件)的时候,这时候就用 泛型 继承 来提取,继承解决扩展的问题&#…...
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.解决办法: 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开发需要时间和耐心,尤其是对于初学者。通过坚持不懈的努力,您可以逐步掌握iOS开发技能,构建出功能丰富、优质的移动应用。今天和大家分享学习iOS开发的一些建议方法…...
sentinel客户端和dashboard交互
回顾 在前面的章节中:通过阐述sentinel简单使用、滑动窗口、核心流程源码分析把sentinel限流、熔断等主要功能说明清楚了,但我们在实际使用的过程中,不可能通过硬编码的方式设置规则,且规则也没法直观的维护,为此肯定…...
vue或uniapp使用pdf.js预览
一、先下载稳定版的pdf.js,可以去官网下载 官网下载地址 或 pdf.js包下载(已配置好,无需修改) 二、下载好的pdf.js文件放在public下静态文件里, 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:Git无法验证SSL证书 这个错误通常是由于Git无法验证SSL证书导致的。您可以尝试以下方法解决此问题: 确认您的计算机上是否安装了正确的SSL证书。如果没有,请下载并安装它们。您可以使用以下命令在Mac上安装SSL证书: 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详解连载(5) 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽行高:设置多行文本的间距属性名属性值行高的测量方法 行高-垂直居中技巧 字体族属性名属性值示例扩展 font 复合属性使用场景复合属性示例注意 文本缩进属性…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
API网关Kong的鉴权与限流:高并发场景下的核心实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中,API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关,Kong凭借其插件化架构…...
