历史总是在某个时候重演,这不,IE6离开历史舞台(国外,市场份额不足1%了)之后,webkit内核的浏览器成了大家的心腹大患,于是各种口诛笔伐开始了,甚至比当年打击IE6更甚……

做前端最讨厌的就是
IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊。

-moz-对应
Firefox, 
-webkit-对应 Safari and Chrome
-o- for Opera
-ms- for Internet Explorer(microsoft)

标准与事实标准

最近10年,IE6对标准的支持让所有开发者都很头疼——事实上虽然在国外基本没人用了,但是在国内还远远没有
结束,到现在IE6还有40%+的市场份额——IE6垄断了浏览器市场,它就是事实上的标准,所有的网站都要首先兼容IE6然后再兼容W3C标准,于是我
们通常要为它对标准的不支持和自身的各种bug付出很多很多的时间和精力,所以你在一些页面中看到针对IE6甚至IE7的很不友好的行为或者源代码时,请
理解一下前端开发者们极度苦逼的心情吧。。。

但是现在情况发生了很大的改变,IE6死了,而另一个垄断者webkit来了:

  1. 最近几年,webkit在apple的带领下发展很快,对W3C标准的支持方面一直在和opera/firefox赛跑。
  2. 托Google
    Chrome和Chromium开源项目(基于webkit内核)的福,webkit市场份额大增,Chrome在国外已经有接近四分之一的份额了,而国内,各种“壳”浏览器的“极速”、“快速”版等都是基于chromium开发的,也算是webkit
  3. 在智能终端,iOS+Android垄断了市场,它们的内置浏览器都是基于webkit内核,于是webkit成了移动终端的No.1。

所以在前几天,2月7日,在W3C的CSS工作组的一次会议上,Firefox/Opera/微软都表示,将支持-webkit-前缀的CSS语法。

于是国外各个大牛们开始各种吐槽,包括W3C联合主席丹尼尔·格拉兹曼带头讨伐,担心webkit会阻碍开放标准的发展。。。

但是,罗马不是一日建成的:

  1. W3C联盟开发标准的流程是,会员单位发起某项提议,W3C接受后成立小组,然后开始写相关标准,经历草案、RC、建议等几个阶段后,才可以成为成熟的标准(详细流程可以查看@junchen的介绍)
  2. 浏览器对实验性的CSS属性,比如W3C的草案阶段的CSS3属性或者W3C会员自己发起的一些新功能(如之前提到的CSS3
    Region技术澳门新葡萄京官网注册,就是由Adobe发起的),会采用私有前缀-prefix-部分支持,待相关技术成熟并且浏览器能完成相应的测试用例之后,才可以去掉前缀。
  3. CSS3的各种新特性,基本各个浏览器最初都是用私有前缀来渲染——虽然现在有的最新版本的浏览器对某些属性已经不需要私有前缀了,但是对于旧版本,还是要做下向下兼容,前端开发的工作量大大增加,通常要写4种不懂的前缀。
  4. 于是出现了一些解决方案,比如LESS/SASS可以建一些能够重用的变量,还有一些类似-prefix-free的js方案。。。
  5. webkit现在成了移动终端的垄断者,一些移动网站/app开始不兼容webkit以外的浏览器。
  6. Firefox干脆开始支持某些-webkit-私有属性——最近半年陆陆续续在MDN上看到一些这方面的信息,泪流满面。。。
  7. 于是在2月7日W3C的会议上,浏览器厂商对这个问题进行了讨论,结论就是大家都支持-webkit-吧,而firefox无奈的称之为囚徒困境。。。

现在有了IE9,IE10还好些,几乎和 Chrome,Firefox
差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法:

在CSS属性能中,我们常常能看到-webkit-,-moz-之类的前缀,这种就叫做浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持。-webkit-是webkit内核的,-moz-是Firefox
Gecko内核,moz代表的是Firefox的开发商Mozilla。

结语和争论

事情演变到现在,罪魁祸首还是垄断,垄断者就成了事实上的标准,于是很多开发者为了降低开发成本会开发一些只兼容webkit的网站或应用。

但是依然对其它浏览器厂商的行为表示非常不解:

  1. 将来webkit没落了,firefox上去了,那么大家都改成支持-moz-前缀吗?这种方法解决不了根本问题啊;
  2. W3C的存在就是要提供一套标准的方案,你们既然能支持-webkit-前缀的功能,为什么支持不了标准行为呢?
  3. 向webkit妥协之后,拿什么和webkit竞争?
  4. webkit作为一个开源项目,自己希望看到这样的结果吗?

当然,对于前端开发者,我还是希望大家不要偷懒,要保证自己项目的可访问性和可用性,这是最基本的用户体验。

转载自:前端观察,

对于 IE6、IE7、IE8 进行 CSS 兼容方法可以看看这篇文章

为什么要有私有前缀呢?因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但是w3c不会为这个属性制定标准,而是要走很复杂的程序,经过很多审查。而浏览器商不愿意等那么久,他们觉得一个属性已经够成熟了,就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更,就会加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性,等到日后w3c公布了标准,border-radius的标准写法确立之后,再让新版的浏览器支持border-radius这种写法。
比方说,Chrome
10是不认border-radius这种写法的,只能用webkit-border-radius,而Chrome12就能认了。于是在写CSS的时候,这样写就能确保Chrome10和Chrome12浏览网页的时候都能够正确显示。

以下方法均在 IE6、IE7、IE8、IE9、Chrome、Firefox 中测试过,其他如 Opera
浏览器等感觉国内没什么用户的就未涉及

对进行应用开发的另外说明:

  1. 360 安全浏览器使用的是 IE7 内核,
  2. 08.22补充:今天看了看360的告别IE6站长活动,他的浏览器最近好像升级到IE8内核了,估计安全桌面内核应该也升级为 IE8了
  3. 360 安全桌面应用使用的也是 IE7 内核,
  4. 腾讯的  Qplus  桌面应用的IE模式使用的是 IE8 内核

以前对 IE9 以下兼容方法是直接在 HTML 的 head 头里面放个 IE
的兼容模式代码

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

这样做就只需要兼容IE6,IE7。但是无法通过 W3C
验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。

注意若要用此设置是不能通过 IE 特有的 HTML
浏览器判断语法的来控制的,如:

<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->

这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别

CSS兼容方法:

  • 仅 IE6 和 IE7 识别,使用 * 星号
  • 仅 IE6 识别,使用 _ 下划线区别
  • 仅 IE7 识别,使用 + 加号
  • 仅 IE8 和 IE9 识别,使用 符号
  • 仅 IE9 识别,使用 9 ,同上, 多次测试后发现无效,后面有补充
  • 仅 IE6 不能识别: !important , 
  • 全部 IE 均可识别 9 ,

使用顺序:

#test {
    color:green !important;
    color:#EEE;
    color:#0F09;
    color:#09F;
    color:#F009;
    *color:#000000;
    +color:#630;
    _color:#FF0;
}

08.22 补充:

针对IE9兼容之前的写法有问题

:root #test { color:#F00; }

这次测试发现貌似只有这样写才能真正的只让 IE9 识别

以上CSS将在 ie6 中显示 #FF0 颜色, IE6以上版本和 chrome、firefox 中显示
green,

  1. 去除 !important 后 
  2. IE6, 显示 #FF0 
  3. IE7, 显示 #630
  4. IE8, 显示 #09F
  5. IE9, 显示 #F00
  6. chrome、firefox 中显示 #EEE ,

以上的各种特殊符号对浏览器兼容基本上就够了,唯一缺憾是无法区别 chrome 和
firefox,不过还好他们两个的样式基本上差不多的,对于一些特殊的 css
属性可以添加各浏览器私有的属性前缀进行区别,但仅限部分样式有效

  • -webkit- Chrome …
  • -moz- Firefox 
  • -ms- Microsoft
  • -o- Opera

OK,对个浏览器的兼容大概 CSS
区别显示就总结到此,以后再慢慢添加具体的某些兼容方法。