css & ecsstender [css summit 2011]

CSSAaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson

http://slideshare.net/AaronGustafson


CSS & eCSStender

CSS Summit - July 2011

Download...

eCSStender.org12

CSS & eCSStender


Download...

eCSStender.org13

CSS & eCSStender


Download...

github.com/easy-designs/eCSStender.js14

CSS & eCSStender


...collect extensions...

15

CSS & eCSStender


...collect extensions...

16

CSS & eCSStender


...include...<script type="text/javascript" src="eCSStender.js"></script><script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script><script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script><script type="text/javascript" src="eCSStender.CSS3-color.js"></script><script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script>

17

CSS & eCSStender


...and write your CSSsection,article,blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear;}section:hover,body:focus section,section:hover blockquote,body:focus blockquote { transform: rotate(-15deg);}section:hover article,body:focus article { transform: rotate(30deg);}

18

CSS & eCSStender


Need selectors?<script type="text/javascript" src="eCSStender.js"></script><script type="text/javascript" src="sizzle.js"></script><script type="text/javascript"> // <![CDATA[ eCSStender.addMethod('findBySelector',Sizzle); // ]]></script><script type="text/javascript" src="eCSStender.CSS3-selectors.js"></script>

20

CSS & eCSStender


Compound classes in IE6?p.test { color: green;}p.alt.test { color: red;}

21

CSS & eCSStender


Adjacent siblings?p + p { color: green;}

22

CSS & eCSStender


General siblings?p ~ p { color: green;}

23

CSS & eCSStender


Advanced pseudo-classes?tr { background: white;}td:empty { background: green;}

24

CSS & eCSStender


Consider border-radius#foo { border-radius: 3px;}

26

CSS & eCSStender


Consider border-radius#foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;}

27

CSS & eCSStender


Consider border-radius#foo { border-radius: 10px 5px;}

28

CSS & eCSStender


Consider border-radius#foo { -moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -o-border-radius: 10px 5px; -khtml-border-top-left-radius: 10px; -khtml-border-top-right-radius: 5px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; border-radius: 10px 5px;}

29

CSS & eCSStender


Ah, memories...#foo { padding: 10px; width: 200px; w\idth: 180px; height: 200px; heigh\t: 180px;}

/* or */

#foo { padding: 10px; width: 200px; height: 200px;}* html #foo { width: 180px; height: 180px;}

30

CSS & eCSStender


Simpli!ed CSS3?<script type="text/javascript" src="eCSStender.js"></script><script type="text/javascript" src="eCSStender.CSS3-backgrounds-and-borders.js"></script><script type="text/javascript" src="eCSStender.CSS3-transforms.js"></script><script type="text/javascript" src="eCSStender.CSS3-color.js"></script><script type="text/javascript" src="eCSStender.CSS3-transitions.js"></script>

31

CSS & eCSStender


Yup!section,article,blockquote { border-radius: 10px; box-shadow: 0 0 15px 1px #000; color: rgb(255, 255, 255); transform-origin: 50% 50%; transition: all 0.5s linear;}section:hover,body:focus section,section:hover blockquote,body:focus blockquote { transform: rotate(-15deg);}section:hover article,body:focus article { transform: rotate(30deg);}

32

http://ecsstender.org/demos/spoon/



CSS & eCSStender


Valid extension of CSS

-prefix-

34

CSS & eCSStender


Browser vendors do it

-webkit--moz- -o--ms-

35

THE FUTURE OF CSS

CSS & eCSStender


Pointless, but possible.bowling-alley img { -easy-physics-fill: lead;}.beach img { -easy-physics-fill: rubber;}.disney img { -easy-physics-fill: helium;}

38

http://ecsstender.org/demos/physics/



CSS & eCSStender


Step 1: Register extensions

Register

40

CSS & eCSStender


Inspect<html>

CSS

Step 2: Find stylesheets

41

CSS & eCSStender


Step 3: Collect the rules

CollectCSS

42

CSS & eCSStender


Step 4: parse process

Process

&

43

CSS & eCSStender


Step 5: Trigger extensions

44

CSS & eCSStender


๏ Dean Edward’s IE scripts

๏ Selectivizr

๏ css3-mediaqueries.js

๏ Respond.js

Helping hands

BrowserPatchers

46

http://code.google.com/p/ie7-js/

http://code.google.com/p/ie7-js/

http://selectivizr.com/

http://selectivizr.com/

http://code.google.com/p/css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js

CSS & eCSStender


๏ SASS (Syntactically Awesome Stylesheets)

๏ LESS (Leaner CSS)

๏ OO CSS (purely conceptual)

Alternative syntax

BrowserPatchers

ShorthandParsers

47

http://sass-lang.com/

http://sass-lang.com/

http://lesscss.org/

http://lesscss.org/

http://oocss.org/specification.html

http://oocss.org/specification.html

CSS & eCSStender


๏ Modernizr

Capability checking

BrowserPatchers

TestingScripts

ShorthandParsers

48

http://www.modernizr.com/

http://www.modernizr.com/

CSS & eCSStender


๏ More CSS

Something new

BrowserPatchers

ShorthandParsers

CustomCSS

Parsers

TestingScripts

49

http://morecss.yellowgreen.de/

http://morecss.yellowgreen.de/

CSS & eCSStender


๏ jQuery plug-ins

๏ CSS Sandpaper

๏ CVI scripts

Ecosystem

BrowserPatchers

ShorthandParsers

CustomCSS

Parsers

TestingScripts

One-off CSSscripts libraries&

50

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

http://www.netzgesta.de/cvi/

http://www.netzgesta.de/cvi/

CSS & eCSStender


Unity!

BrowserPatchers

ShorthandParsers

CustomCSS

Parsers

TestingScripts

One-off CSSscripts libraries&

51

Let’s make something awesome!

I thought you’d never ask.

CSS & eCSStender


Pointless, but possible

53

CSS & eCSStender


Step 1: Dependencies<script type="text/javascript" src="eCSStender.js"></script><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.EasyPhysics.js"></script>

54

CSS & eCSStender


Step 1: Dependencies// jquery.EasyPhysics.jsEasyPhysics.Balloon = function( el ) { new PhysicalObject( el, // element 0, // velocity -0.5, // kinetic energy -0.1 // gravitational effect );};EasyPhysics.RubberBall = function( el ) { new PhysicalObject( el, 0, -0.8, 0.5 );};EasyPhysics.BowlingBall = function( el ) { new PhysicalObject( el, 1, -0.4, 0.9 );};

55

CSS & eCSStender


Step 2: RegistrationeCSStender.register(

);

56

CSS & eCSStender


Step 2: RegistrationeCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' },

);

57

CSS & eCSStender


Step 2: RegistrationeCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false,

);

58

CSS & eCSStender


Step 2: RegistrationeCSStender.register( { property: '-easy-physics-fill', fingerprint: 'net.easy-designs.-easy-physics' }, false, function( selector, properties ){ var $el = $(selector); switch ( properties['-easy-physics-fill'] ) { case 'helium': new EasyPhysics.Balloon( $el ); break; case 'rubber': new EasyPhysics.RubberBall( $el ); break; case 'lead': new EasyPhysics.BowlingBall( $el ); break; } });

59

CSS & eCSStender


Pointless, but possible.bowling-alley img { -easy-physics-fill: lead;}.beach img { -easy-physics-fill: rubber;}.disney img { -easy-physics-fill: helium;}

60




I love you you know.

I know.

Does the browser support border-radius?

Nope.

isSupported()

CSS & eCSStender


isSupported()eCSStender.isSupported( 'property', 'visibility: hidden');// true

eCSStender.isSupported( 'property', 'foo: bar');// false

63

CSS & eCSStender


isSupported()eCSStender.isSupported( 'property', 'visibility', 'hidden');// true

eCSStender.isSupported( 'property', 'color', ['#000000','black','rgb(0,0,0)']);// true

64

CSS & eCSStender


isSupported()varel = document.createElement('b'),html = document.createElement('p');html.appendChild(el);

eCSStender.isSupported( 'selector', 'p b', html, el);// true

eCSStender.isSupported( 'selector', 'p ?? b', html, el);// false

65

Can you make myCSS smarter?

Of course.

CSS & eCSStender


Inline style sucks...<div style="display: none;"> <p>Some content</p></div>

67

CSS & eCSStender


...don’t do it!<div style="display: none;"> <p>Some content</p></div>

68

CSS & eCSStender


makeUniqueClass()

excerpt from :checked CSS3 Selectors extensiongithub.com/easy-designs/eCSStender.CSS3-selectors.js

(function(){ var e = eCSStender, the_class = e.makeUniqueClass(), the_regex = /:checked/, classify = function() { var inputs = document.getElementsByTagName('input'), i = inputs.length; while ( i-- ) { if ( inputs[i].checked ) { e.addClass( inputs[i], the_class ); } else { e.removeClass( inputs[i], the_class ); } } };

// ...})();

69

CSS & eCSStender


embedCSS()eCSStender.embedCSS( 'p { color: red; }', 'screen', false);// embeds the rule set in a// screen-specific stylesheet immediately

70

CSS & eCSStender


applyWeightedStyle()eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 10 );// el now has visibility: hidden set// with a specificity of 10

eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 1 );// el is not set to visible because // the specificity is not high enough

eCSStender.applyWeightedStyle( el, { 'visibility': 'visible' }, 10 );// el is now “visible” because the specificity// is equal to the prior specificity

eCSStender.applyWeightedStyle( el, { 'visibility': 'hidden' }, 100 );// el is now “hidden” again because the// specificity is greater than the prior one

71

CSS & eCSStender


excerpt from CSS3 Selectors extensiongithub.com/easy-designs/eCSStender.CSS3-selectors.js

As "exible as possiblefunction embed( selector, properties, medium ){ var style_block = '', prop; for ( prop in properties ) { if ( eCSStender.isInheritedProperty( properties, prop ) ) { continue; }; style_block += prop + ':' + properties[prop] + ';'; } if ( style_block != EMPTY ) { eCSStender.embedCSS( selector + '{' + style_block + '}', medium ); }}

72

CSS & eCSStender


excerpt from CSS3 Selectors extensiongithub.com/easy-designs/eCSStender.CSS3-selectors.js

As "exible as possiblefunction inline( selector, properties, medium, specificity ) { if ( medium != 'screen' ){ return; } try { var $els = $( selector ), i = $els.length; while ( i-- ) { eCSStender.applyWeightedStyle( $els[i], properties, specificity ); } $els = null; } catch(e) { // throw new Error( LIB_ERROR + selector ); }}

73

CSS & eCSStender


excerpt from :checked CSS3 Selectors extensiongithub.com/easy-designs/eCSStender.CSS3-selectors.js

As "exible as possibleeCSStender.register( // ... function( selector, properties, medium, specificity ) { var calc = 'p:nth-child(2n+1)', d = div.cloneNode(true), p = para.cloneNode(true), func = inline; d.appendChild( p ); // embedding is the way to go if ( ( eCSStender.isSupported( 'selector', 'p:nth-child(odd)', d, p ) && ! eCSStender.isSupported( 'selector', calc, d, p ) && selector.match( /:nth-child$\s*(?:even|odd)\s*$/ ) != null ) || eCSStender.isSupported( 'selector', calc, d, p ) ) { func = embed; } func( selector, properties, medium, specificity ); return func; });

74

CSS & eCSStender


addRules()var style = eCSStender.embedCSS( 'p { color: red; }', 'screen', false);

// ...

eCSStender.addRules( style, 'p { color: blue; }');

75

Can you look something up for me?

No problemo.

CSS & eCSStender


lookup()var matches = eCSStender.lookup( { selector: 'h1', specificity: { min: 0, max: 2 } }, '*');// looks for rules where the// selector includes an h1 and the// specificity is between 0 and 2// e.g.// [ { medium: 'all' // selector: 'h1',// specificity: 1// properties: { color: 'red' }// }, ... ]

77

CSS & eCSStender


elementMatchesSelector()if ( eCSStender.elementMatchesSelector( el, 'div:last-child' ) ){ // do something with the div}else{ // element wasn’t what we were looking for}

78

CSS & eCSStender


matchMedia()if ( eCSStender.matchMedia( 'screen and (max-width=1024)' ) ){ // screen might be a tablet}

79

CSS & eCSStender


getCSSValue()if ( eCSStender.getCSSValue( element, 'display' ) == 'none' ){ // element is currently hidden}

80

Help make me better!

MIT Licensed

Fork: github.com/easy-designs/eCSStender.jsDiscuss: groups.google.com/group/ecsstender

CSS eCSStenderby Aaron Gustafson

Slides available athttp://slideshare.net/AaronGustafson

This presentation is licensed underCreative Commons

Attribution-Noncommercial-Share Alike 3.0

More on eCSStender:http://eCSStender.org

@eCSStender

flickr Photo Credits“Everyone loves books but I thought this was the

dullest photo i had ever taken. I guess not.“ by boltron-“Sharing” by bengrey

“Three wise monkeys” by Anderson Mancini“Chemcraft manual” by underwhelmer

“crawfordmarketcarrotman” by Rigmarole“Röck!! on the right” by Adactio

“Internals” by alexsnaps“Wood” by Joost J. Bakker IJmuiden

“Tribute to Willy Puchner's ‘The Penguins Longing’” by Curnenhttp://!ickr.com/photos/aarongustafson/galleries/72157625226185257/

&



http://creativecommons.org/licenses/by-nc-sa/3.0/us/






http://flickr.com/photos/aarongustafson/galleries/72157625226185257/

http://flickr.com/photos/aarongustafson/galleries/72157625226185257/

css & ecsstender [css summit 2011]

Technology

css section

css ecsstenderstep

ocss summit

dependencies css summit

prefixcss summit

css ecsstenderdownload

css ecsstenderpointless

leaner css oo css