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 大概率会派得上用场！！
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
