jQuery, eCSStender & You [DevChatt 2011]

1,541 views
1,462 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, Aaron Gustafson discusses:

* Why Web designers would love eCSStender
* How eCSStender works
* How extensions can be implemented; and
* How to build extensions using jQuery

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,541
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery, eCSStender & You [DevChatt 2011]

  1. 1. jQuery,eCSStender& youAaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson
  2. 2. ?
  3. 3. ?
  4. 4. jQuery, eCSStender & youDownload... eCSStender.orgDevChatt - June 2011 12
  5. 5. jQuery, eCSStender & youDownload... eCSStender.orgDevChatt - June 2011 13
  6. 6. jQuery, eCSStender & youDownload... github.com/easy-designs/eCSStender.jsDevChatt - June 2011 14
  7. 7. jQuery, eCSStender & you...collect extensions...DevChatt - June 2011 15
  8. 8. jQuery, eCSStender & you...collect extensions...DevChatt - June 2011 16
  9. 9. jQuery, eCSStender & you...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>DevChatt - June 2011 17
  10. 10. jQuery, eCSStender & you...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); }DevChatt - June 2011 18
  11. 11. jQuery, eCSStender & youNeed 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>DevChatt - June 2011 20
  12. 12. jQuery, eCSStender & youCompound classes in IE6? p.test { color: green; } p.alt.test { color: red; }DevChatt - June 2011 21
  13. 13. jQuery, eCSStender & youAdjacent siblings? p + p { color: green; }DevChatt - June 2011 22
  14. 14. jQuery, eCSStender & youGeneral siblings? p ~ p { color: green; }DevChatt - June 2011 23
  15. 15. jQuery, eCSStender & youAdvanced pseudo-classes? tr { background: white; } td:empty { background: green; }DevChatt - June 2011 24
  16. 16. jQuery, eCSStender & youConsider border-radius #foo { border-radius: 3px; }DevChatt - June 2011 26
  17. 17. jQuery, eCSStender & youConsider border-radius #foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }DevChatt - June 2011 27
  18. 18. jQuery, eCSStender & youConsider border-radius #foo { border-radius: 10px 5px; }DevChatt - June 2011 28
  19. 19. jQuery, eCSStender & youConsider 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; }DevChatt - June 2011 29
  20. 20. jQuery, eCSStender & youAh, 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; }DevChatt - June 2011 30
  21. 21. jQuery, eCSStender & youSimpli 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>DevChatt - June 2011 31
  22. 22. jQuery, eCSStender & youYup! 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); }DevChatt - June 2011 32
  23. 23. jQuery, eCSStender & youYup! 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); }DevChatt - June 2011 32
  24. 24. jQuery, eCSStender & youValid extension of CSS -prefix-DevChatt - June 2011 34
  25. 25. jQuery, eCSStender & youBrowser vendors do it -moz- -webkit- -ms- -o-DevChatt - June 2011 35
  26. 26. THE FUTURE OF CSS
  27. 27. jQuery, eCSStender & youPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; }DevChatt - June 2011 38
  28. 28. jQuery, eCSStender & youPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; }DevChatt - June 2011 38
  29. 29. jQuery, eCSStender & youStep 1: Register extensions RegisterDevChatt - June 2011 40
  30. 30. jQuery, eCSStender & youStep 2: Find stylesheets <html> CSS InspectDevChatt - June 2011 41
  31. 31. jQuery, eCSStender & youStep 3: Collect the rules CollectDevChatt - June 2011 42
  32. 32. jQuery, eCSStender & youStep 4: parse & process ProcessDevChatt - June 2011 43
  33. 33. jQuery, eCSStender & youStep 5: Trigger extensionsDevChatt - June 2011 44
  34. 34. jQuery, eCSStender & you Helping hands๏ Dean Edward’s IE scripts๏ Selectivizr๏ css3-mediaqueries.js Browser Patchers DevChatt - June 2011 46
  35. 35. jQuery, eCSStender & you Alternative syntax๏ SASS (Syntactically Awesome Stylesheets)๏ LESS (Leaner CSS)๏ OO CSS (purely conceptual) Browser Shorthand Patchers Parsers DevChatt - June 2011 47
  36. 36. jQuery, eCSStender & you Capability checking๏ Modernizr Testing Scripts Browser Shorthand Patchers Parsers DevChatt - June 2011 48
  37. 37. jQuery, eCSStender & you Something new๏ More CSS Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers DevChatt - June 2011 49
  38. 38. jQuery, eCSStender & you Ecosystem๏ jQuery plug-ins๏ CSS Sandpaper One-off CSS๏ CVI scripts scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers DevChatt - June 2011 50
  39. 39. jQuery, eCSStender & youUnity! One-off CSS scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS ParsersDevChatt - June 2011 51
  40. 40. Let’s makesomething awesome! I thought you’d never ask.
  41. 41. jQuery, eCSStender & youPointless, but possibleDevChatt - June 2011 53
  42. 42. jQuery, eCSStender & youStep 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>DevChatt - June 2011 54
  43. 43. jQuery, eCSStender & youStep 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 ); };DevChatt - June 2011 55
  44. 44. jQuery, eCSStender & youStep 2: Registration eCSStender.register( );DevChatt - June 2011 56
  45. 45. jQuery, eCSStender & youStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, );DevChatt - June 2011 57
  46. 46. jQuery, eCSStender & youStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, false, );DevChatt - June 2011 58
  47. 47. jQuery, eCSStender & youStep 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; } });DevChatt - June 2011 59
  48. 48. jQuery, eCSStender & youPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; }DevChatt - June 2011 60
  49. 49. jQuery, eCSStender & youPointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; }DevChatt - June 2011 60
  50. 50. I love you you know. I know.
  51. 51. Does the browsersupport border-radius? Nope.isSupported()
  52. 52. jQuery, eCSStender & youisSupported() eCSStender.isSupported( property, visibility: hidden ); // true eCSStender.isSupported( property, foo: bar ); // falseDevChatt - June 2011 63
  53. 53. jQuery, eCSStender & youisSupported() eCSStender.isSupported( property, visibility, hidden ); // true eCSStender.isSupported( property, color, [#000000,black,rgb(0,0,0)] ); // trueDevChatt - June 2011 64
  54. 54. jQuery, eCSStender & youisSupported() 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 ); // falseDevChatt - June 2011 65
  55. 55. Can you make my CSS smarter? Of course.
  56. 56. jQuery, eCSStender & youInline style sucks... <div style="display: none;"> <p>Some content</p> </div>DevChatt - June 2011 67
  57. 57. jQuery, eCSStender & you...don’t do it! <div style="display: none;"> <p>Some content</p> </div>DevChatt - June 2011 68
  58. 58. jQuery, eCSStender & youmakeUniqueClass() (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.jsDevChatt - June 2011 69
  59. 59. jQuery, eCSStender & youembedCSS() eCSStender.embedCSS( p { color: red; }, screen, false ); // embeds the rule set in a // screen-specific stylesheet immediatelyDevChatt - June 2011 70
  60. 60. jQuery, eCSStender & youapplyWeightedStyle() 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 oneDevChatt - June 2011 71
  61. 61. jQuery, eCSStender & youAs 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.jsDevChatt - June 2011 72
  62. 62. jQuery, eCSStender & youAs 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.jsDevChatt - June 2011 73
  63. 63. jQuery, eCSStender & youAs 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.jsDevChatt - June 2011 74
  64. 64. jQuery, eCSStender & youaddRules() var style = eCSStender.embedCSS( p { color: red; }, screen, false ); // ... eCSStender.addRules( style, p { color: blue; } );DevChatt - June 2011 75
  65. 65. Can you looksomething up for me? No problemo.
  66. 66. jQuery, eCSStender & youlookup() 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 } // }, ... ]DevChatt - June 2011 77
  67. 67. Help make me better! MIT LicensedFork: github.com/easy-designs/eCSStender.jsDiscuss: groups.google.com/group/ecsstender
  68. 68. jQuery, eCSStender & you 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/

×