CSS中@support的用法
这段时间一直在调试浏览器的兼容性问题,了解到了@support的这个属性,记录下:
CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支持某个属性,你也可以提供另外一套样式作为替补。但是这里有一点需要注意的是:@support对于浏览器的版本也是有要求的,不是说所有的浏览器以及其所有的版本都是支持@support的。
下面就来说一下@support的用法:
1.基本语法是这样的:
@support(prop:value){
/*自己的样式*/
}
@supports (display: flex) { div { display: flex; }}
注释:如果浏览器支持display:flex属性的话,那么div的样式就是display:flex
2.逻辑操作符:“not” 的用法
@supports not (display: flex) { div { float: right; }}
注释:如果浏览器不支持display:flex属性的话,那么div的样式就是display:right
3.逻辑操作符:“and”的用法
@supports (display: flex) and ( box-shadow: 2px 2px 2px black ) {
/*自己的样式*/
}
注释:如果浏览器支持display:flex和box-shadow的属性,就执行里面自己的样式
4.逻辑操作符:“or” 的用法
@supports (display: -webkit-flex) or (display: -moz-flex) or(display: flex) {
/*自己的样式 */
}
注释:如果浏览器支持其中一个就可以执行里面自己的样式
5.混用的例子
“or”和“and”混用,在@supports中“or”和“and”混用时,必须使用括号()来区分其优先级
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
/*自己的样式 */
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
/*自己的样式 */
}
“or”、“and” 和 “not” 混用
@supports (display: grid) and (not (transition-property: color) or (animation-name: foo)){
/*自己的样式 */
}
---------------------
作者:我_曾是少年
来源:CSDN
原文:https://blog.csdn.net/liaobangxiang/article/details/80706922
版权声明:本文为博主原创文章,转载请附上博文链接!
CSS中@support的用法的更多相关文章
- CSS中@support的用法 及其calc、media用法
背景: 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题(css变量如何定义,calc, support, media),我看一眼熟悉而陌生,知其一而不知其二,叔可忍婶不可忍,马上就度娘起来, ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css 中 important 的用法
css 中 important 的如何使用? important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...
- CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- 转: CSS中overflow的用法
Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...
随机推荐
- 查看Oracle的连接数
select count(*) from v$process --当前连接数 select count(*) from v$process where program='ORACLE.EXE(SHAD ...
- LeetCode Bash练习
195. Tenth Line #!/bin/bash i= cat file.txt | while read line do #echo $line ] then echo $line fi le ...
- 选择了uniapp开发app
7月份打算做一简单app,之前公司做app的时候简单用过Dcloud公司的mui,当时由于uniapp刚出来,最终选择了mui.对uniapp的 了解几乎没有. 做app对我来说几乎是零基础的,当然是 ...
- 【2018寒假集训 Day2】【动态规划】抢金块
抢金块 输入文件:gold.in 输出文件:gold.out 问题描述: 地面上有一些格子,每个格子上面都有金块,但不同格子上的金块有不同的价值,你一次可以跳S至T步 .如果S=2,T=4.你就可以跳 ...
- PowerMock学习(九)之Mock Answer的使用
关于Mock Answer 上一篇文章,有介绍过关于Arguments Matche的使用,其实 Answer的作用与其比较类似,但是它比 Arguments Matcher 更加强大. Argume ...
- 【数据结构】之队列(Java语言描述)
在[这篇文章]中,我简单介绍了队列的基本数据结构及操作方式,并用C语言代码描述了队列的基本功能实现. JDK中默认为我们提供了队列的API—— Queue . Queue是一个接口,其中提供了处理队列 ...
- Nginx安装、默认虚拟主机、Nginx用户认证和域名重定向
6月7日任务 12.6 Nginx安装12.7 默认虚拟主机12.8 Nginx用户认证12.9 Nginx域名重定向 扩展nginx.conf 配置详解 http://www.ha97.com/51 ...
- Oracle temp table
Tow kinds of temp table data keep method. One is delete when commit Anothe one is preseve when commi ...
- vue使用tips
1. native修饰符可以用来绑定原生事件 2. destroyed在列表重渲染时,销毁的列表项会调用. 3. 并不是所有的数据都适合放入vuex 4. 子组件mounted先于父组件发生. 5. ...
- 华为OSPF与ACL综合应用实例讲解
OSPF与ACL综合应用实例讲解 项目案例要求: 1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定性影响:3.R1.R2.R3只允许被IT登录管理:4 ...