1 / 83

jQuery, eCSStender & You [DevChatt 2011]

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 [DevChatt 2011]

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 DevChatt - June 2011 12

  5. jQuery, eCSStender & you Download... eCSStender.org DevChatt - June 2011 13

  6. jQuery, eCSStender & you Download... github.com/easy-designs/eCSStender.js DevChatt - June 2011 14

  7. jQuery, eCSStender & you ...collect extensions... DevChatt - June 2011 15

  8. jQuery, eCSStender & you ...collect extensions... DevChatt - June 2011 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> DevChatt - June 2011 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); } DevChatt - June 2011 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> DevChatt - June 2011 20

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

  13. jQuery, eCSStender & you Adjacent siblings? p + p { color: green; } DevChatt - June 2011 22

  14. jQuery, eCSStender & you General siblings? p ~ p { color: green; } DevChatt - June 2011 23

  15. jQuery, eCSStender & you Advanced pseudo-classes? tr { background: white; } td:empty { background: green; } DevChatt - June 2011 24

  16. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 3px; } DevChatt - June 2011 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; } DevChatt - June 2011 27

  18. jQuery, eCSStender & you Consider border-radius #foo { border-radius: 10px 5px; } DevChatt - June 2011 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; } DevChatt - June 2011 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; } DevChatt - June 2011 30

  21. jQuery, eCSStender & you Simplifed 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. 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); } DevChatt - June 2011 32

  23. 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); } DevChatt - June 2011 32

  24. jQuery, eCSStender & you Valid extension of CSS -prefix- DevChatt - June 2011 34

  25. jQuery, eCSStender & you Browser vendors do it -webkit- -moz- -ms- -o- DevChatt - June 2011 35

  26. THE FUTUREOF CSS

  27. 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; } DevChatt - June 2011 38

  28. 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; } DevChatt - June 2011 38

  29. jQuery, eCSStender & you Step 1: Register extensions Register DevChatt - June 2011 40

  30. jQuery, eCSStender & you Step 2: Find stylesheets <html> Inspect CSS DevChatt - June 2011 41

  31. jQuery, eCSStender & you Step 3: Collect the rules Collect CSS DevChatt - June 2011 42

  32. jQuery, eCSStender & you Step 4: parse process & Process DevChatt - June 2011 43

  33. jQuery, eCSStender & you Step 5: Trigger extensions DevChatt - June 2011 44

  34. jQuery, eCSStender & you Helping hands ๏ Dean Edward’s IE scripts ๏ Selectivizr ๏ css3-mediaqueries.js Browser Patchers DevChatt - June 2011 46

  35. jQuery, eCSStender & you Alternative syntax ๏ SASS (Syntactically Awesome Stylesheets) ๏ LESS (Leaner CSS) ๏ OO CSS (purely conceptual) Browser Patchers Shorthand Parsers DevChatt - June 2011 47

  36. jQuery, eCSStender & you Capability checking ๏ Modernizr Testing Scripts Browser Patchers Shorthand Parsers DevChatt - June 2011 48

More Related