jQuery, eCSStender & You [DevChatt 2011]
 

jQuery, eCSStender & You [DevChatt 2011]

on

  • 1,491 views

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, Aaron Gustafson discusses:

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

Statistics

Views

Total Views
1,491
Views on SlideShare
1,473
Embed Views
18

Actions

Likes
0
Downloads
14
Comments
0

2 Embeds 18

http://lanyrd.com 17
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

jQuery, eCSStender & You [DevChatt 2011] jQuery, eCSStender & You [DevChatt 2011] Presentation Transcript

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