CSS浏览器兼容性，最完整处理方案( 二 ) _浏览器兼容

取值

关键词
if后面跟的条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本
是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!
版本
IE浏览器版本，如6、7、8，但IE10及以上版本已将条件注释特性移除，使用时需注意。

举个例子

<!--[if lt IE 9]><script src=https://www.isolves.com/it/cxkf/yy/CSS2/2019-12-16/"//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">属性hack：在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。
selector{<hack>?property:value<hack>?;}

取值：

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适
*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高
9：选择IE6+
：选择IE8+和Opera15以下的浏览器

举个例子

注意顺序：低版本的兼容性写法放到最后
.test {color: #0909; /* For IE8+ */*color: #f00;/* For IE7 and earlier */_color: #ff0;/* For IE6 and earlier */}选择符级hack：是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack 。
<hack> selector{ sRules }

取值：常见的选择符级hack有

*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media screen9{...}只对IE6/7生效@media screen {body { background: red; }}只对IE8有效@media screen,screen9{body { background: blue; }}只对IE6/7/8有效@media screen {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

举个例子：

* html .test { color: #090; }/* For IE6 and earlier */* + html .test { color: #ff0; }/* For IE7 */写到这里，不得不说，前端开发这也太难了吧~~
花大力气解决这些兼容性问题，并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了。随着时间的流逝，技术更新，到现在我们就该想怎么花最小的力气解决css兼容性问题。接下来，自动化插件可以上场了，我们终于可以从繁重的兼容性处理中解脱出来。

自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。
把Autoprefixe添加到资源构建工具（如webpack）后，可以完全忘记前面的东西，只需按照最新的W3C规范来正常书写CSS，剩下的工作交给插件来处理。另外，如果项目需要支持旧版浏览器，可修改browsers参数设置。
//我们编写的代码div {transform: rotate(30deg);}//自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置div {-ms-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);-moz-transform: rotate(30deg);transform: rotate(30deg);}目前webpack、gulp、grunt都有相应的插件，赶快行动起来，别再让CSS兼容性浪费你的时间！

受限于技术能力，如有问题可以在下方留言讨论。想要了解更多前端技术、精彩热文可关注同名公众号“一郭鲜” 。别着急，慢慢来，小郭与你一起成长