CSSAaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson
?
?
CSS & eCSStenderDownload...                         eCSStender.orgCSS Summit - July 2011                    12
CSS & eCSStenderDownload...                         eCSStender.orgCSS Summit - July 2011                    13
CSS & eCSStenderDownload...                         github.com/easy-designs/eCSStender.jsCSS Summit - July 2011           ...
CSS & eCSStender...collect extensions...CSS Summit - July 2011     15
CSS & eCSStender...collect extensions...CSS Summit - July 2011     16
CSS & eCSStender...include...   <script         type="text/javascript"   src="eCSStender.js"></script>   <script         t...
CSS & eCSStender...and write your CSS   section,   article,   blockquote {     border-radius: 10px;     box-shadow: 0 0 15...
CSS & eCSStenderNeed selectors?   <script type="text/javascript" src="eCSStender.js"></script>   <script type="text/javasc...
CSS & eCSStenderCompound classes in IE6?   p.test {     color: green;   }   p.alt.test {     color: red;   }CSS Summit - J...
CSS & eCSStenderAdjacent siblings?   p + p {     color: green;   }CSS Summit - July 2011   22
CSS & eCSStenderGeneral siblings?   p ~ p {     color: green;   }CSS Summit - July 2011   23
CSS & eCSStenderAdvanced pseudo-classes?   tr {     background: white;   }   td:empty {     background: green;   }CSS Summ...
CSS & eCSStenderConsider border-radius   #foo {     border-radius: 3px;   }CSS Summit - July 2011     26
CSS & eCSStenderConsider border-radius   #foo {     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     -o-border...
CSS & eCSStenderConsider border-radius   #foo {     border-radius: 10px 5px;   }CSS Summit - July 2011          28
CSS & eCSStenderConsider border-radius   #foo {     -moz-border-radius: 10px 5px;     -webkit-border-top-left-radius: 10px...
CSS & eCSStenderAh, memories...   #foo {     padding: 10px;     width: 200px;     width: 180px;     height: 200px;     hei...
CSS & eCSStenderSimpli ed CSS3?   <script         type="text/javascript"   src="eCSStender.js"></script>   <script        ...
CSS & eCSStenderYup!  section,  article,  blockquote {    border-radius: 10px;    box-shadow: 0 0 15px 1px #000;    color:...
CSS & eCSStenderValid extension of CSS                         -prefix-CSS Summit - July 2011              34
CSS & eCSStenderBrowser vendors do it         -moz-           -webkit-   -ms-   -o-CSS Summit - July 2011                 ...
THE FUTURE OF CSS
CSS & eCSStenderPointless, but possible   .bowling-alley img {     -easy-physics-fill: lead;   }   .beach img {     -easy-...
CSS & eCSStenderStep 1: Register extensions                         RegisterCSS Summit - July 2011              40
CSS & eCSStenderStep 2: Find stylesheets                         <html>                           CSS    InspectCSS Summit...
CSS & eCSStenderStep 3: Collect the rules                         CollectCSS Summit - July 2011             42
CSS & eCSStenderStep 4: parse & process                         ProcessCSS Summit - July 2011             43
CSS & eCSStenderStep 5: Trigger extensionsCSS Summit - July 2011       44
CSS & eCSStender    Helping hands๏   Dean Edward’s IE scripts๏   Selectivizr๏   css3-mediaqueries.js๏   Respond.js        ...
CSS & eCSStender    Alternative syntax๏   SASS (Syntactically Awesome Stylesheets)๏   LESS (Leaner CSS)๏   OO CSS (purely ...
CSS & eCSStender    Capability checking๏   Modernizr                                        Testing                       ...
CSS & eCSStender    Something new๏   More CSS                                        Testing                              ...
CSS & eCSStender    Ecosystem๏   jQuery plug-ins๏   CSS Sandpaper              One-off CSS๏   CVI scripts              scr...
CSS & eCSStenderUnity!                           One-off CSS                         scripts& libraries                   ...
Let’s makesomething awesome!       I thought you’d never ask.
CSS & eCSStenderPointless, but possibleCSS Summit - July 2011    53
CSS & eCSStenderStep 1: Dependencies   <script type="text/javascript" src="eCSStender.js"></script>   <script type="text/j...
CSS & eCSStenderStep 1: Dependencies   // jquery.EasyPhysics.js   EasyPhysics.Balloon      = function( el   ) {      new P...
CSS & eCSStenderStep 2: Registration   eCSStender.register(        );CSS Summit - July 2011    56
CSS & eCSStenderStep 2: Registration   eCSStender.register(     { property: -easy-physics-fill,        fingerprint: net.ea...
CSS & eCSStenderStep 2: Registration   eCSStender.register(     { property: -easy-physics-fill,        fingerprint: net.ea...
CSS & eCSStenderStep 2: Registration   eCSStender.register(     { property: -easy-physics-fill,        fingerprint: net.ea...
CSS & eCSStenderPointless, but possible   .bowling-alley img {     -easy-physics-fill: lead;   }   .beach img {     -easy-...
I love you you know. I know.
Does the browsersupport border-radius?              Nope.isSupported()
CSS & eCSStenderisSupported()   eCSStender.isSupported(      property,      visibility: hidden   );   // true   eCSStender...
CSS & eCSStenderisSupported()   eCSStender.isSupported(      property,      visibility,      hidden   );   // true   eCSSt...
CSS & eCSStenderisSupported()   var   el = document.createElement(b),   html = document.createElement(p);   html.appendChi...
Can you make my  CSS smarter?         Of course.
CSS & eCSStenderInline style sucks...   <div style="display: none;">     <p>Some content</p>   </div>CSS Summit - July 201...
CSS & eCSStender...don’t do it!   <div style="display: none;">     <p>Some content</p>   </div>CSS Summit - July 2011     ...
CSS & eCSStendermakeUniqueClass()   (function(){     var     e          = eCSStender,     the_class = e.makeUniqueClass(),...
CSS & eCSStenderembedCSS()   eCSStender.embedCSS(      p { color: red; },      screen,      false   );   // embeds the rul...
CSS & eCSStenderapplyWeightedStyle()   eCSStender.applyWeightedStyle(     el, { visibility: hidden }, 10 );   // el now ha...
CSS & eCSStenderAs exible as possible   function embed( selector, properties, medium )   {     var style_block = , prop;  ...
CSS & eCSStenderAs exible as possible   function inline( selector, properties, medium, specificity ) {     if ( medium != ...
CSS & eCSStenderAs exible as possible   eCSStender.register(    // ...    function( selector, properties, medium, specific...
CSS & eCSStenderaddRules()   var style = eCSStender.embedCSS(      p { color: red; },      screen,      false   );   // .....
Can you looksomething up for me?             No problemo.
CSS & eCSStenderlookup()   var matches = eCSStender.lookup(      {         selector:    h1,         specificity: { min: 0,...
CSS & eCSStenderelementMatchesSelector()   if ( eCSStender.elementMatchesSelector( el, div:last-child ) )   {     // do so...
CSS & eCSStendermatchMedia()   if ( eCSStender.matchMedia( screen and (max-width=1024) ) )   {     // screen might be a ta...
CSS & eCSStendergetCSSValue()   if ( eCSStender.getCSSValue( element, display ) == none )   {     // element is currently ...
Help make me better!              MIT LicensedFork: github.com/easy-designs/eCSStender.jsDiscuss: groups.google.com/group/...
CSS & eCSStender                     by Aaron Gustafson                     Slides available at          http://slideshare...
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
CSS & eCSStender [CSS Summit 2011]
Upcoming SlideShare
Loading in …5
×

CSS & eCSStender [CSS Summit 2011]

4,505 views

Published on

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS.

With eCSStender, when you write the rules, browsers pay attention.

In this session, Gustafson covers everything you would need to know to get up and running with eCSStender by:

* demonstrating why we need a tool like eCSStender
explaining how eCSStender works
* showing how painlessly extensions can be implemented; and
* demonstrating how to build an extension using a little jQuery.

Published in: Technology, Education
  • Be the first to comment

CSS & eCSStender [CSS Summit 2011]

  1. 1. CSSAaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson
  2. 2. ?
  3. 3. ?
  4. 4. CSS & eCSStenderDownload... eCSStender.orgCSS Summit - July 2011 12
  5. 5. CSS & eCSStenderDownload... eCSStender.orgCSS Summit - July 2011 13
  6. 6. CSS & eCSStenderDownload... github.com/easy-designs/eCSStender.jsCSS Summit - July 2011 14
  7. 7. CSS & eCSStender...collect extensions...CSS Summit - July 2011 15
  8. 8. CSS & eCSStender...collect extensions...CSS Summit - July 2011 16
  9. 9. 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>CSS Summit - July 2011 17
  10. 10. CSS & eCSStender...and write your CSS 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); }CSS Summit - July 2011 18
  11. 11. CSS & eCSStenderNeed 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>CSS Summit - July 2011 20
  12. 12. CSS & eCSStenderCompound classes in IE6? p.test { color: green; } p.alt.test { color: red; }CSS Summit - July 2011 21
  13. 13. CSS & eCSStenderAdjacent siblings? p + p { color: green; }CSS Summit - July 2011 22
  14. 14. CSS & eCSStenderGeneral siblings? p ~ p { color: green; }CSS Summit - July 2011 23
  15. 15. CSS & eCSStenderAdvanced pseudo-classes? tr { background: white; } td:empty { background: green; }CSS Summit - July 2011 24
  16. 16. CSS & eCSStenderConsider border-radius #foo { border-radius: 3px; }CSS Summit - July 2011 26
  17. 17. CSS & eCSStenderConsider border-radius #foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }CSS Summit - July 2011 27
  18. 18. CSS & eCSStenderConsider border-radius #foo { border-radius: 10px 5px; }CSS Summit - July 2011 28
  19. 19. CSS & eCSStenderConsider 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; }CSS Summit - July 2011 29
  20. 20. CSS & eCSStenderAh, memories... #foo { padding: 10px; width: 200px; width: 180px; height: 200px; height: 180px; } /* or */ #foo { padding: 10px; width: 200px; height: 200px; } * html #foo { width: 180px; height: 180px; }CSS Summit - July 2011 30
  21. 21. CSS & eCSStenderSimpli 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>CSS Summit - July 2011 31
  22. 22. CSS & eCSStenderYup! 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); } http://ecsstender.org/demos/spoon/CSS Summit - July 2011 32
  23. 23. CSS & eCSStenderValid extension of CSS -prefix-CSS Summit - July 2011 34
  24. 24. CSS & eCSStenderBrowser vendors do it -moz- -webkit- -ms- -o-CSS Summit - July 2011 35
  25. 25. THE FUTURE OF CSS
  26. 26. CSS & eCSStenderPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } http://ecsstender.org/demos/physics/CSS Summit - July 2011 38
  27. 27. CSS & eCSStenderStep 1: Register extensions RegisterCSS Summit - July 2011 40
  28. 28. CSS & eCSStenderStep 2: Find stylesheets <html> CSS InspectCSS Summit - July 2011 41
  29. 29. CSS & eCSStenderStep 3: Collect the rules CollectCSS Summit - July 2011 42
  30. 30. CSS & eCSStenderStep 4: parse & process ProcessCSS Summit - July 2011 43
  31. 31. CSS & eCSStenderStep 5: Trigger extensionsCSS Summit - July 2011 44
  32. 32. CSS & eCSStender Helping hands๏ Dean Edward’s IE scripts๏ Selectivizr๏ css3-mediaqueries.js๏ Respond.js Browser Patchers CSS Summit - July 2011 46
  33. 33. CSS & eCSStender Alternative syntax๏ SASS (Syntactically Awesome Stylesheets)๏ LESS (Leaner CSS)๏ OO CSS (purely conceptual) Browser Shorthand Patchers Parsers CSS Summit - July 2011 47
  34. 34. CSS & eCSStender Capability checking๏ Modernizr Testing Scripts Browser Shorthand Patchers Parsers CSS Summit - July 2011 48
  35. 35. CSS & eCSStender Something new๏ More CSS Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers CSS Summit - July 2011 49
  36. 36. CSS & eCSStender Ecosystem๏ jQuery plug-ins๏ CSS Sandpaper One-off CSS๏ CVI scripts scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers CSS Summit - July 2011 50
  37. 37. CSS & eCSStenderUnity! One-off CSS scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS ParsersCSS Summit - July 2011 51
  38. 38. Let’s makesomething awesome! I thought you’d never ask.
  39. 39. CSS & eCSStenderPointless, but possibleCSS Summit - July 2011 53
  40. 40. CSS & eCSStenderStep 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>CSS Summit - July 2011 54
  41. 41. CSS & eCSStenderStep 1: Dependencies // jquery.EasyPhysics.js EasyPhysics.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 ); };CSS Summit - July 2011 55
  42. 42. CSS & eCSStenderStep 2: Registration eCSStender.register( );CSS Summit - July 2011 56
  43. 43. CSS & eCSStenderStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, );CSS Summit - July 2011 57
  44. 44. CSS & eCSStenderStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, false, );CSS Summit - July 2011 58
  45. 45. CSS & eCSStenderStep 2: Registration eCSStender.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; } });CSS Summit - July 2011 59
  46. 46. CSS & eCSStenderPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } http://ecsstender.org/demos/physics/CSS Summit - July 2011 60
  47. 47. I love you you know. I know.
  48. 48. Does the browsersupport border-radius? Nope.isSupported()
  49. 49. CSS & eCSStenderisSupported() eCSStender.isSupported( property, visibility: hidden ); // true eCSStender.isSupported( property, foo: bar ); // falseCSS Summit - July 2011 63
  50. 50. CSS & eCSStenderisSupported() eCSStender.isSupported( property, visibility, hidden ); // true eCSStender.isSupported( property, color, [#000000,black,rgb(0,0,0)] ); // trueCSS Summit - July 2011 64
  51. 51. CSS & eCSStenderisSupported() var el = 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 ); // falseCSS Summit - July 2011 65
  52. 52. Can you make my CSS smarter? Of course.
  53. 53. CSS & eCSStenderInline style sucks... <div style="display: none;"> <p>Some content</p> </div>CSS Summit - July 2011 67
  54. 54. CSS & eCSStender...don’t do it! <div style="display: none;"> <p>Some content</p> </div>CSS Summit - July 2011 68
  55. 55. CSS & eCSStendermakeUniqueClass() (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 ); } } }; // ... })(); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.jsCSS Summit - July 2011 69
  56. 56. CSS & eCSStenderembedCSS() eCSStender.embedCSS( p { color: red; }, screen, false ); // embeds the rule set in a // screen-specific stylesheet immediatelyCSS Summit - July 2011 70
  57. 57. CSS & eCSStenderapplyWeightedStyle() 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 oneCSS Summit - July 2011 71
  58. 58. CSS & eCSStenderAs exible as possible function 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 ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.jsCSS Summit - July 2011 72
  59. 59. CSS & eCSStenderAs exible as possible function 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 ); } } excerpt from CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.jsCSS Summit - July 2011 73
  60. 60. CSS & eCSStenderAs exible as possible eCSStender.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; }); excerpt from :checked CSS3 Selectors extension github.com/easy-designs/eCSStender.CSS3-selectors.jsCSS Summit - July 2011 74
  61. 61. CSS & eCSStenderaddRules() var style = eCSStender.embedCSS( p { color: red; }, screen, false ); // ... eCSStender.addRules( style, p { color: blue; } );CSS Summit - July 2011 75
  62. 62. Can you looksomething up for me? No problemo.
  63. 63. CSS & eCSStenderlookup() 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 } // }, ... ]CSS Summit - July 2011 77
  64. 64. CSS & eCSStenderelementMatchesSelector() if ( eCSStender.elementMatchesSelector( el, div:last-child ) ) { // do something with the div } else { // element wasn’t what we were looking for }CSS Summit - July 2011 78
  65. 65. CSS & eCSStendermatchMedia() if ( eCSStender.matchMedia( screen and (max-width=1024) ) ) { // screen might be a tablet }CSS Summit - July 2011 79
  66. 66. CSS & eCSStendergetCSSValue() if ( eCSStender.getCSSValue( element, display ) == none ) { // element is currently hidden }CSS Summit - July 2011 80
  67. 67. Help make me better! MIT LicensedFork: github.com/easy-designs/eCSStender.jsDiscuss: groups.google.com/group/ecsstender
  68. 68. CSS & eCSStender by Aaron Gustafson Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative 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 Puchners ‘The Penguins Longing’” by Curnenhttp:// ickr.com/photos/aarongustafson/galleries/72157625226185257/

×