Sencha SDK Tools简介:IE6上也可以用CSS3?
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Sencha SDK Tools简介:IE6上也可以用CSS3?

on

  • 3,087 views

[广州] 珠三角技术沙龙2011年7月 HTML5

[广州] 珠三角技术沙龙2011年7月 HTML5

Statistics

Views

Total Views
3,087
Views on SlideShare
3,087
Embed Views
0

Actions

Likes
1
Downloads
29
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha SDK Tools简介:IE6上也可以用CSS3? Presentation Transcript

  • 1. 自我介绍
    • 我叫张鑫,微博是 weibo.com/sp42
    • Ext 中文网: ajaxjs.com
    • 熟悉 Web 前端开发、 JavaScript
  • 2. 标 题 Sencha SDK Tools 简介: IE6 上也可以用 CSS3 ?
  • 3. Sencha SDK 简介
  • 4. 下载 www.sencha.com/products/sdk-tools/
  • 5. 回顾 CSS v1 & v2
    • <p>< font size=&quot;7&quot; face=&quot; 黑体 ,Georgia, Arial&quot; color=&quot;blue&quot; > 你 </font> 今日饮左未? </p>
    • 关键字: FrontPage
  • 6. 回顾 CSS v1 & v2
    • 层叠样式表 Cascading Style Sheets 横空出世!
    • /* CSS file */
    • p{
    • font-size: 10.5pt;
    • color: blue;
    • font-family: 黑体 ;
    • }
    • <link href=&quot;sencha-touch.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; />
    • 版本: v1.0(1997) 、 v2.0/2.1( 次年 ) 、现在 CSS3.0 ,草案 -> 标准化,由 W3C 制定……
  • 7. 回顾 CSS v1 & v2
    • 样式内容相分离
    • XHTML+CSS ,可参与布局( layout )代替 Table ,向“语义化”靠近。
    • 灵活的换肤机制
  • 8. CSS3 时代
    • 33 个选择器( Selectors )
    • 120+ 新样式属性
    • 3 个新 @ 规则
  • 9. CSS3 新势力!
  • 10. 圆角 阴影
  • 11. 字体阴影 渐变
  • 12. CSS3 工具 http://westciv.com/tools/gradients/
  • 13. CSS3 工具 http://sencha.com/x/bb
  • 14. 一大问题:浏览器! 浏览器!
    • 在国内, IE6 其恐怖的占有率依然高居不下
    • 2011 年 06 月 14 日数字, 33.9%
    • 全球数字 10.9%
  • 15. 参考 Ref. webresourcesdepot.com/html5-and-css3-browser-compatibility-chart
  • 16. 第二大问题:如何重构 CSS
    • CSS3 虽带来许多新特性,依然为描述式“语言”,可见的未来也不会改变这点。
    • 伴随着越来越大的项目, CSS 也……
    • 发明新的 CSS 语言?不现实
    • JS 可以控制样式?
    • 综上所述问题, CSS 框架被提出来了—— OO 版 CSS !—— Good idea !
  • 17. 对症下药
    • Sass 框架 http://sass-lang.com/
  • 18. SASS 的变量
    • $blue: #3bbfce;
    • $margin: 16px;
    • .content-navigation {
    • border-color: $blue;
    • color: darken($blue, 9%);
    • }
    • .border {
    • padding: $margin / 2;
    • margin: $margin / 2;
    • border-color: $blue;
    • }
    • .content-navigation {
    • border-color: #3bbfce;
    • color: #2b9eab;
    • }
    • .border {
    • padding: 8px;
    • margin: 8px;
    • border-color: #3bbfce;
    • }
    编译为:
  • 19. 学习和了解 compass
    • compass-style.org
  • 20. 学习和了解 Compass
    • Compass 为 SASS 的超级
    • SASS 不是没有 CSS3 模块,但不通过 SASS 来提供 CSS3 支持,而采用 Compass 的
    • 原因在于 Compass 可提供 cross-browser 的兼容, CSS 3 !
    • IE6 这些“老人家”都受益
  • 21. 学习和了解 Compass
    • $boxheight: 10em;
    • .mybox {
    • @include border-radius($boxheight/4);
    • }
    • 编译所得:
    • .mybox {
    • -webkit-border-radius: 2.5em;
    • -moz-border-radius: 2.5em;
    • -o-border-radius: 2.5em;
    • -ms-border-radius: 2.5em;
    • -khtml-border-radius: 2.5em;
    • border-radius: 2.5em;
    • }
  • 22. 实际演示
    • 初始化
    • c:>compass create .
    • 新建 test.scss 文件:
    • $blue: #3bbfce;
    • $margin: 16px;
    • .content-navigation {
    • border-color: $blue;
    • color: darken($blue, 9%);
    • }
    • .border {
    • padding: $margin / 2;
    • margin: $margin / 2;
    • border-color: $blue;
    • }
    • 编译……
    • c:>compass compile sass/*
  • 23. 网上的学习资源
    • 《 CSS 开发利器 —— Sass 相关工具框架介绍》
    • http://www.showmuch.com/article/article_1.html
    • 《用 Compass 寫 CSS 》
    • http://blog.xdite.net/?p=2097
    • 《 Sass 使用介绍》
    • http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/
    • 《 SASS/LESS 如何安装使用 – 拥抱 HTML5 》
    • http://uecss.com/sass-less-how-to-install-and-use.html
    • 《 Sass 使用介绍》
    • http://blog.meituo.net/2011/03/27/sass-%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%
    • BB%8D/
  • 24. 小结 CSS 框架
    • 允许变量、嵌套、逻辑语句、内置函数…更多
    • 是否会复杂过头了?
    • 你可以说这些东西很复杂,却也可以说他们很有趣。 我个人结论:总之,能适应项目的需求就好!存在就是合理的。
  • 25. Slicer 参数
    • • --css[=]value, -c[=]value
    • • --ext-dir[=]value, -d[=]value (required)
    • • --manifest[=]value, -m[=]value
    • • --output-dir[=]value, -o[=]value
    • • --verbose, -v
  • 26. 使用 Slicer 工具
    • 例子: C:Program FilesSenchaSDKTools-1.2.2command>sencha slice theme -d d:ext-4.0.2a -c D:ext-4.0.2aresourcescssext-standard.css -o d:test -v
  • 27. 学习和了解 Slicer
    • .mybox {
    • -webkit-border-radius: 2.5em;
    • -moz-border-radius: 2.5em;
    • -o-border-radius: 2.5em;
    • -ms-border-radius: 2.5em;
    • -khtml-border-radius: 2.5em;
    • border-radius: 2.5em;
    • /* 以上是浏览器直接 CSS3 的。 */
    • /* 若 IE6 的, Slicer 自动生成图片或 div 模拟圆角,无须手写 */
    • }
  • 28. 一点启示
    • Supporting Legacy Browsers
    • The slicing tool creates a new browser instance, which loads Ext JS and a specified CSS file. Once loaded, it parses a JavaScript file which includes every Ext JS component that needs styling (panel, window, toolbar, etc.). It then analyzes each of those components and determines the size and location of each image that needs to be sliced. It then slices each of the images, sprites them together and saves them in the location defined in the manifest.
  • 29. 凡 sencha 项目均用 SASS & Compass & Slicer
  • 30. 小结 Slicer
    • 该技术优点:
    • 一、新思路解决现实问题。通过 Webkit 渲染数据来衍生 CSS
    • 二、自动化工具,效率明显
  • 31. 小结 Slicer
    • 该技术的限制与不足:
    • 一、与 js 框架紧密结合,且不易拆开。限定 Sencha 产品。
    • 二、生成的 CSS 可能有冗余代码
    • 三、命令行工具,无 GUI
    • 三、非开源
  • 32. EOF
    • 谢谢大家!欢迎提出你的问题,我乐意为您解答:)
    • 我叫张鑫,微博是 weibo.com/sp42