网站兼容性：浏览器前缀

浏览器前缀

欢迎大家来到我们 Modern Web ● 提升网站兼容性从这里开始 系列的浏览器前缀问题的专题，在做跨浏览器开发的时候，需要用到浏览器前缀（Vendor prefixes）来使用一些比较新的CSS或者JavaScript的属性，包括CSS前缀和JavaScript前缀。

CSS前缀是用来添加对一些实验性的功能或者属性的支持。他们不是CSS标准的一部分，但是他们是现存的一些属性或者是未来将会支持的属性。

 

1 使用dev.modern.ie网站检测:

点击链接https://dev.windows.com/zh-cn/microsoft-edge/tools/staticscan/在输入框输入网站URL，点击查询即可检测网站问题：

 

如果出现“CSS前缀”问题，如下图所示：

 

2 添加“-ms-”前缀:

表A-6是四个主要的浏览器前缀：

-ms-	Microsoft
-moz-	Mozilla
-o-	Opera
-Webkit-	Safari, Chrome, 以及其他基于WebKit的browsers

 表A-6 四个主要的浏览器前缀

如果你经常使用CSS3 实现一些炫酷的效果，比如使用transition 实现让一个div 慢慢变宽的动态特效，你一定会为了兼容各个高级浏览器而这样写你的CSS 代码，见表A-7：

#box {

width: 200 px;

height: 200 px;

-moz-transition: al l2s ease 0s;

-Webkit-transition: all 2s ease 0s;

-o-transition: all 2s ease 0s;

}

#box:hover {

width: 800

表 A‑7 CSS代码实现div慢慢变宽动态特效

其实在IE11 上你也可以使用CSS3 实现这个效果，只需要为#box 添加一行

代码：

-ms-transition: all 2s ease 0s;

 

标准属性可以在很多现在的浏览器中正常工作，但是如果你不确定某个属性是否需要前缀或者是否能在某个浏览器工作，可以上 caniuse.com查看。所有这些工作都非常耗费精力和时间，推荐使用自动化工具Autoprefixer（https://github.com/postcss/autoprefixer）来实现。

Autoprefixer将会解析你的CSS文件（如果是使用前期处理工具，那么是在编译之后）并且根据caniuse.com上的数据添加适当的浏览器前缀。这个工具将让你在写CSS的时候无需担心某一个属性是否可用或者是否该加浏览器前缀。Autoprefixer是通过像 Grunt或者Gulp这样的任务工具来运行的。具体内容可以参见http://akms/vendor-prefixes。

 

Appendix：

下面的一些网站链接介绍如何使用改善网站的兼容性供大家参考：

§Web App Platform:  http://dev.windows.com   

§Microsoft Edge开发者博客:  http://blogs.windows.com/msedgedev/    

§F12开发者工具使用:  http://aka.ms/mva-f12  

§微软技术培训： http://aka.ms/feature-detection   

同时，我们提供了微信版本的dev.modern.ie工具，扫描下方二维码，轻松测试网站。

 

网站兼容性测试（微信版）

http://modernie.china

cloudsites.cn/