Upgrade to Pro — share decks privately, control downloads, hide ads and more …

后IE6时代

kaiye
September 06, 2012

 后IE6时代

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

kaiye

September 06, 2012
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

  1. 后IE6时代+
    kaiye @ Notification 4

    View full-size slide

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

    View full-size slide

  3. March 1, 2010

    View full-size slide

  4. RIP in 中国?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 前端开发@后IE6时代

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. http abort / memory leak / ...

    View full-size slide

  13. Visual Effect++
    PNG32 & Alpha filter

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 现实总是残酷的

    View full-size slide

  18. Where We Start?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide