Html 5@taobao2011-04-10
拔赤-前端开发工程师 Yahoo! -present Taobao
HTML 5：
HTML 5•语义化(Semantic)•本地存储(Offline & Storage)•设备通用(Device Access)•Web Socket支持(Connectivity)•多媒体(Multimedia)•三维、图形和特效(3D/Graphics/Effects)•CSS3•…
HTML 5
HTML 5的兼容性问题
HTML 5的功能用HTML 4同样能实现？!
HTML 5和HTML 4部分功能实现差异功能Html 5Html 4文档语义化语义化标签class/id 语义的命名视频video标签用flash实现长连接Web socket轮询/flash socket增强的form表单标签支持通过js模拟实现本地存储Api支持通过cookies或flash美观的界面Css3图片+冗余标签
功能的降级兼容HTML 4HTML 5JavaScriptFlashCSS 2HTML 4JavaScriptFlashCSS 2
淘宝对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 lteIE 8]> <noscript><style>.html5-wrappers{display:none!important;}</style><divclass="ie-noscript-warning">您的浏览器禁用了脚本，请<ahref="">查看这里</a>来启用脚本!或者<ahref="/?noscript=1">继续访问</a>.</div></noscript> <![endif]-->
如果禁用了ie脚本
IE 禁用脚本访问/?noscript=1Firefox 禁用脚本Opera 禁用脚本
IE6/7/8 禁用脚本用户的选择•跟随向导启用脚本•进入html4 标签页面
Kissy 库的开发——选择性兼容低级浏览器
Kissy Editor 在高级浏览器中的拖拽文件上传
中对拖拽文件的处理
Chrome中使用transition完成动画IE中使用JavaScript完成动画
对transition特性的嗅探并做降级兼容处理
Kissy Editor优先使用html5本地存储降级使用flash完成本地存储
中本地存储的处理
TODO•继续挖掘浏览器权限•更大范围的语义增强•降级兼容老旧浏览器•More & more…
TODO: “云客服” 使用webSocket代替Ajax 轮询
TODO: 新的改版/重构项目会基于HTML 5语义的标签
Similar HTML 5 APIsJavaScript AdapterHMTL 5 native APIsHTML 4 + JavaScript + Flash…TODO: 通过JavaScript对HTML 5 进行封装
<scriptsrc=“”></script><section> <labelfor="header_search_q“>Search</label> <inputtype="search" autofocusvalue="tmp"> </label> </section浏览器嗅探并模拟html5 控件
HTML 5 form模拟出的“HTML 5”form
Experience•Efficiency•Performance
Progressive Enhancement
ref•
