css - 浏览器兼容性问题？

问题描述

问 题

我刚接触浏览器兼容性，有几点不太明白
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.如果考虑到浏览器兼容问题，那我写的每个属性不都要去查一下哪些浏览器支持吗，怎么记得过来啊？

解决方案

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属性的兼容性～～～～程序猿不就是那么苦逼

这篇关于css - 浏览器兼容性问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！