首先须要明确一点，以往浏览器对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){}
/* 不反对弹性布局 */@supports not (display: flex){}
/* 同时反对弹性布局和网格布局 */@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

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~