前端书籍看完《Visual Studio Code权威指南》停不下来，于是捡起了《CSS一姐《CSS魔法》ofLeaVerou，我们无法控制用户使用新版浏览器还是旧版浏览器，所以往往需要根据浏览器对属性的兼容性来编写多套CSS代码。文章是讨论如何优雅地处理浏览器兼容性问题，包括四点：级联机制支持更早的浏览器，Modernizr设置辅助类单独编写样式，使用@supports规则回退，短??JavaScript代码实现回退。浏览器兼容网站https://caniuse.com/https://webplatform.github.io/https://developer.mozilla.org...支持旧浏览器的级联机制/*防止旧浏览器中的线性渐变挂起导致无背景*/背景：rgb(255,128,0)；背景：-moz-linear-gradient(0deg,yellow,red)；背景：-o-linear-gradient(0deg,yellow,red)；背景：-webkit-linear-gradient(0deg,yellow,red);/*标准语法要放在最后，保证最后生效的是标准语法*/background:linear-gradient(90deg,yellow,red);Modernizr设置辅助类单独编写样式。这里参考一个14年的老博客Modernizr的介绍和使用。Modernizr官网：https://modernizr.com/Modernizr如何生效？如果页面支持text-shadow属性，那么Modernizr将添加textshadow类。如果不支持，则会添加no-textshadow类。因此，前端开发者可以设置两套代码来应对浏览器提供和不提供text-shadow支持的两种情况。/*浏览器不支持text-shaow*/h1{color:gray}/*浏览器支持text-shaow*/.textshaowh1{color:transparent;text-shadow:00.3remgray;}使用@supports规则除了使用Modernizr之外，还可以使用浏览器自带的@supports:/*browserdoesnotsupporttext-shaow*/h1{color:gray}/*浏览器支持text-shaow*/@supports(text-shadow:00.3remgray){h1{color:transparent;文本阴影：00.3rem灰色；}}但是LeaVerou指出，上述代码的阴影效果只有在同时支持@supports和text-shadow的浏览器中才会生效。所以请谨慎使用@supports。简短的JavaScript代码实现了与Modernizr相同的回退思想，进行特征检测，然后添加辅助类。varroot=document.documentElement;//if('textShadow'inroot.style){root.classList.add('textshadow')}else{rott.classList.add('no-textshadow')}同上，我们添加了一个辅助类对于html：如果浏览器支持text-shadow，则添加textshadow如果浏览器不支持text-shadow，则添加no-textshadow以上代码可以封装为一个函数：functiontestProperty(property){varroot=document.文档元素；if(propertyinroot.style){root.classList.add(property.toLowerCase());返回真；}root.classList.add('no-'+property.toLowerCase());returnfalse;}注意上面的方法只能检测属性是否支持，不能检测属性值。（如下，解释属性和属性值，代码如下）background:linear-gradient(red,tan);属性：属性值；检查属性值是否被支持，常见的思路是：赋值对应的属性，然后检查浏览器是否还保存了这个值。该方法会改变元素的样式，所以可以使用隐藏元素来防止检测到改变样式。vardummy=document.createElement('p');dummy.style.backgroundImage='linear-gradient(red,tan)';if(dummy.style.backgroundImage){root.classList.add('lineargradients');}else{root.classList.add('no-lineargradients');}封装函数如下：functiontestValue(id,value,property){vardummy=document.createElement('p');dummy.style[属性]=值；if(dummy.style[property])//属性值被浏览器保留{root.classList.add(id);返回真；}root.classList.add('no-'+id);returnfalse;}CSS一姐的书真有水平，难怪前端高手把她的《CSS揭秘》列为必读清单。
