我们无法控制用户使用的是新浏览器还是旧浏览器，因此我们往往需要根据浏览器对属性的兼容性编写多套CSS代码。这篇文章就是要讨论如何优雅地处理浏览器兼容性问题，包括四点：级联机制支持更早的浏览器，Modernizr设置辅助类单独编写样式，使用@supports规则回退，短??JavaScript代码实现回退。提供浏览器兼容网站https://caniuse.com/https://webplatform.github.io/https://developer.mozilla.org/en-US/级联机制支持老浏览器/*防止linear-gradient挂起在旧浏览器中没有背景*/background:rgb(255,128,0);background:-moz-linear-gradient(0deg,yellow,red);background:-o-linear-gradient(0deg,yellow,red);background:-webkit-linear-gradient(0deg,yellow,red);/*标准语法要放在最后，保证最后生效的是标准语法*/background:linear-gradient(90deg,yellow,红色的）;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:/*浏览器不支持text-shaow*/h1{color:gray}/*浏览器支持text-shaow*/@supports(text-shadow:00.3remgray){h1{color:transparent;text-shadow:00.3remgray;}}但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.documentElement;if(propertyinroot.style){root.classList.add(property.toLowerCase());returntrue;}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[property]=value;if(dummy.style[property])//属性值被浏览器保留{root.classList.add(id);returntrue;}root.classList.add('no-'+id);returnfalse;}
