CSS @supports解析

2021-02-21 16:03:34 阅读：190 来源： 互联网

标签：caret flex 括号 webkit 解析 supports display CSS

@supports（）会检测括号中的声明，在浏览器支持该声明的情况下执行花括号中的代码。

基本属性检测

@supports (display: flex) {
	div { display: flex; }
}

not关键字

@supports not (display: flex) {
	div { float: left; } 
}

组合条件检测

@supports (display: flex) and (-webkit-appearance: caret) {

}

也可以用括号将多个条件进行嵌套关联

/* and and or */
@supports ((display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex)) and (-webkit-appearance: caret) {

    /* use styles here */
}

标签：caret,flex,括号,webkit,解析,supports,display,CSS
来源： https://blog.csdn.net/weixin_46193778/article/details/113919224

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS @supports解析