首先需要明确一点，以往浏览器对css的支持是不同的，不同浏览器的样式可能会存在差异，对待这种差异问题，需要写几套不同的css来兼容（边框、圆角、颜色等），这样是非常麻烦的，浏览器css显示差异化属于浏览器自身的问题，跟我们的css是没有关系的，好的浏览器就有好的显示，糟糕的浏览器就只有普通显示，我们只需要关注浏览器是否支持css属性即可。
例如:边框圆角
border-radius : 50
上面这一句是将边框变成圆形，但部分浏览器可能会显示为方形，这种样式的差异问题无需理会。
现在就浏览器是否支持css属性来讨论一下渐进增强的适配方案。
1、属性值差异实现兼容
2、伪类或伪元素实现兼容
3、浏览器类型区分实现兼容
4、@supports实现兼容
属性值差异实现兼容
css的新增属性低版本浏览器是不识别的，通过属性值差异来实现兼容
案例一：实现图片旋转
.images{ width: 100px; height: 100px; /*所有浏览器识别*/ background: url(../assets/loading.gif); /* IE10+ 浏览器识别 */ background: url(../assets/loading.png),linear-gradient(transparent,transparent); background-size: 100px; animation: spin 1s linear infinite; } /* 键字 "from" 和 "to"（代表 0％（开始）和 100％（完成）） */ @keyframes spin{ from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
分析：
css部分写了 background: url(../assets/loading.gif); 这一句是所有浏览器都识别的，图片为加载的gif动图；此外我们又多添加了 background: url(../assets/loading.png),linear-gradient(transparent,transparent);这一句，其中linear-gradient为IE10+才会识别的，如果当前浏览器是IE10以下则显示动图，如果是IE10+则显示png静态图片，配合animation(IE10+)来实现动画效果。
案例二：实现边框阴影
IE8以下的浏览器是不支持box-shadow属性的，如果想要实现样式的浮动效果，可以通过border来实现，IE9+支持box-shadow，那么就可以用阴影实现。
.panel{ width: 50px; height: 50px; margin: 10px; /* 所有浏览器识别 */ border: 1px solid #ddd; /* IE9+ 浏览器识别 */ border:1px solid rgba(0,0,0,0); box-shadow: 2px 2px; }
rgba也是IE9+才支持的，所以这里可以添加一个rgba(0,0,0,0)覆盖原来的border效果，这样边框透明，底部阴影的效果就出现了。
伪类或伪元素实现兼容
上面利用css属性差异实现兼容只适合单行的css属性，如果要适配整个代码块，可以使用伪类或伪元素，IE8以下不会识别伪元素，IE9+识别伪元素。
关于伪元素的说明：
| 属性 | 说明 |
| ::after | 素之后插入 |
| ::before | 元素之前插入 |
| ::first-letter | 首字母-第一个字 |
| ::first-line | 首行-第一行 |
| ::selection | 选择的元素 |
详细的请看w3school文档：https://www.w3school.com.cn/css/css_pseudo_classes.asp
.pseudo{ width: 150px; height: 50px; margin: 10px; border: 1px solid #ddd; } /* IE9+识别 */ _::before,.pseudo{ border:1px solid rgba(0,0,0,0); box-shadow: 2px 2px #608dfa; }
上面这里重写了之前的box-shadow的案例，IE8以下识别pseudo代码块，IE9+识别_::before,.pseudo代码块，并且按照执行顺序覆盖相同属性。
_::before，伪元素前的下划线是作为一个标签选择器用来占位的，本身不会产生任何匹配。
可以通过该案例以此类推
IE10+浏览器支持表单验证相关的伪类
IE11+支持::-ms-backdrop伪元素（IE需要加ms前缀，其它浏览器不需要）
Edge12+使用@supports
Edge13+支持:in-range或:out-of-range
…
浏览器类型区分
浏览器支持参考手册：https://www.w3school.com.cn/cssref/css_browsersupport.asp
浏览器配合伪元素：
Firefox浏览器识别，可以使用带有-moz-私有前缀的伪类或伪元素
/* Firefox */ _::-moz-progress-bar, .sth-class{}
主流浏览器识别
_:default, .sth-class{}
webkit浏览器识别：只可使用带有-webkit-前缀的伪类，不能使用带有-webkit-前缀的伪元素，因为Firefox浏览器会认为带有-webkit-前缀的伪元素是合法的。
/* webkit浏览器 */ :-webkit-any(_),.sth_class{}
Chromium Edge浏览器识别
/* Chromium Edge */ _::-ms-any,.sth-class{}
伪元素处理兼容性有风险，如果浏览器哪天不支持某个伪类，那么就会出问题，这种方法只能解决一些特殊问题，需要注意。
@supports的兼容
@supports可以用来检测当前浏览器是否支持某个css特性，用来处理css渐进增强是最正规的。
@supports的支持是从Edge12浏览器开始的，目前的主流浏览器都支持。
.div_supports{ width: 50px; height: 50px; background: url(../assets/music.gif); /* 被覆盖 */ background-size: 50px; } /* Edge12+浏览器 */ @supports (animation : none){ // 支持 .div_supports{ background: url(../assets/loading.png); background-size: 50px; animation: supp 1s linear infinite; } } @keyframes supp { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
使用@supports实现加载动画，在Edge12之前的浏览器，使用gif动图，Edge12+的浏览器则使用png静态图片配合动画效果实现。
@supports (animation : none) {} /*支持*/ @supports (border-radius : aaa){} /* 不支持 */
语法：@supports CSS at-rule 可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。如果参数部分的语法是支持的则返回true，否则就是false。
| 操作符 | 说明 |
| 默认判断 | 支持true , 不支持false |
| not | 不支持则进入代码块 |
| and | 同时支持 |
| or | 满足其一 |
下面是操作符的应用：
/* 支持弹性布局 */ @supports (display: flex){} • 1 • 2
/* 不支持弹性布局 */ @supports not (display: flex){} • 1 • 2
/* 同时支持弹性布局和网格布局 */ @supports (display: flex) and (display: grid){}
/* 弹性布局或网格布局满足其一即可 */ @supports (display: flex) or (display: grid){}
@supports可以连续做多个判断
注意：不能将支持和不支持的语法直接放在一起，会报错
@supports (display: flex) and not (display: grid){} /* 报错 */
解决方法：类似js中的优先级嵌套，用()括起来即可
/* 支持弹性布局但不支持网格布局*/ @supports (display: flex) and (not (display: grid)){}
/* 支持弹性布局 但不支持网格布局或动画 */ @supports (display: flex) and ((not (display: grid)) or (not (animation :none))){}
验证是否支持嵌套：
.supports_12{ width: 300px; border: 1px solid red; } /* 支持弹性布局并且不支持border-radius: 'aaa'这种语法*/ @supports (display: flex) and (not (border-radius: 'aaa')){ .supports_12 { color:red; } } /* 支持弹性布局，(不支持border-radius: 50% 或(满足其一) width:'aaa') */ @supports (display: flex) and ((not (border-radius: 50%)) or (not (width:'aaa'))){ .supports_12 { color:cyan; } }
案例源码：https://gitee.com/wang_fan_w/css-diary
如果觉得这篇文章对你有帮助，欢迎点赞、收藏、转发哦~
