Sencha SDK Tools简介：IE6上也可以用CSS3？

自我介绍我叫张鑫，微博是 weibo.com/sp42 Ext 中文网： ajaxjs.com 熟悉 Web 前端开发、 JavaScript

标题 Sencha SDK Tools 简介： IE6 上也可以用 CSS3 ？

下载 www.sencha.com/products/sdk-tools/

回顾 CSS v1 & v2 <p>< font size="7" face=" 黑体 ,Georgia, Arial" color="blue" > 你 </font> 今日饮左未？ </p> 关键字： FrontPage

回顾 CSS v1 & v2 层叠样式表 Cascading Style Sheets 横空出世！ /* CSS file */ p{ font-size: 10.5pt; color: blue; font-family: 黑体 ; } <link href="sencha-touch.css" type="text/css" rel="stylesheet" /> 版本： v1.0(1997) 、 v2.0/2.1( 次年 ) 、现在 CSS3.0 ，草案 -> 标准化，由 W3C 制定……

回顾 CSS v1 & v2 样式内容相分离 XHTML+CSS ，可参与布局（ layout ）代替 Table ，向“语义化”靠近。灵活的换肤机制

CSS3 时代 33 个选择器（ Selectors ） 120+ 新样式属性 3 个新 @ 规则

CSS3 工具 http://westciv.com/tools/gradients/

CSS3 工具 http://sencha.com/x/bb

一大问题：浏览器！浏览器！在国内， IE6 其恐怖的占有率依然高居不下 2011 年 06 月 14 日数字， 33.9% 全球数字 10.9%

参考 Ref. webresourcesdepot.com/html5-and-css3-browser-compatibility-chart

第二大问题：如何重构 CSS CSS3 虽带来许多新特性，依然为描述式“语言”，可见的未来也不会改变这点。伴随着越来越大的项目， CSS 也…… 发明新的 CSS 语言？不现实 JS 可以控制样式？综上所述问题， CSS 框架被提出来了—— OO 版 CSS ！—— Good idea ！

对症下药 Sass 框架 http://sass-lang.com/

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; } 编译为：

学习和了解 compass compass-style.org

学习和了解 Compass Compass 为 SASS 的超级 SASS 不是没有 CSS3 模块，但不通过 SASS 来提供 CSS3 支持，而采用 Compass 的原因在于 Compass 可提供 cross-browser 的兼容， CSS 3 ！ IE6 这些“老人家”都受益

学习和了解 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; }

实际演示初始化 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/*

网上的学习资源《 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/

小结 CSS 框架允许变量、嵌套、逻辑语句、内置函数…更多是否会复杂过头了？你可以说这些东西很复杂，却也可以说他们很有趣。我个人结论：总之，能适应项目的需求就好！存在就是合理的。

Slicer 参数 • --css[=]value, -c[=]value • --ext-dir[=]value, -d[=]value (required) • --manifest[=]value, -m[=]value • --output-dir[=]value, -o[=]value • --verbose, -v

使用 Slicer 工具例子： C:\Program Files\SenchaSDKTools-1.2.2\command>sencha slice theme -d d:\ext-4.0.2a -c D:\ext-4.0.2a\resources\css\ext-standard.css -o d:\test -v

学习和了解 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 模拟圆角，无须手写 */ }

一点启示 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.

凡 sencha 项目均用 SASS & Compass & Slicer

小结 Slicer 该技术优点：一、新思路解决现实问题。通过 Webkit 渲染数据来衍生 CSS 二、自动化工具，效率明显

小结 Slicer 该技术的限制与不足：一、与 js 框架紧密结合，且不易拆开。限定 Sencha 产品。二、生成的 CSS 可能有冗余代码三、命令行工具，无 GUI 三、非开源

EOF 谢谢大家！欢迎提出你的问题，我乐意为您解答：）我叫张鑫，微博是 weibo.com/sp42

Sencha SDK Tools简介：IE6上也可以用CSS3？

More Related Content

What's hot

Viewers also liked

Similar to Sencha SDK Tools简介：IE6上也可以用CSS3？

Sencha SDK Tools简介：IE6上也可以用CSS3？