1 / 81

jQuery, eCSStender & you [jQuery Summit 2010]

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS.<br><br>With eCSStender, when you write the rules, browsers pay attention.<br><br>In this session, Aaron Gustafson discusses:<br><br>* Why Web designers would love eCSStender<br>* How eCSStender works<br>* How extensions can be implemented; and<br>* How to build extensions using jQuery

AaronGustafson
Download Presentation

jQuery, eCSStender & you [jQuery Summit 2010]

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery, eCSStender you & Aaron Gustafson Easy Designs, LLC slideshare.net/AaronGustafson

  2. ?

  3. ?

  4. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 12

  5. jQuery, eCSStender & you Download... eCSStender.org jQuery Summit - November 2010 13

  6. jQuery, eCSStender & you Download... github.com/easy-designs/eCSStender.js jQuery Summit - November 2010 14

  7. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 15

  8. jQuery, eCSStender & you ...collect extensions... jQuery Summit - November 2010 16

  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> jQuery Summit - November 2010 17

  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); } jQuery Summit - November 2010 18

  11. jQuery, eCSStender & you 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> jQuery Summit - November 2010 20

  12. jQuery, eCSStender & you Compound classes in IE6? p.test { color: green; } p.alt.test { color: red; } jQuery Summit - November 2010 21

  13. jQuery, eCSStender & you Adjacent siblings? p + p { color: green; } jQuery Summit - November 2010 22

  14. jQuery, eCSStender & you General siblings? p ~ p { color: green; } jQuery Summit - November 2010 23

  15. jQuery, eCSStender & you Advanced pseudo-classes? tr { background: white; } td:empty { background: green; } jQuery Summit - November 2010 24

  16. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 3px; } jQuery Summit - November 2010 26

  17. jQuery, eCSStender & you Consider border-radius #foo { -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } jQuery Summit - November 2010 27

  18. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 10px 5px; } jQuery Summit - November 2010 28

  19. jQuery, eCSStender & you 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; } jQuery Summit - November 2010 29

  20. jQuery, eCSStender & you 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; } jQuery Summit - November 2010 30

  21. jQuery, eCSStender & you Simplified 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> jQuery Summit - November 2010 31

  22. jQuery, eCSStender & you 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); } jQuery Summit - November 2010 32

  23. jQuery, eCSStender & you Valid extension of CSS -prefix- jQuery Summit - November 2010 34

  24. jQuery, eCSStender & you Browser vendors do it -webkit- -moz- -ms- -o- jQuery Summit - November 2010 35

  25. THE FUTUREOF CSS

  26. jQuery, eCSStender & you Pointless, but possible .bowling-alley img { -easy-physics-fill: lead; } .beach img { -easy-physics-fill: rubber; } .disney img { -easy-physics-fill: helium; } jQuery Summit - November 2010 38

  27. Trivia Question: Who were the co-creators of CSS? (First person to answer correctly, gets a book)

  28. jQuery, eCSStender & you Step 1: Register extensions Register jQuery Summit - November 2010 41

  29. jQuery, eCSStender & you Step 2: Find stylesheets <html> Inspect CSS jQuery Summit - November 2010 42

  30. jQuery, eCSStender & you Step 3: Collect the rules Collect CSS jQuery Summit - November 2010 43

  31. jQuery, eCSStender & you Step 4: parse process & Process jQuery Summit - November 2010 44

  32. jQuery, eCSStender & you Step 5: Trigger extensions jQuery Summit - November 2010 45

  33. jQuery, eCSStender & you Helping hands ๏ Dean Edward’s IE scripts ๏ Selectivizr ๏ css3-mediaqueries.js Browser Patchers jQuery Summit - November 2010 47

  34. jQuery, eCSStender & you Alternative syntax ๏ SASS (Syntactically Awesome Stylesheets) ๏ LESS (Leaner CSS) ๏ OO CSS (purely conceptual) Browser Patchers Shorthand Parsers jQuery Summit - November 2010 48

  35. jQuery, eCSStender & you Capability checking ๏ Modernizr Testing Scripts Browser Patchers Shorthand Parsers jQuery Summit - November 2010 49

  36. jQuery, eCSStender & you Something new ๏ More CSS Testing Scripts Browser Patchers Shorthand Parsers Custom CSS Parsers jQuery Summit - November 2010 50

More Related