Html 5@taobao
2011-04-10
拔赤 - 前端开发工程师
- Yahoo!
- present Taobao
HTML 5：
• 语义化(Semantic)
• 本地存储(Offline & Storage)
• 设备通用(Device Access)
• Web Socket支持(Connectivity)
• 多媒体(Multimedia)
• 三维、图形和特效(3D/Graphics/Effects)
• CSS3
• …
HTML 5
(圆心)
HTML 5
HTML 5的兼容性问题
HTML 5的功能用HTML 4同样能实现？!
功能 Html 5 Html 4
文档语义化 语义化标签 class/id 语义的命名
视频 video标签 用flash实现
长连接 Web socket 轮询/flash socket
增强的form表单 标签支持 通过js模拟实现
本地存储 Api支持 通过cookies或flash
美观的界面 Css3 图片+冗余标签
HTML 5和HTML 4部分功能实现差异
HTML 4
JavaScript Flash CSS 2
HTML 4
JavaScript Flash CSS 2
HTML 5
功能的降级兼容
• 深入挖掘浏览器权限
• 文档语义增强
• 选择性兼容低级浏览器
淘宝对HTML5的实践
淘宝“云客服”
——深入挖掘浏览器权限
淘宝“云客服”:类似 web 旺旺的IM客户端(不兼容IE)
传统的 iframe 跨域
HTML 5 的 Cross Document Messaging 跨域
淘宝2011首页
——HTML5 的语义增强
使用HTML5标签来布局淘宝首页
让ie6/7/8 支持 HTML5 标签
<html>
<head>
<style>
figure { color:orange; }
</style>
<script>("figure");</script>
</head>
<body>
<figure>
淘宝网！
</figure>
</body>
</html>
淘宝网 ie6/7/8 禁用脚本访问量占 %+
如果ie6/7/8禁用脚本？
<!--[if lte IE 8]> <noscript>
<style>
.html5-wrappers {display:none !important;}
</style>
<div class="ie-noscript-warning">
您的浏览器禁用了脚本，请<a href="">查看这里</a>
来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript> <![endif]-->
如果禁用了 ie 脚本
IE 禁用脚本访问
/?noscript=1
Firefox 禁用脚本
Opera 禁用脚本
• 跟随向导启用脚本
• 进入 html4 标签页面
IE 6/7/8 禁用脚本用户的选择
Kissy 库的开发
——选择性兼容低级浏览器
Kissy Editor 在高级浏览器中的拖拽文件上传
中对拖拽文件的处理
Chrome中使用
transition完成动画
IE中使用JavaScript
完成动画
对transition特性的嗅探
并做降级兼容处理
Kissy Editor优先使用html5本地存储
降级使用flash完成本地存储
中本地存储的处理
•继续挖掘浏览器权限
• 更大范围的语义增强
• 降级兼容老旧浏览器
• More & more…
TODO
TODO: “云客服” 使用webSocket 代替 Ajax 轮询
TODO:
新的改版/重构项目会基于
HTML 5语义的标签
HMTL 5 native APIs
HTML 4 + JavaScript +
Flash…
JavaScript Adapter
Similar HTML 5 APIs
TODO: 通过JavaScript对 HTML 5 进行封装
<script src=“”></script>
<section>
<label for="header_search_q“>Search</label>
<input type="search" autofocus value="tmp">
</label>
</section
浏览器嗅探并模拟 html5 控件
HTML 5 form
模拟出的
“HTML 5” form
• User Experience
• Efficiency
• Performance
Progressive
Enhancement
ref
•
dev-share-for-taobao-new-homepage/
•
html#slide1
•
•
•
幻灯片编号 1
幻灯片编号 2
幻灯片编号 3
幻灯片编号 4
幻灯片编号 5
幻灯片编号 6
幻灯片编号 7
幻灯片编号 8
幻灯片编号 9
幻灯片编号 10
幻灯片编号 11
幻灯片编号 12
幻灯片编号 13
幻灯片编号 14
幻灯片编号 15
幻灯片编号 16
幻灯片编号 17
幻灯片编号 18
幻灯片编号 19
幻灯片编号 20
幻灯片编号 21
幻灯片编号 22
幻灯片编号 23
幻灯片编号 24
幻灯片编号 25
幻灯片编号 26
幻灯片编号 27
幻灯片编号 28
幻灯片编号 29
幻灯片编号 30
幻灯片编号 31
幻灯片编号 32
幻灯片编号 33
幻灯片编号 34
幻灯片编号 35
幻灯片编号 36
幻灯片编号 37
幻灯片编号 38
幻灯片编号 39
幻灯片编号 40
幻灯片编号 41
幻灯片编号 42
幻灯片编号 43
幻灯片编号 44
幻灯片编号 45
幻灯片编号 46
幻灯片编号 47
幻灯片编号 48
