渐进增强

基于CSS3的浏览器分级策略

Ctrip 2010.09 VS 2011.09

Ctrip 2010.09 VS 2011.09

IE6CountDown.com

Rendering Engine & CSS3 Hack

• Standard
• Trident: -ms- /* IE */
• Gecko: -moz- /* Firefox */
• Webkit: -webkit- /* Chrome/Safari */
• Kestrel: -o- /* Opera */

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

圆角Border-radius

阴影Box-shadow

渐变Gradient

渐进增强

渐进增强

渐进增强

• input[type="text"]:focus { background: -webkit-linear-gradient(top, #D1E6F8, #E8F4FF 30%); }

选择器Selector

Structural pseudo-classes

• tr:first-child / tr:first-of-type / tr:nth-child(1)
• tr:last-child / tr:last-of-type / tr:nth-last-child(1)
• tr:only-child / tr:only-of-type

分级支持

• .xxx tr { background: url(); }
• tr:first-child { background: url(); }
  tr:last-child { background: url(); }

只有一条时

• tr:only-child { background: url(); }

变形Transform

过渡Transition

渐进增强

• -webkit-transform: rotate(90deg);
• -webkit-transition: all 0.3s ease-out;

动画Animation

Animation

• -webkit-animation: animate-name 2s linear infinite;
• @-webkit-keyframes animate-name {
  0% { ... }
  40% { ... }
  100% { ... }
  }

蒙版Mask

-webkit-mask

-webkit-mask

• .xx li { -webkit-mask: url() no-repeat; }

浏览器分级策略

分级的优势

性能

HTTP请求数减少

文件体积减小

加载速度提高

文件体积

• <div class="content"></div>
• <div class="shadow"></div>

分级的优势

成本

代码结构简化

开发成本降低

维护成本降低

分级的优势

用户体验

视觉表现

交互行为

Report to the BOSS!!

• 交互/视觉设计
• 后台开发
• 测试
• 项目经理
• 产品经理

重构是一门艺术

点和点之间的关系

• “当初在做的时候想不到和现在有什么关系，但是几年后回过头来我们会发现两者存在的必然联系。我们同样不可能从现在这个点上看到将来，只有回头看时才会发现它们之间的关系。这样做从来没有让我的希望落空过，而且还彻底改变了我的生活。”

Thank You!^o^