首先需要明确。以前浏览器对CSS的支持不同，不同浏览器的样式可能不一样。处理这种差异，需要写几套不同的CSS来兼容（边框、圆角、颜色等），这个很麻烦，浏览器css显示差异化是浏览器本身的问题，有和我们的css无关，好的浏览器有好的显示，不好的浏览器只有正常显示，我们只需要关注浏览器是否支持css属性即可。例如：borderroundedcornersborder-radius:50%上面这句是把border变成圆形，但是有的浏览器可能会显示成正方形，这种风格的区别不用忽略。现在讨论浏览器是否支持css属性来讨论渐进增强的适配方案。1.兼容属性值差异2.兼容伪类或伪元素3.兼容浏览器类型区分4.兼容@supports兼容属性值差异属性值差异实现兼容案例1：实现图片旋转.images{宽度：100px；高度：100px；/*所有浏览器都能识别*/background:url(../assets/loading.gif);/*IE10+浏览器识别*/background:url(../assets/loading.png),linear-gradient(transparent,transparent);背景大小：100px；animation:spin1slinearinfinite;}/*关键字“from”和“to”（代表0%（开始）和100%（完成））*/@keyframesspin{from{transform:rotate(360deg);}到{变换：旋转（0度）；}}分析：css部分写后台：url(../assets/loading.gif);这句话所有浏览器都能识别，图片是loadinggif动画；此外，我们添加了背景：url(../assets/loading.png),linear-gradient(transparent,transparent);这句话中的linear-gradient只有IE10+可以识别。如果当前浏览器为IE10以下，则显示动画。如果是IE10+，会显示png静态图片，动画（IE10+）实现动画效果。案例二：实现边框阴影IE8以下的浏览器不支持box-shadow属性。如果要实现样式的浮动效果，可以使用border来实现。IE9+支持box-shadow，可以用shadow来实现。.panel{宽度：50px;高度：50px；边距：10px；/*所有浏览器识别*/border:1pxsolid#ddd;/*IE9+浏览器识别*/border:1pxsolidrgba(0,0,0,0);box-shadow:2px2px;}rgba只有IE9+支持，所以这里可以加一个rgba(0,0,0,0)来覆盖原来的边框效果，这样边框就透明了，出现底部阴影效果.伪类或伪元素实现兼容利用css属性的差异来实现兼容。只适合单行的css属性。如果要适应整个代码块，可以使用伪类或者伪元素。IE8及以下不会识别伪元素，但IE9+会识别伪元素。伪元素说明：|属性|说明||---|---||::之后|在元素后插入||::之前|在元素前插入||词||::一线|第一行-第一行||::选择|所选元素|具体可以参考w3school文档：https://www.w3school.com.cn/css/css_pseudo_classes.asp.pseudo{width:150px;高度：50px；边距：10px；边框：1px实心#ddd；}/*IE9+识别*/_::before,.pseudo{border:1pxsolidrgba(0,0,0,0);框阴影：2px2px#608dfa；之前box-shadow的情况在这里被重写。IE8及以下识别伪代码块，IE9+识别_::before,.伪代码块，并按执行顺序覆盖相同的代码块属性。_::before，伪元素前的下划线作为标签选择器的占位符，本身不会产生任何匹配。这种情况可以类推IE10+浏览器支持表单验证相关的伪类。IE11+支持::-ms-backdrop伪元素（IE需要加ms前缀，其他浏览器不需要）。Edge12+使用@supportsEdge13+支持：in-rangeor:out-of-range....浏览器类型区分浏览器支持参考手册：https://www.w3school.com.cn/cssref/css_browsersupport.asp浏览器匹配伪-element：Firefox浏览器识别，可以使用伪类或者以-moz-private为前缀的伪元素/*Firefox*/_::-moz-progress-bar,.sth-class{}主流浏览器识别_:default,.sth-class{}webkitbrowsing浏览器识别：只能使用前缀为-webkit-的伪类，不能使用前缀为-webkit-的伪元素，因为火狐浏览器会考虑前缀为-的伪元素webkit-是合法的。/*webkit浏览器*/:-webkit-any(_),.sth_class{}ChromiumEdge浏览器识别/*ChromiumEdge*/_::-ms-any,.sth-class{}伪元素处理兼容性有风险。如果哪天浏览器不支持某个伪类，那么就会出问题。这种方法只能解决一些特殊的问题，需要注意。@supports的兼容性@supports可以用来检测当前浏览器是否支持某个css特性，是处理css渐进增强最正式的方式。@supports的支持从Edge12浏览器开始，目前主流浏览器都支持。.div_supports{宽度：50px；高度：50px；背景：网址（../assets/music.gif）；/*覆盖*/background-size:50px;}/*Edge12+browser*/@supports(animation:none){//support.div_supports{background:url(../assets/loading.png);背景大小：50px；动画：支持1s线性无限；}}@keyframessupp{from{transform:rotate(360deg);}到{变换：旋转（0度）；}}使用@supports实现加载动画。Edge12之前的浏览器使用的是gif动画，Edge12+的浏览器使用的是带有动画效果的png静态图片。@supports(animation:none){}/*support*/@supports(border-radius:aaa){}/*不支持*/语法：@supportsCSSat-rule可以根据浏览器指定一个或多个A支持特定CSS特性的声明。这称为属性查询。此规则可以放在代码的顶层，或嵌套在任何其他条件组规则中。如果支持参数部分的语法，则返回true，否则返回false。算子说明默认判断支持true，不支持false，进入代码块和支持or同时，下面是算子的应用：/*支持灵活布局*/@supports(display:flex){}/*no支持灵活布局*/@supportsnot(display:flex){}/*同时支持灵活布局和grid布局*/@supports(display:flex)and(display:grid){}/*灵活布局orgridlayout满足其中一个即可*/@supports(display:flex)or(display:grid){}@supports可以连续做多个判断注意：不能直接把支持和不支持的语法放在一起，一个会报错@supports(display:flex)andnot(display:grid){}/*报错*/解决方法：类似js中的优先级嵌套，用()括起来/*支持弹性布局，不支持网格布局*/@supports(display:flex)and(not(display:grid)){}/*支持flex布局但不支持网格布局或动画*/@supports(display:flex)and((not(display:grid))or(not(animation:none))){}验证是否支持嵌套：.supports_12{width:300px;border:1pxsolidred;}/*支持弹性布局，不支持border-radius:'aaa'*/@supports(display:flex)and(not(border-radius:'aaa')){语法。supports_12{颜色：红色；}}/*支持灵活布局，（不支持border-radius:50%or(satisfy1)width:'aaa')*/@supports(display:flex)and((not(not(border-radius:50%)))或(not(width:'aaa'))){.supports_12{颜色r：青色；}}案例源码：https://gitee.com/wang_fan_w/css-diary如果觉得本文对您有帮助，欢迎点赞、收藏、转发~
