这期场地由即将上市的当当网赞助,地点在北京市东城区东四十条第五广场C座。讨论的主题围绕IE6展开,首先是putaoshu(刘威)同学在交流会上分享《IE6的前世今生》。他总结了IE6在国内市场份额巨高不下的原因

  • Windows XP的巨大成功
  • Windows Vista的推广失败
  • 盗版很严重(蕃茄花园、雨林木风、深度等等)
  • 银行、政府、学校、医院的网站,以及公司的内部的OA、ERP等管理系统,很多仅支持IE6
  • 基于IE内核浏览器的成功
  • 其它品牌浏览器在中国推广不理想
  • 用户没有自发升级或更换浏览器这一概念
  • 习惯的力量,老网民不认可新浏览器

putaoshu指出可以消灭IE6的三大武器:浏览器厂商、客户端、政府机关和银行等,而最终核武器是Windows7的普及。他建议前端工程师不要等待,现在就可以开始作一些事情,例如:

  • 利用WEB标准开发更炫更酷的产品
  • 如果可能,告诉用户这个产品在IE6上体验不够好,也不安全,更新浏览器体验会更棒,更安全
  • 在个人网站和博客上抵制IE6
  • 当我们的产品够牛的时候,当用户数量足够多的时候,放弃对IE6的支持,如Google,Facebook已经开始行动了,我们呢?

putaoshu还汇总了IE6的常见bug(更多请访问haslayout.net

  • IE6下png图片透明
  • IE6不兼容line-height
  • IE6下DIV最小高度
  • IE6 中的最大最小宽度和高度
  • IE6 Select Bug
  • img图片元素有多余空白
  • IE6不支持position:fixed* IE6绝对定位元素的1px间距
  • Opacity(透明度)
  • Partial Click Bug(局部点击BUG)
  • Double Margin Bug(双倍margin)
  • 3px Gap Bug aka Text Jog Bug(3像素间距bug)
  • Negative Margin Bug(负边距)
  • Staircase Bug(列表阶梯bug)
  • No Auto Margin Center Pseudo-Bug(auto margin无法距中)
  • IE6 !important Ignore Bug(不支持!important)

接下来大家讨论很热烈,尤其是在如何让IE6更快灭亡议题上,群情激愤,各抒己见。有人认为应该从用户的角度去推动IE6的灭亡,而不仅仅是为了方便前端开发,有人指出个人能力太薄弱,大公司推动的力量要大得多,所以在这个事情上,大公司的态度更重要。

轮到我发言时,首先分享了一下美团用户的浏览器分布情况(2010年10月份统计信息):

  • IE 90.81% 其中IE6 47.81%、IE8 29.67%、IE7 13.14%、IE9 0.15%
  • Chrome 2.89%
  • Firefox 2.75%
  • Safari 1.61%
  • Opera 0.25%

从数据可以看出,坏消息是IE6仍然占据了浏览器的最大份额,而好消息是IE6市场占有率开始低于50%,并且这种消亡的趋势已经不可逆转。YUI最近对浏览器分级支持进行了更新,并准备在2011 Q1的时候将IE6的分级支持从A调低到C。IE6 MUST DIE!,这个日期我相信也不会太远。

有人说IE6为前端人员提供了更多的工作机会,这是不对的,即使没有IE6,前端开发的人员需求依旧很大。前端工程师不需要IE6来证明自己的价值,而相反IE6让前端开发丧失了更大的想象空间。如果没有IE6,前端可以作一些更酷的事情,可以将生产力更大的释放出来。

关于如何加速IE6加速灭亡的问题,我提出两个可以身体力行,也是目前我在实践的方案:

  1. 在公司内部系统推广,推荐同事使用更高级的浏览器,并让这些同事从中获益,比如访问内部系统更快体验更好,同时他们同样也会影响周围的朋友;
  2. 将渐进增强的理念融入到开发当中,让使用现代浏览器的用户得到更好的浏览体验。如果没有了解过渐进增强,推荐阅读《理解渐进增强(Progressive Enhancement) 》

在讨论会的第二阶段,在会议组织者的提议下,我对会上讨论涉及的问题作了一些补充。

有位女同学提到浏览器兼容性调试困难的问题,比如IE Tester有时候并不能满足需求。在美团网内部,兼容性调试采用虚拟机来解决。在服务器上安装了独立的IE6、IE7、IE8测试环境,除了可以覆盖IE浏览器系列,包括基于IE内核的360、Maxthon和TT等,还可以测试不同版本的Firefox、Chrome等主流浏览器。虚拟机群使用免费的vmware server来管理,如果之前有使用过vmware家族的产品(如vmware station, vmware fusion等),基本上可以无缝迁移,当然即使没有用过也没有关系,安装和使用都比较简单。因为各个虚拟机都是独立运行的,可以非常接近用户的实际使用环境,并且IE6和IE7都可以安装developer toolbar和http watch这样的调试工具,很方便。同时虚拟机安装在性能更强劲的服务器上,不会消耗本地的计算资源,对开发环境也没有影响。使用vmware server两年多以来,历经考验,一直都很稳定,是可以依赖的先进生产力。

有位同学提到虚拟机在使用多个本地测试环境时,不太方便。因为美团开发环境都集中在同一台开发机,每个开发环境使用apache的虚拟主机分开,所以不会产生这个问题。如果开发人员喜欢使用本地环境,可以通过使用固定IP和集中管理hosts来解决。

接下来,我演示了在美团网开发中,使用渐进增强的几个例子,包括使用了hover伪类、png图片处理和css3等。然后以YUI的reset.css为例,阐述了清除和重设浏览器默认样式在前端开发中的重要性。但css reset解决方案中没有银弹,实际开发时都要根据各公司的情况作一些裁剪和修改。中文网页的reset方案,推荐看玉伯的文章《KISSY CSS Reset 1.0》

最后分享了我在模块化开发方面的一些实践,傲游的赵锦江同学对这个主题进行了扩展。模块化开发很久以前就在Nicholas C. Zakas的《Scalable JavaScript Application Architecture》ppt中提出,而在webrebuild第四届年会上来自台湾的蒋定宇同学也有提到他在模块化开发上面做出的努力,并且相应的开发库已经在github上面释出。

美团网目前后端工程师数量远超前端工程师(美团还在征兵买马,欢迎给我简历),前端数量严重不足,导致后端工程师也要参与一些前端开发的工作。为了缓解后端的开发压力,需要给他们提供一些更方便的模块,构造页面像搭积木一样,只需要在模板输出一段html即可完成很多工作。我习惯称这些模块为widget,并把它们都放在widget命名空间下,当然使用其他名称也是OK的,影响不大。

示例:

<input type="text" data-widget="liveSearch" data-params="{type:'deal'}" />;

这表示一个提供live search功能的搜索框,它可以搜索全站的团购交易项目。其中data-widget是widget类型声明,data-params是初始化参数。 后端工程师在任意页面只需要输出这段代码即可实现即时搜索的功能,对他们来说很高效,因为不需要去学习javascript如何初始化模块或组件等知识。

这个开发方式很完美,但是问题马上就来了,各个模块之间怎么通信呢?比如用户选择了一个交易,然后需要在当前页面列出该交易所有的订单。经过认真考虑,决定引入模块化开发的思想,对代码框架作了一下改造。在美团网的具体代码中,支撑模块化开发的核心方法,是通过自定义事件实现的,依赖于YUI的CustomEvent类,可以同时在全局和非全局命名空间中使用,也可以多次初始化一个模块。

完整代码和demo 其中涉及的一些实现细节,如果有时间,我会专门作一次总结。

这次讨论会,是我参加w3ctech以来发言最多的一次,这里要鼓励一下自己的勇气。当初周裕波、崔凯、rekey、tension等人创办w3ctech交流会,目的就是让前端工程师可以有一个交流并切磋技艺的空间。很多人包括我都是带着学习的态度来参加这个会议,并从中受益良多,我在公司内部很多技术改进方案都源自于交流会上的思想碰撞。期待下次交流会可以和更多的同行交流,把前端开发事业一起向前推进。

以下照片版权归rage同学所有,更多照片见http://www.douban.com/photos/album/37904309/

putaoshu在分享ie6的前世今生
putaoshu在分享ie6的前世今生

我在发言
我在发言

注:因为vmware server没有提供在mac系统上的终端,所以mac用户需要vmware fusion或者其他非mac系统作为跳板。