后IE6时代

在IE6即将消失的时代，中国前端开发者能做些什么，从哪开始做？

Transcript

1. 后IE6时代+
   kaiye @ Notification 4
   

   View Slide

2. IE6 Countdown
   http://www.ie6countdown.com/
   

   View Slide

3. March 1, 2010
   

   View Slide

4. RIP in 中国?
   

   View Slide

5. RIP in 中国?
   50周后降到1%
   

   View Slide

6. 也许用不了那长时间
   • 史密达的速度让人瞠目结舌
   http://gs.statcounter.com/
   #browser_version-KR-
   monthly-200912-201204
   • WHY？
   政府法律 SEED
   开源社区 opentochoice.org
   

   View Slide

7. 唯⼀一不变的
   就是变化
   自动升级的IE
   更安全的网银
   ⼀一个爱维稳的政府:(
   鸿祎教主拯救世界？
   

   View Slide

8. 大伯(太伯) (16:47:16):
   拒绝IE6就是拒绝74%的用户，拒绝IE浏览就是拒绝99%的衣食父母，你看着办吧
   鸽子(520xiaogezi) (16:50:53):
   感谢番茄，感谢IE6－－让我地有工做，有饭食，吾露宿街头
   

   View Slide

9. 前端开发@后IE6时代
   

   View Slide

10. 未来总是美好的
    • 更少的调试时间
    • 更炫的视觉效果
    • 更爽的交互体验
    • 更强的前端架构
    

    View Slide

11. 调试时间--
    • Position is Everything
    • MSDN: Details on our CSS changes for IE7
    • IE6 a:hover 的各种BUG
    • IE6最诡异的BUG
    

    View Slide

12. http abort / memory leak / ...
    

    View Slide

13. Visual Effect++
    PNG32 & Alpha filter
    

    View Slide

14. 更爽的交互体验
    • :hover
    • position: fixed
    • background-attachment: fixed
    

    View Slide

15. 前端架构
    • Box Model的统⼀一促进
    响应式layout变革
    • 模块化CSS
    • 清浮动方法统⼀一
    • WPO新台阶
    

    View Slide

16. 后IE6时代关键前端技术
    • min-width / min-height
    • 弹性流体布局
    • :first-child / .classA.classB
    • ._class{}
    • overflow:hidden
    • 并发连接数激增对前端架构的影响
    • ::before ::after对前端技术的冲击
    

    View Slide

17. 现实总是残酷的
    

    View Slide

18. Where We Start?
    

    View Slide

19. Chrome内裤上的线头
    • 谭校长《那些被忽视的边框的边缘》
    http://km.oa.com/group/15166/articles/
    show/98785
    

    View Slide

20. 给我⼀一个支点，我可以翘起地球
    

    View Slide

21. 再加⼀一个DIV
    CSS可以实现⼀一切
    给我⼀一个支点，我可以翘起地球
    

    View Slide

22. +
    

    View Slide

23. 推动WEB向前发展
    http://movethewebforward.org/cn/
    

    View Slide

24. 推动后IE6时代变革
    • 以彼之长，攻彼之短
    filter: Alpha / Transition / Gradient / ...
    htc: DHTML behavior
    • IE7.js
    • DD_belatedPNG & DD_roundies
    

    View Slide

25. View Slide

26. See Ya
    

    View Slide