css3 的@supports判断

最新推荐文章于 2023-09-08 19:53:15 发布

原创最新推荐文章于 2023-09-08 19:53:15 发布 · 975 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

开发中遇到的问题专栏收录该内容

13 篇文章

订阅专栏

本文详细解析了CSS中@supports规则的使用方法，通过具体示例展示了如何判断浏览器是否支持特定的CSS3属性，如display:flex和-webkit-mask等，并结合逻辑运算符and、or和not进行条件组合。

@supports

@supports可以判断当前浏览器是否支持css3的属性支持（与 and，或 or ，非 not）

/* 判断浏览器是否支持  display:flex; */
 
@supports (display:flex) {
	/* 则干一些事情*/
	
  .login-container .el-input input {
    color: red;
  }
  
}

/* and 判断  浏览器支持  ‘-webkit-mask: none’  and（与&&）不支持（not）‘caret-color:  $cursor’ */
 
@supports (-webkit-mask: none) and (not (caret-color: $cursor)) {
	/* 则干一些事情*/
	
  .login-container .el-input input {
    color: $cursor;
  }
  
}

/* and 判断  浏览器不支持  ‘-webkit-mask: none’  or（或||）支持‘caret-color:  $cursor’ */
 
@supports (not(-webkit-mask: none)) or (caret-color: $cursor) {
	/* 则干一些事情*/
	
  .login-container .el-input input {
    	color: red;
  }
  
}

/* and 判断  浏览器支持  ‘-webkit-mask: none’  not（非！）不支持（not）‘caret-color:  $cursor’ */
 
@supports (-webkit-mask: none) and (not(caret-color: $cursor)) {
	/* 则干一些事情*/
	
  .login-container .el-input input {
    	color: red;
  }
  
}