后IE6时代 - Speaker Deck

Slide 1

Slide 1 text

后IE6时代+ kaiye @ Notiﬁcation 4

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

March 1, 2010

Slide 4

Slide 4 text

RIP in 中国?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

前端开发@后IE6时代

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

http abort / memory leak / ...

Slide 13

Slide 13 text

Visual Effect++ PNG32 & Alpha ﬁlter

Slide 14

Slide 14 text

更爽的交互体验 • :hover • position: ﬁxed • background-attachment: ﬁxed

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

现实总是残酷的

Slide 18

Slide 18 text

Where We Start?

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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