【CSS】兼容处理

news2024/10/16 14:42:46

  • 兼容前缀
  • 兼容查询

由于不同浏览器对CSS标准的支持程度不同,可能会导致在不同浏览器中出现样式差异。为了解决这个问题,需要采取一些措施来提高CSS的兼容性

兼容前缀

兼容前缀针对的浏览器
-webkit-WebKit 内核浏览器,如:SafariGoogle ChromeAndroid Browser
-moz-Mozilla 内核浏览器,如:Firefox
-ms-Microsoft 内核浏览器,如:Internet ExplorerEdge
-o-Opera 内核浏览器,如:Opera

不同浏览器因为内核不同,针对同一条css属性的兼容支持程度也不同,我们可以通过加兼容前缀的方式,让一些标准样式在浏览器内可以使用 ( 如果css样式在主流浏览器中需要加兼容前缀才能生效,就先写兼容写法,最后写标准写法 )

.mask-image{
		-webkit-mask-image: var(--mask);
		mask-image: var(--mask);
}

兼容查询

利用工具网站查询样式在各个浏览器的兼容情况,从而选择合适的方案工具地址: https://www.caniuse.com

1.在横线处输入需要查询兼容性的样式属性
在这里插入图片描述
2.查看下方浏览器兼容表
在这里插入图片描述
表头为不同的浏览器名称,主要查看 IE Edge、firefox、chrome、safari、opera这几个主流浏览器的兼容情况。倒数第二行是当前用户主流浏览器版本,为主要兼容参考,一般我们只看倒数三行的兼容情况;红色标签代表完全不兼容绿色标签代表完全兼容棕色标签代表兼容但需要加兼容方案 (鼠标移入;右上角有白色数字图标,表示兼容方案;左上角有黄色图标,表示会提示添加对应的兼容前缀 )
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2183765.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

.NET Core 集成 MiniProfiler性能分析工具

前言: 在日常开发中,应用程序的性能是我们需要关注的一个重点问题。当然我们有很多工具来分析程序性能:如:Zipkin等;但这些过于复杂,需要单独搭建。 MiniProfiler就是一款简单,但功能强大的应用…

进击J9:Inception v3算法实战与解析

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 一、实验目的: 了解并学习InceptionV3相对于InceptionV1改进了哪些地方(重点)使用Inception v3完成天气识别案例 二、实验环…

Android 12.0 关于定制自适应AdaptiveIconDrawable类型的动态时钟图标的功能实现系列一

1.前言 在12.0的系统rom定制化开发中,在关于定制动态时钟图标中,原系统是不支持动态时钟图标的功能,所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式,就是可以支持当改变系统图标样式变化时,动态时钟 图标的背景图形也跟着改变,所以接下来就来…

OpenFeign微服务部署

一.开启nacos 和redis 1.查看nacos和redis是否启动 docker ps2.查看是否安装nacos和redis docker ps -a3.启动nacos和redis docker start nacos docker start redis-6379 docker ps 二.使用SpringSession共享例子 这里的两个例子在我的一个博客有创建过程&#xff0c…

通信工程学习:什么是LTE长期演进

LTE:长期演进 LTE(Long Term Evolution,长期演进)是由3GPP(The 3rd Generation Partnership Project,第三代合作伙伴计划)组织制定的UMTS(Universal Mobile Telecommunications System,通用移动通信系统)技术标准的长期演进。以下是对LTE的详细解释: 一、定…

音乐制作软件FL Studio 24.1.1.4285 中文完整版新功能介绍及如何安装激活FL Studio 24

FL Studio 24.1.1.4285 中文完整版又被国内网友称之为水果音乐制作软件24,是Image-Line公司成立26周年而发布的一个版本,是目前互联网上最优秀的完整的软件音乐制作环境或数字音频工作站,包含了编排,录制,编辑&#xf…

笔墨歌盛世 丹青绘匠心,艺术赋能“百千万工程”

9月30日上午,乡村有“艺”思——2024 年三乡镇乡村文化艺术周启动仪式暨“崛起的力量”余镇河深中通道主题美术作品展开幕仪式在中山市三乡镇古鹤村成荣美术馆举行。 中山市文联党组成员、专职副主席卢曙光,三乡镇党委委员艾立强,中山市文化馆…

leetcode每日一题day21(24.10.1)——最低票价

看到题目,最低消费又有各种的方案,与结合往期每日一题很就没出动态规划,就感觉这题很像动态规划。 思路:对于第X天,买票有三种方案,即从,X-1天买一天的票,X-7买7天的票,X-30买三十天…

iSTFT 完美重构的条件详解

目录 引言1. 短时傅里叶变换(STFT)与逆变换(iSTFT)概述2. 完美重构的条件3. 数学推导4. 实现要点5. 示例代码6. 总结 引言 在数字信号处理领域,短时傅里叶变换(Short-Time Fourier Transform,简…

Java Web开发详解:从入门到实践

目录 引言 Java Web开发的优势 Java Web开发核心概念 Servlet和JSP Servlet JSP(JavaServer Pages) MVC架构 JDBC和数据库访问 JDBC概述 数据库连接示例 常用的Java Web框架 Spring MVC Hibernate MyBatis 对比常用框架 Java Web开发流程…

YOLOv5改进系列(1)——添加CBAM注意力机制

一、如何理解注意力机制 假设你正在阅读一本书,同时有人在你旁边说话。当你听到某些关键字时,比如“你的名字”或者“你感兴趣的话题”,你会自动把注意力从书上转移到他们的谈话上,尽管你并没有完全忽略书本的内容。这就是注意力机…

docker零基础入门教程

注意 本系列文章已升级、转移至我的自建站点中,本章原文为:Docker入门 目录 注意1.前言2.docker安装3.docker基本使用4.打包docker镜像5.docker进阶 1.前言 如果你长期写C/C代码,那你应该很容易发现C/C开源项目存在的一个严重问题&#xff…

Xshell-8下载安装教程

下载地址 https://www.xshell.com/zh/free-for-home-school/ 新建Xshell文件夹 点击安装程序 选择新建Xshell文件夹 默认即可 点击安装 注册 提交后点击邮箱收到的链接 点击确认 安装完成

【C/C++】错题记录(三)

题目一 题目二 题目三 题目四 题目五 题目六 题目七??? 题目八 这道题主要考查对数据类型和位运算的理解与运用。 分析选项 A: *((unsigned char *)(&number) 1)0xcd; 这里将 number 的地址强制转换为 unsigned char* 类型&a…

Qt界面优化——QSS

文章目录 QSS基本语法使用示例样式和代码分离选择器用法子控件选择器伪类选择器盒子模型控件样式示例按钮复选框输入框列表框菜单 登录界面 QSS基本语法 Qt对界面进行优化,主要采用的是QSS。 选择器 {属性名: 属性值; }选择器:先选择某个/类控件&#…

【JVM】双亲委派机制打破双亲委派机制

双亲委派机制 类加载器的双亲委派机制 由于Java虚拟机中有多个类加载器,双亲委派机制的核心是解决一个类到底由谁加载的问题。 双亲委派的作用: 保证类加载的安全性:通过双亲委派机制避免恶意代码替换 JDK中的核心类库。避免重复加载&…

算法题总结(五)——普通数组

普通数组 #238、除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要…

JDBC相关内容

第1章:JDBC概述 1.1 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用。大多数情况下,特别是企业级应用,数据持久化意味着将内存中的数据保存到硬盘上加以”固化”,而持久化的实现过程大…

进程--消息队列和共享内存

目录 消息队列 创建消息队列 删除消息队列 发送消息和接收 消息队列 消息队列就是一个消息的列表,进程可以在消息队列中添加消息和的读取消息 消息队列具有FIFO的特性,具有无名管道与有名管道各自的优势,可以支持任意两个进程的进程间通讯…

【python实操】python小程序之随机抽签以及for循环计算0-x的和

引言 python小程序之随机抽签以及for循环计算0-x的和 文章目录 引言一、随机抽签1.1 题目1.2 代码1.3 代码解释 二、for循环计算0-x的和2.1 题目2.2 代码2.3 代码解释 三、思考3.1 随机抽签3.2 for循环计算0-x的和 一、随机抽签 1.1 题目 使用input输入五个同学的名字随机抽取…