html兼容性问题介绍 上Can I use查找

为什么会出现兼容性问题?

由于市面上的浏览器种类太多了, 所以对css的解析也是五花八门的,导致显示的效果并不统一,因此也就带来了兼容性问题.就好比如说同一个零件不同的厂家都有自己的一套模板,因此多多少少会有点偏差.

为什么程序员喜欢用Chrome

市面上浏览器这么多, 我们不可能做到每一个都要去兼容, 不然一个样式得打出来一堆代码.还不得头疼死, 因此,对于一些用户量一般的浏览器我们大概大概的.
并且根据世界市场权威调查机构NetMarketShare公布的2018年10月各浏览器市场占有率，可以看出Chrome的占有率达到了66.43%. 所以像我这种新手开始学前端用的浏览器也是Google Chrome.

现在说说浏览器的私有属性

这个刚开始也是让我很困惑了, 为什么一个样式前面就非要搞特殊加上一些-webkit-, -moz-, -ms-这些奇奇怪怪的东西,好好的写样式它不香吗???
这些其实就是浏览器的私有属性.是不是有点好奇为什么会出现私有属性,把前面去掉的话大家不就更方便了吗?作为程序员的我,多希望所有浏览器统一样式.
这是因为制定HTML和CSS的组织W3C的审批比较慢.打个比方:有W3C组织提出一个新属性,比如说border-radius,各个浏览器都觉得: 咦??!!听起来好像很不错,边框终于不方了,但是W3C制定标准和流程又很慢还很复杂,得等很久. 但是浏览器的竞争有这么激烈,好的当然得先拿过来用用.但是又怕W3C公布的标准有所变更,也是很头疼的一件事, 因此各个浏览器会加下自己的前缀来支持新属性. 等着W3C公布标准后再确立写法.
那么来了解下几个常用的前缀:

• -moz- 代表firefox浏览器私有属性
• -ms- 代表IE浏览器私有属性
• -webkit- 代表chrome,safari私有属性
• -o- 代表opera私有属性

对于私有属性的一些编写要注意的是把标准属性写在最后面,带有私有属性的样式写在前面.
看到这,大家会在想那我怎么知道哪些属性要写兼容模式,也不能了解到第一首资料.
Can I use就是这个网站,上面会列出什么属性需要添加前缀
但是这个也是很头疼,加前缀的属性少的话还可以,如果一大波属性都在前缀,光敲代码也敲得头皮发麻. 因此现在普遍的开始使用了Autoprefixer这个浏览器前缀插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I use的数据来决定哪些前缀是需要的.

鼠标移上去该加什么前缀都有了, 很方便的一个网站