1 / 38

浏览器增强和差异化

浏览器增强和差异化. 知识搜索部 梁东杰 liangdongjie@baidu.com. 修改时间：2012.7.19. 关于我. 梁东杰 知识搜索部 (KS) 资深研发工程师 曾参与产品：空间、百科、旅游、相册 参与项目：社区前端开发方案、 FIS （百度前端集成解决方案） 当前关注：前端开发自动化 Email ： nodiseal@gmail.com Twitter: @nodiseal Weibo ： @nedj. 浏览器增强和差异化. 方案 目标 为推动CSS3应用 开发的一套 跨浏览器 增强和差异的方案.

taji
Download Presentation

浏览器增强和差异化

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 浏览器增强和差异化 知识搜索部 梁东杰 liangdongjie@baidu.com 修改时间：2012.7.19

  2. 关于我 • 梁东杰 知识搜索部(KS) 资深研发工程师 • 曾参与产品：空间、百科、旅游、相册 • 参与项目：社区前端开发方案、FIS（百度前端集成解决方案） • 当前关注：前端开发自动化 • Email：nodiseal@gmail.com • Twitter: @nodiseal Weibo：@nedj

  3. 浏览器增强和差异化 方案目标 为推动CSS3应用 开发的一套 跨浏览器 增强和差异的方案 http://www.baidu.com

  4. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  5. CSS3真的好！

  6. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  7. 1. CSS3 >> 变形、动画很酷 • 变换 transition • 变形 transform • 动画 animation [demo]

  8. 1. CSS3 >> 图形修饰功能够震撼 • 透明 • 背景渐变 • 盒子效果：圆角、阴影 • 文字效果：截断、阴影 [demo]

  9. 1. CSS3 >> 细节交互脚本的终结者 • 状态伪类 :hover/:focus /:active • 容器控制 min/max-width • 定位 position:fixed [demo]

  10. 1. CSS3 >> 模板hack都可以靠边站 • 结构匹配 :nth-child系列 [demo]

  11. 1. CSS3 >> 终端适配很简单 • 终端条件处理 mediaQuery

  12. 1. CSS3 >> 轻松应乎普通开发 传统关键词：切图、改HTML、写JS、私有语法、用Hack、需求改到头大

  13. 可是浏览器环境很糟呀！

  14. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  15. 2. 浏览器限制 >> 浏览器分布 某产品5月份情况 注：不同产品比例不一样，仅供参考

  16. 2. 浏览器限制 >> CSS3环境 • IE6~8的落后 • bug一堆 • 不支持的多了去了 • hack横飞 • 现代浏览器的前缀 -prefix- • IE9伪现代 • -border-image/-muti-columns

  17. 2. 浏览器限制 >> 低端浏览器 • 优雅降级？不易降呀 • 图形修饰、动画类可以忽略 • 选择器类，影响可用性 • 低端浏览器增强很重要 • 解决差异问题依然值得重视 • 可用性不可忽略 • 差异化或许不可避免

  18. 不怕，有它呢！

  19. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  20. 3. 增强开发工具 >> 浏览器增强实体产出 cs增强开发工具 ColorStone七彩石，意为弥补浏览器不足 目标浏览器：IE6/7/8/9; FF/Chrome,Safari/Opera

  21. 3. 增强开发工具 >> 浏览器增强实体产出 • 解铃还须系铃人 • 用CSS解决CSS的问题 • DOM操作友好 • 100％ 纯CSS3，不加料 • 保证可用性，微有差异

  22. 3. 增强开发工具 >> 使用方式 安装/启动 开发 修改代码/实时查看效果 发布 打包发布 npm cs node –e “require(‘cs’)”

  23. 3. 增强开发工具 >> 开发体验很重要 • 只关注最新标准 • 无附加的语法 • 自动编译，无需操作/等待 • 友好语法提醒

  24. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  25. 4. 功能介绍 >> 高端浏览器的差异抹平 • 私有前缀（-prefix-）

  26. 4. 功能介绍 >> IE系列的功能增强 • 选择器类 对比：ie7.js • 图形修饰类 对比：CSS3PIE • 动画/变形/布局类

  27. 4. 功能介绍 >> 标准化hack语法 • 语义化，易理解 • -ie6/-ie7/-ie8/-ie9/-ms/-moz/-webkit/-o • 编译生成，顺序无所谓了

  28. 4. 功能介绍 >> 语义提醒 • 语法正确性 • 兼容支持

  29. 目录 1. CSS3 -- 让你眼前一亮2. 浏览器限制 -- 理想与现实3. 增强开发工具 -- 为我所用4. 功能介绍 -- 细数家珍 5. 技术实现 -- 众妙之门 http://www.baidu.com

  30. 5. 技术实现 >> 模块介绍 • 基于Node的编译工具 • 将CSS3代码编译输出多份不同浏览器的兼容代码 • 运行时框架 • 用于IE类的支持 • 本地调试服务器 • 开发流程辅助

  31. 5. 技术实现 >> 系统运行流程 CSS3代码开发 【开发】 代码被编译成多份代码 浏览器按需读取自己的资源文件 【发布】 【展现】 运行框架支持IE的实现 【展现】

  32. 5. 技术实现 >> 插件化 方便定制 • 编译框架的插件化 • 运行时框架插件化

  33. 5. 技术实现 >> IE兼容思路 采用专有属性及JS扩展等技术手段，，让老版本的浏览器(如：IE6)支持更新的CSS标准效果。 用到技术： • 编译 • 滤镜 • Expression • htc方式 • 轮询

  34. 5. 技术实现 >> DOM操作友好 • 结构变化：添/删/移动 • 属性变化 • 样式变化

  35. 5. 技术实现 >> 性能保障 • 动态标识属性 • 无需遍历 • 有索引的效率当能不一样 • 插件入口控制 • 轮训控制 （TODO 补充数据）

  36. 5. 技术实现 >> 回顾我们的优势 • 原生CSS3语法 • DOM修改友好 • 更可靠的性能（编译期优化） • 支持较全面

  37. Q&A http://www.baidu.com

  38. 谢谢 http://www.baidu.com

More Related