CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件

CSS浏览器兼容性的4种解决方案：浏览器CSS样式初始化、浏览器私有属性、CSShack语法和自动化插件太多了（如果全部写出来就是一个筐），更麻烦的是您必须面对各种适配和兼容性问题。长期以来一直在治疗头疼、头脚、脚，没有系统的梳理，整个思路和方向都是乱七八糟的，所以很想和大家分享一下最近整理的常见的解决方法和解决方法CSS浏览器兼容性，共同提升。为什么会出现浏览器兼容性问题，并不是因为浏览器厂商太多了！Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，傲游（Aothon）...关键是厂商不同，即使是同一个厂商的不同版本对同一段CSS的解析效果不一致，导致页面显示效果不一致，带来兼容性问题。多希望Chrome一统天下啊~~目前浏览器的市场份额有那么多浏览器，我们不可能每一个都兼容。对于用户量一般的产品，主流浏览器的适配做好就足够了。很不错。根据全球权威市场研究机构NetMarketShare发布的2018年10月浏览器市场份额，可以看出Chrome的份额达到了66.43%，这绝对是一个振奋人心的消息。根据百度流量研究所提供的2018年11月-2019年1月的数据可以看出，IE系统仍然占据很大的比重，还有很长的路要走~CSS浏览器兼容问题的解决思路和解决方案今天不想关注太多细节，比如需要我们兼容的css样式，而是想讨论大的解决思路，主要包括4个方面，浏览器CSS样式初始化，浏览器私有属性,CSShack语法和自动化插件。1、浏览器CSS样式初始化由于每个浏览器默认的CSS样式不同，最简单有效的方法就是初始化。相信很多朋友都写过这样的代码。在开始所有CSS之前，首先把marin和padding都设置为0，防止在不同的浏览器中显示效果不一样。*{保证金：0;padding:0;}关于浏览器CSS样式初始化，如果没有经验，可能不知道初始化什么。这里推荐一个库，Normalize.css，githubstar近40000。选择显示一些样式设置，如下html{line-height:1.15;/*修正所有浏览器中的行高*/-webkit-text-size-adjust:100%;/*防止在iOS中方向改变后调整字体大小。*/}body{margin:0;}a{background-color:transparent;/*移除IE10中活动链接的灰色背景。*/}img{border-style:none;/*去除IE10中链接内图片的边框。*/}通过CSS样式初始化，相信可以解决很多常规的兼容性问题。接下来，让我们看看浏览器的私有属性。2、浏览器私有属性我们经常会在某些CSS属性前加上一些前缀，比如-webkit-、-moz-、-ms-，这些都是浏览器私有属性。为什么会有私有属性？这是因为制定HTML和CSS标准的组织W3C行动迟缓。通常是W3C组织的一个成员提出一个新的属性，比如border-radius，大家都觉得不错，但是W3C制定标准，需要复杂的程序和审核。然而，浏览器厂商的营销时间紧迫。如果一个属性足够成熟，浏览器就会支持。但是为了避免以后W3C公布标准时发生变化，会增加一个私有前缀，比如-webkit-border-radius，这样可以提前支持新的属性。等到以后W3C公布了标准，建立了border-radius的标准写法，然后让新版本的浏览器支持border-radius的写法。常用的前缀有：-moz代表firefox浏览器私有属性-ms代表IE浏览器私有属性-webkit代表chrome、safari私有属性-o代表opera私有属性注意私有属性顺序，放标准写法最后把Compatibility写在前面-webkit-transform:rotate(-3deg);/*对于Chrome/Safari*/-moz-transform:rotate(-3deg);/*对于Firefox*/-ms-transform:rotate(-3deg);/*对于IE*/-o-transform:rotate(-3deg);/*对于Opera*/transform:rotate(-3deg);为每个CSS属性写这么一堆兼容代码，无疑是对生活最大的浪费，后面会讲到如何通过自动化插件来处理。3.CSShack有时我们需要为不同的浏览器或不同的版本编写特定的CSS样式。这种针对不同浏览器/不同版本编写相应CSS代码的过程，就叫做CSShack！CSShack的写法大致可以归纳为3种：conditionalhack、attribute-levelhack和selector-levelhack。ConditionalhackConditionalhack主要针对IE浏览器的一些特殊设置语法：值关键字if后面的条件一共有6种选择方式：是否，大于，大于等于to,lessthan,lessthanorequalto,non-specifiedversionwheel:指定是IE还是某个版本的IE。关键字：emptygreaterthan：选择大于指定版本的IE版本。关键字：gt（大于）大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（大于等于）小于：选择比指定版本小的IE版本。关键字：lt（小于）小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（小于等于）非指定版本：选择除指定版本外的所有IE版本。关键字：!versionIE浏览器版本，如6、7、8IE10及以上版本已去除条件注释功能，使用时请注意。示例Attribute-levelhackAttributehacking就是在CSS样式属性名前加一些只有特定浏览器才能识别的hack前缀。语法：selector{?property:value?;}值：_：选择IE6及以下。也可以使用连接线（破折号）(-)。为了避免与一些带有破折号的属性混淆，使用下划线（_）更为合适。*：选择IE7及以下版本。如：(+)和(#)都可以，但是业界对(*)的认识比较高9：选择IE6+0：选择IE8+和Opera15以下的浏览器比如在不同的IE浏览器中设置不同的颜色浏览器，注意顺序：低版本的兼容性写在最后。测试{颜色：#090\9;/*对于IE8+*/*color:#f00;/*对于IE7和更早版本*/_color:#ff0;/*ForIE6andearlier*/}selector-levelhackselector-levelhack是针对一些页面性能不一致或者需要特殊处理的浏览器，在CSS选择器前加一些只有特定浏览器才能识别的前缀被hack。语法：selector{sRules}值：常见的选择器级hacks有*html*前缀仅对IE6有效*+html*+前缀仅对IE7有效@mediascreen\9{...}仅对IE6有效/7生效@media\0screen{body{background:red;}}只对IE8有效@media\0screen\,screen\9{body{background:blue;}}只对IE6/7/8有效@mediascreen\0{body{background:green;}}仅对IE8/9/10@mediascreen和(min-width:0\0){body{background:gray;}}仅对IE9/10@mediascreen和(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;有效}}仅对IE10有效示例：*html.test{color:#090;}/*对于IE6和更早的版本*/*+html.test{color:#ff0;}/*ForIE7*/看到这里，不得不为前端人员感到骄傲，太难了~~但是花很多心思去解决这些兼容性问题，并不能给我们带来什么大的提升技术，无非是给各个浏览器厂商填坑，随着时间的推移，这些技术的价值会越来越小，如何以最省力的方式解决它们的css兼容问题，让我们留出更多的时间，做一个更好的生命，是关键。幸运的是，有一些自动化插件可以帮助我们从繁重的兼容性处理中解脱出来。4、自动化插件Autoprefixer是一款自动管理浏览器前缀的插件。它可以解析CSS文件并为CSS内容添加浏览器前缀，使用来自CanIUse（caniuse网站）的数据来确定需要哪些前缀。在资源构建工具（如Grunt）中加入Autoprefixe后，就可以完全忘记CSS前缀，按照最新的W3C规范正常编写CSS即可。如果项目需要支持旧版浏览器，可以修改浏览器参数设置。//我们写的代码div{transform:rotate(30deg);}//自动补全的代码，具体补全由浏览器版本决定是否兼容，可以设置div{-ms-transform:rotate(30度）；-webkit变换：旋转（30度）；-o-变换：旋转（30度）；-moz变换：旋转（30度）；transform:rotate(30deg);}目前webpack、gulp、grunt都有相应的插件，如果你还没有使用，赶快应用到我们的项目中吧，别让CSS兼容性浪费了你的时间！限于技术水平，文章中肯定有很多疏漏或错误。大家有什么好的方法一起讨论吗？欢迎关注我们的公众号，一起学习进步。