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

< font size="7" face=" ,Georgia, Arial" color="blue" >

FrontPage

6. CSS v1 & v2

Cascading Style Sheets

/* CSS file */

p{

font-size: 10.5pt;

color: blue;

font-family: ;

}

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

CompassCSS

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