Your SlideShare is downloading. ×
0
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]
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]
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]
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]
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]
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS & eCSStender [CSS Summit 2011]

4,032

Published on

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

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
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,032
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
135
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSSAaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson
  • 2. ?
  • 3. ?
  • 4. CSS & eCSStenderDownload... eCSStender.orgCSS Summit - July 2011 12
  • 5. CSS & eCSStenderDownload... eCSStender.orgCSS Summit - July 2011 13
  • 6. CSS & eCSStenderDownload... github.com/easy-designs/eCSStender.jsCSS Summit - July 2011 14
  • 7. CSS & eCSStender...collect extensions...CSS Summit - July 2011 15
  • 8. CSS & eCSStender...collect extensions...CSS Summit - July 2011 16
  • 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. 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. 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. CSS & eCSStenderCompound classes in IE6? p.test { color: green; } p.alt.test { color: red; }CSS Summit - July 2011 21
  • 13. CSS & eCSStenderAdjacent siblings? p + p { color: green; }CSS Summit - July 2011 22
  • 14. CSS & eCSStenderGeneral siblings? p ~ p { color: green; }CSS Summit - July 2011 23
  • 15. CSS & eCSStenderAdvanced pseudo-classes? tr { background: white; } td:empty { background: green; }CSS Summit - July 2011 24
  • 16. CSS & eCSStenderConsider border-radius #foo { border-radius: 3px; }CSS Summit - July 2011 26
  • 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. CSS & eCSStenderConsider border-radius #foo { border-radius: 10px 5px; }CSS Summit - July 2011 28
  • 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. 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. 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. 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. CSS & eCSStenderValid extension of CSS -prefix-CSS Summit - July 2011 34
  • 24. CSS & eCSStenderBrowser vendors do it -moz- -webkit- -ms- -o-CSS Summit - July 2011 35
  • 25. THE FUTURE OF CSS
  • 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. CSS & eCSStenderStep 1: Register extensions RegisterCSS Summit - July 2011 40
  • 28. CSS & eCSStenderStep 2: Find stylesheets <html> CSS InspectCSS Summit - July 2011 41
  • 29. CSS & eCSStenderStep 3: Collect the rules CollectCSS Summit - July 2011 42
  • 30. CSS & eCSStenderStep 4: parse & process ProcessCSS Summit - July 2011 43
  • 31. CSS & eCSStenderStep 5: Trigger extensionsCSS Summit - July 2011 44
  • 32. CSS & eCSStender Helping hands๏ Dean Edward’s IE scripts๏ Selectivizr๏ css3-mediaqueries.js๏ Respond.js Browser Patchers CSS Summit - July 2011 46
  • 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. CSS & eCSStender Capability checking๏ Modernizr Testing Scripts Browser Shorthand Patchers Parsers CSS Summit - July 2011 48
  • 35. CSS & eCSStender Something new๏ More CSS Testing Scripts Browser Shorthand Patchers Parsers Custom CSS Parsers CSS Summit - July 2011 49
  • 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. CSS & eCSStenderUnity! One-off CSS scripts& libraries Testing Scripts Browser Shorthand Patchers Parsers Custom CSS ParsersCSS Summit - July 2011 51
  • 38. Let’s makesomething awesome! I thought you’d never ask.
  • 39. CSS & eCSStenderPointless, but possibleCSS Summit - July 2011 53
  • 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. 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. CSS & eCSStenderStep 2: Registration eCSStender.register( );CSS Summit - July 2011 56
  • 43. CSS & eCSStenderStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, );CSS Summit - July 2011 57
  • 44. CSS & eCSStenderStep 2: Registration eCSStender.register( { property: -easy-physics-fill, fingerprint: net.easy-designs.-easy-physics }, false, );CSS Summit - July 2011 58
  • 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. 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. I love you you know. I know.
  • 48. Does the browsersupport border-radius? Nope.isSupported()
  • 49. CSS & eCSStenderisSupported() eCSStender.isSupported( property, visibility: hidden ); // true eCSStender.isSupported( property, foo: bar ); // falseCSS Summit - July 2011 63
  • 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. 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. Can you make my CSS smarter? Of course.
  • 53. CSS & eCSStenderInline style sucks... <div style="display: none;"> <p>Some content</p> </div>CSS Summit - July 2011 67
  • 54. CSS & eCSStender...don’t do it! <div style="display: none;"> <p>Some content</p> </div>CSS Summit - July 2011 68
  • 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. CSS & eCSStenderembedCSS() eCSStender.embedCSS( p { color: red; }, screen, false ); // embeds the rule set in a // screen-specific stylesheet immediatelyCSS Summit - July 2011 70
  • 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. 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. 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. 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. CSS & eCSStenderaddRules() var style = eCSStender.embedCSS( p { color: red; }, screen, false ); // ... eCSStender.addRules( style, p { color: blue; } );CSS Summit - July 2011 75
  • 62. Can you looksomething up for me? No problemo.
  • 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. 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. CSS & eCSStendermatchMedia() if ( eCSStender.matchMedia( screen and (max-width=1024) ) ) { // screen might be a tablet }CSS Summit - July 2011 79
  • 66. CSS & eCSStendergetCSSValue() if ( eCSStender.getCSSValue( element, display ) == none ) { // element is currently hidden }CSS Summit - July 2011 80
  • 67. Help make me better! MIT LicensedFork: github.com/easy-designs/eCSStender.jsDiscuss: groups.google.com/group/ecsstender
  • 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/

×