浏览器兼容性问题？

Question

我刚接触浏览器兼容性，有几点不太明白
1.如下所示代码，-webkit-，-o-，-moz-代表不同浏览器的关于渐变属性的写法（向下兼容？）。我不明白能写出来不就代表已经实现了该属性吗？为什么不用标准的语法？

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

2.例如渐变，ie没有这种属性，在我看来没有这种属性那就注定实现不了这个效果，但是发现用ie的滤镜属性也可以达到这种效果，这是怎么想到的？而且并没有说明是ie情况下使用，怎么不会发生其他浏览器也使用了该属性呢？

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1'); 

3.如果考虑到浏览器兼容问题，那我写的每个属性不都要去查一下哪些浏览器支持吗，怎么记得过来啊？

Answer 1

1.不同版本的浏览器对CSS标准的支持程度是不同，当某个CSS属性还处于讨论阶段的时候，有些先锋的浏览器就开始实现支持这个属性，处于一种保守，兼容性，规避名称冲突的策略考虑，在名称上加上特有的浏览器特征前缀；当这个属性最后定稿写入规范后，新版本的浏览器在命名上采用标准名称；但是当采用标准名称的CSS属性运行在旧版本的浏览器上的时候，老版本的浏览就会不认识....故要采用如下写法，保持兼容性

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ 
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

CSS解析从上到下解析，浏览器为旧版本时，后面的标准写法将被忽略；浏览器为最新时，后面的标准写法将覆盖旧版本

2.每一个浏览器可能会有自己特定的CSS属性实现，而这些属性可能根本不再规范里面，连标准提议都没有，但浏览器就是实现了.....你能怎么样-我们还是要鼓掌，很多CSS特性都是这样走过的....,CSS规范可能会吸收这些特性加入到规范中，加以改造变成标准（功能相同，但是叫法上可能完全不同）
当使用标准方法不能实现，程序猿就会寻找特定浏览器下的方法～～～～鼓掌！！

3.你先用你知道的CSS属性来写（一般没有兼容性问题，或使用你已知的兼容性写法）；先要想要实现某些特性时，查询特定CSS属性的兼容性～～～～程序猿不就是那么苦逼

Answer 2

-webkit-，-o-，-moz- 这些你都知道了，，，主要是为了兼容，因为早期的某些属性在对应的浏览器中并不支持标准的写法，需要用前缀，至于为什么不支持这得问厂商了- -所以导致了现在写CSS3的新特性都要加前缀，其实随着版本的迭代很多属性都已经支持了标准写法，这个可以直接查看元素就行(woyebuzhidao,,,不过加了前缀会以前缀的为主
IE滤镜是IE专属的，其他浏览器并不会识别
现在gulp，webpack都有自动增加css前缀的工具autoprefixer，这个可以了解使用一下。IE的话，，恩，IE9+对新特性支持也还不错。

Answer 3

手写标准浏览器的代码, 借助打包工具 grunt/gulp/webpack等 搭配 autoprefixer, 就可以解决大部分CSS的兼容性问题啦。

Answer 4

大部分是出于对老版浏览器支持的考虑，比如border-radius属性，为了兼容老版浏览器就需要加入-webkit-，-moz-等兼容写法，如：
border-radius:25px;
-moz-border-radius:25px; / 老的 Firefox /

也有一小部分是不同浏览器需要不同写法才能生效，即标准写法在部分浏览器上不生效，如：
-moz-appearance:button; / Firefox /
-webkit-appearance:button; / Safari 和 Chrome /
反而不支持直接写appearance，必须带前缀才能生效。

各个属性各大浏览器兼容性及是否需要进行兼容写法，可在Can I use网站中进行查找,里面有很详细的说明。

另外，写代码的时候可以不考虑兼容性写法，写完之后直接用Autoprefixer插件进行自动补写和校正即可。
Autoprefixer Webstorm安装教程：Webstorm安装
Autoprefixer Sublime安装教程： Sublime安装