CSS 代码越来越洋气，记得最开始的 CSS 只有一个 @import 用于引入 CSS 文件，现在各种 at 规则层出不穷，用法也是多种多样。
@supports
这规则好像出来都快十多年了，但实际开发的时候，好像真是没怎么用到，大概率能用到它的场景都被 JS 抢了饭碗！！毕竟 JS 顺手的事，谁还去折腾 CSS 是吧？
@supports 用于检测浏览器是否支持 CSS 特性，支持和不支持都能添加一组特定的样式。
语法：
1@supports <supports-condition> { <rule-list> }属性检测
supports-condition 直接使用 CSS 规则可用来检测对应属性和值是否有效，如：
123@supports (transform-origin: 5% 5%) { /* 如果 CSS 属性有效，则执行此样式规则 */}选择器检测
利用 selector 可检测浏览器是否支持特定的选择器：
123@supports selector(:not()) { /* 如果浏览器支持 :not 选择器，则执行此样式规则 */}not 操作符
not 操作符可用来判定浏览器不支持特定条件时的处理逻辑：
123@supports not (display: grid) { /* 如果浏览器不支持网格布局，则执行此样式规则 */}and 操作符
与媒体查询一样，@supports 语句也可以使用多个条件联合检测：
12345/* 如果 not 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 and 和 or，则需要外面的圆括号 */@supports (display: grid) and (not (display: inline-grid)) {}@supports not (not (transform-origin: 2px)) {}or 操作符
or 操作符用于判断多个条件是否满足其中一个条件，只要一个满足，就返回 true：
12@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}应用场景
看一个 MDN 上的复杂例子：
写在最后
就一般的项目来说，@supports 基本上毫无用户之地，毕竟一个正常的项目，至少应该支持大部分浏览器！！
如果您的项目有“渐进增强”或“优雅降级”这种说法，那么 @supports 大概率会派得上用场！！
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務" 的經(jīng)營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應用服務。
公安局備案號：
專屬顧問
