vs安装插件CSS3的标准并没有全部定稿，目前CSS3的标准

CSS3的标准并没有全部定稿，目前CSS3的标准分成了不同的模块，具体的标准由各个模块推动标准和定稿，标准制定的过程中，浏览器也在不断的发新的版本来兼容新的标准。

浏览器有时会给一些在试验阶段或非标准阶段的css属性添加前缀, 这样开发者就可以使用 浏览器行为的改变不会破坏标准. 开发人员应等待包含无前缀属性，直到浏览器行为标准化。

-webkit- (谷歌, Safari, 新版Opera浏览器等)

-moz- (火狐浏览器)

-o- (旧版Opera浏览器等)

-ms- (IE浏览器 和 Edge浏览器)

只有在新的css3的实验性的属性前需要添加前缀，目前大部分常用的css3新属性都可以直接舍弃前缀。查看浏览器兼容css3属性情况请参考：caniuse网站

.wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

由于添加前缀工作都是否枯燥和没有意义，这些工作可以直接交给开发工具或者第三方的工具来自动化的实现处理。vs安装插件而vscode也有对应的自动化的插件进行自动化的添加代码前缀。

vscode 自动化插件:Autoprefixer，可以自动化的给css、less、sass文件进行自动化的添加css3前缀。

使用方法：ctrl + shift + p 然后输入 autoprefixer 选择回车执行命令。

由于此插件是对npm包：Autoprefixer的封装，所以如果使用此插件对css进行预处理需要安装好node和安装上Autoprefixer包。

# 第一步： 安装node

# 第二步：全局安装Autoprefixer插件包
$ npm i -g autoprefixer 
# 第三步： 用vacode的插件处理css文件（html文件不行）

# 如果npm安装很慢或者总是失败，请设置淘宝的npm包镜像。直接在node安装完了后执行如下命令。然后就可以happy的安装npm的第三方包了。
$ npm config set registry https://registry.npm.taobao.org  

nodejs下载地址：下载

淘宝镜像地址：地址

为了解决手工书写前缀的问题，最早的一个解决方案是由Lea Verou提供的一个-prefix-free脚本。

只需要在.html文件中插入一个prefixfree.js文件（可以是文档任何地方），建议把这个脚本文件放在样式表之后。

添加这个脚本之后，使用CSS3的属性时，只需书写标准样式即可。但是这种做法将所有压力交给了客户端来处理。如此一来页面解析压力就大了，性能会打一定的折扣，并且一旦脚本加载失败，那么就会出现浏览器无法正常渲染CSS3的样式风格。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到支持。

自动化构建工具：webpack、gulp、grunt都可以实现css3属性前缀的自动化添加。在此我只演示一下gulp的应用。

gulp自动化配置和安装演示：

第一步：安装node环境（已安装，略过)

第二步：安装gulp的全局的包(已安装，略过)

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-66434-1.html