浏览器前缀

1. 有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

   
   image.png

ms指是是微软
https://caniuse.com/
网站可以产看某个属性再各个浏览器是否支持。
比如flexible
绿色代表已经支持完全支持，红色代表比兼容，棕色代表需要浏览器前缀。

image.png

2. 官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）
3. 浏览器支持就支持，不支持就不支持css属性，为什么需要浏览器前缀了？
   比如刚推出一个新的css属性，这个属性从刚开始成为草稿，到最后变成recommend，成为正式标准，需要一个漫长的过程。
   而且这个新属性，可能以后会成为标准，也可能再漫长的成为标准的路上被否定掉了。
   case1：对于一个浏览器，我到底要不要支持这个草稿的，还没有成为标准的css属性呢？如果直接支持的话，那如果以后这个css属性被否决掉了，那就会给这个浏览器增加负担，没有人用，但是你支持这个属性。
   case2：还有一种可能就是在这个草稿最后变成了标准，但是w3c修改了名字,
   我们早期的这个浏览器还是使用的是旧名字。我们使用早期的浏览器还是得使用旧名字，使用新版本的浏览器使用新名字。或者维护，更新早期的浏览器版本，但是跑在早期浏览器上的程序还是使用的旧名字。
   考虑到以上2种情况，有一种综合一点的过度方案，w3c就提出来了浏览器扩展，也就是供应商特定扩展。
   比如浏览器给why属性前加上-ms-why，代表我这个浏览器现在支持why这个属性，但是有一天就不支持了。如果有一天why这个属性被否决掉了，浏览器如果不更新的话，这个属性还可以继续使用，如果浏览器在否决后更新，会把why这个属性移除掉，你写-ms-why也没有任何效果。
   第二种，变成标准，但是把名字该到了，比如以前是-ms-why，浏览器看到后，就会把这个名字解析成成hy，然后做对应处理。

总结：浏览器前缀是在某个属性没有成为标准的过程种，给这个属性的一种过度方案。

比如flex布局：

image.png

如果flex需要适配ie10-11的时候，就要加浏览器前缀了
开发IE10的时候，虽然已经提出flex布局了，但是还没有成为标准，你要使用的话，就添加前缀-ms-
display:-ms-flex;浏览器前缀不一定给属性前面加，给值前面加也可以。
4.上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用
 -o-、-xv-：Opera等
 -ms-、mso-：IE等
 -moz-：Firefox等
 -webkit-：Safari、Chrome，edge等
他们三个都是基于webkit内核的，chrom是blink内核，但是blink也是从webkit内核里面分支出来的，做了进一步扩展开发出来的。

1.PNG 4.PNG

5. 从图片可以知道如果flex需要适配ie10-11的时候，就要加浏览器前缀了，但是不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀。
   我们用webpack打包的时候，会生成一个文件, 里面表示我们需要适配哪些浏览器，它会使用一些插件，来caniuse这个网站上来查，在你需要适配这些浏览器的情况下，哪些我们的css属性需要加浏览器前缀，哪些不需要加，它会自动帮我们查好。打包的时候，会自动加上这些浏览器前缀。
   .browserslistrc

> 1%
last 2 versions
not dead
not ie 11