渐进增强

基于CSS3的浏览器分级策略

Ctrip 2010.09 VS 2011.09

Ctrip 2010.09 VS 2011.09

IE6CountDown.com

Rendering Engine & CSS3 Hack

CSS3给渐进增强带来的是什么?

1

圆角Border-radius

2

阴影Box-shadow

3

渐变Gradient

渐进增强

渐进增强

渐进增强

4

选择器Selector

Structural pseudo-classes

分级支持

只有一条时

5

变形Transform

6

过渡Transition

渐进增强

7

动画Animation

Animation

8

蒙版Mask

-webkit-mask

-webkit-mask

浏览器分级策略

分级的优势

性能
HTTP请求数减少
文件体积减小
加载速度提高

文件体积

分级的优势

成本
代码结构简化
开发成本降低
维护成本降低

分级的优势

用户体验
视觉表现
交互行为

Report to the BOSS!!

重构是一门艺术

点和点之间的关系

Thank You!^o^

携程UED @点头猪
ued.ctrip.com