CSS属性兼容写法
一种是用js判断兼容性
// JS
if ("CSS" in window && "supports" in window.CSS) {
var support = window.CSS.supports("mix-blend-mode","difference");
support = support?"mix-blend-mode":"no-mix-blend-mode";
document.documentElement.className += support;
} // CSS
h1 { color: #000; }
.mix-blend-mode body {
background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
} .mix-blend-mode h1 {
color: #fff;
mix-blend-mode: difference;
}
用CSS中的@supports
@supports (mix-blend-mode: difference) {
body {
background-image: linear-gradient(90deg,#fff 49.9%,#000 50%)
}
h1 {
color: #fff;
mix-blend-mode: difference;
}
}
CSS属性兼容写法的更多相关文章
- IE浏览器兼容问题(上)——html和css的兼容写法
用户使用的浏览器五花八门,我们要保证每一种浏览器都能兼容我们的代码,不能要求用户去改变浏览器,那么就得在我们的代码上下功夫.此时我们要用到hack. HACK就是针对不同的浏览器写不同的HTML.CS ...
- css属性兼容主流浏览器
目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...
- CSS半透明兼容写法
filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; 例如: background:#A5CD40; filter: Alpha(opac ...
- 浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
- css 背景色渐变兼容写法
最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...
- 【css】css 背景色渐变兼容写法
最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- (转)css 背景色渐变兼容写法
css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, # ...
- css复合属性的写法
# 复合属性也称为 "shortcut" property (快捷属性),它作用是为了简化代码,提高页面运行的效率. # 下面的内容会介绍 2 个比较常用的复合属性 "f ...
随机推荐
- Java 找出四位数的所有吸血鬼数字 基础代码实例
/** * 找出四位数的所有吸血鬼数字 * 吸血鬼数字是指位数为偶数的数字,可以由一对数字相乘而得到,而这对数字各包含乘积的一半位数的数字,其中从最初的数字中选取的数字可以任意排序. * 以两个 ...
- 记录一次Oracle注入绕waf
这个注入挺特殊的,是ip头注入.我们进行简单的探测: 首先正常发起一次请求,我们发现content-type是76 探测注入我习惯性的一个单引号: 一个单引号我发现长度还是76 我开始尝试单引号,双引 ...
- Java之函数式接口
函数式接口 概述:接口中只有一个抽象方法 下面介绍的可能很抽象,理解不了,至少在我看来单独的这几个借口是没有用的,跟最下面说的 Stream流一起用才会有效果 函数式接口,即适用于函数式编程场景的接口 ...
- bzoj2253 纸箱堆叠
题目链接 题意 求三元组的严格上升子序列 思路 先考虑暴力\(dp\)一下 for(int i = 1;i <= n;++i) for(int j = 1;j < i;++j) if(x[ ...
- makefile :=和+=
经常有人分不清= .:=和+=的区别 这里我总结下做下详细的分析: 首先你得清楚makefile的运行环境,因为我是linux系统,那么我得运行环境是shell 在Linux的shell里,shel ...
- 网页三剑客之JS
1.javascrapt介绍 js概述 JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互. JavaScript是浏览器解释 ...
- cacti报警邮件的设置
众所周知,用Linux系统自带的sendmail发送邮件是有限制的,可能对有些邮箱无法正常发送,导致报警邮件不能够及时发送到,因此就可能会产生不必要的麻烦!对此,我们可以用其他方法来发送邮件,就是在c ...
- MongoDB 3.6.9 集群搭建 - 切片+副本集
1. 环境准备 在Mongo的官网下载Linux版本安装包,然后解压到对应的目录下:由于资源有限,我们采用Replica Sets + Sharding方式来配置高可用.结构图如下所示: 这里我说明下 ...
- uploadPreview上传图片前预览图片
uploadPreview.js是一款图片上传前的预览插件.谷歌.火狐.IE都可以兼容,但是不支持safari. 相关的html代码: <!DOCTYPE html PUBLIC "- ...
- ado.net 使用:ExecuteReader 无法获取输出参数
解决方法: 要获取到输出参数.需要连接关闭之后才行. 一般都是用using把打开数据库连接的reader包起来