css3 的@supports判断

最新推荐文章于 2024-10-28 18:04:00 发布

鳄鱼吃了我的房子

最新推荐文章于 2024-10-28 18:04:00 发布

阅读量938

点赞数 1

分类专栏：开发中遇到的问题文章标签： css css3

本文链接：https://blog.youkuaiyun.com/JasonAlonk/article/details/103558863

版权

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

13 篇文章

订阅专栏

@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;
  }
  
}