1 / 83

CSS & eCSStender [CSS Summit 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, Gustafson covers everything you would need to know to get up and running with eCSStender by: <br><br>* demonstrating why we need a tool like eCSStender <br>explaining how eCSStender works <br>* showing how painlessly extensions can be implemented; and <br>* demonstrating how to build an extension using a little jQuery.

AaronGustafson
Download Presentation

CSS & eCSStender [CSS Summit 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. CSS Aaron Gustafson Easy Designs, LLC slideshare.net/AaronGustafson

  2. ?

  3. ?

  4. CSS & eCSStender Download... eCSStender.org CSS Summit - July 2011 12

  5. CSS & eCSStender Download... eCSStender.org CSS Summit - July 2011 13

  6. CSS & eCSStender Download... github.com/easy-designs/eCSStender.js CSS 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 & eCSStender 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> CSS Summit - July 2011 20

  12. CSS & eCSStender Compound classes in IE6? p.test { color: green; } p.alt.test { color: red; } CSS Summit - July 2011 21

  13. CSS & eCSStender Adjacent siblings? p + p { color: green; } CSS Summit - July 2011 22

  14. CSS & eCSStender General siblings? p ~ p { color: green; } CSS Summit - July 2011 23

  15. CSS & eCSStender Advanced pseudo-classes? tr { background: white; } td:empty { background: green; } CSS Summit - July 2011 24

  16. CSS & eCSStender Consider border-radius #foo { border-radius: 3px; } CSS Summit - July 2011 26

  17. CSS & eCSStender Consider 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 & eCSStender Consider border-radius #foo { border-radius: 10px 5px; } CSS Summit - July 2011 28

  19. CSS & eCSStender 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; } CSS Summit - July 2011 29

  20. CSS & eCSStender 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; } CSS Summit - July 2011 30

  21. CSS & eCSStender 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> CSS Summit - July 2011 31

  22. CSS & eCSStender 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); } http://ecsstender.org/demos/spoon/ CSS Summit - July 2011 32

  23. CSS & eCSStender Valid extension of CSS -prefix- CSS Summit - July 2011 34

  24. CSS & eCSStender Browser vendors do it -webkit- -moz- -ms- -o- CSS Summit - July 2011 35

  25. THE FUTUREOF CSS

  26. CSS & eCSStender Pointless, 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 & eCSStender Step 1: Register extensions Register CSS Summit - July 2011 40

  28. CSS & eCSStender Step 2: Find stylesheets <html> Inspect CSS CSS Summit - July 2011 41

  29. CSS & eCSStender Step 3: Collect the rules Collect CSS CSS Summit - July 2011 42

  30. CSS & eCSStender Step 4: parse process & Process CSS Summit - July 2011 43

  31. CSS & eCSStender Step 5: Trigger extensions CSS Summit - July 2011 44

  32. CSS & eCSStender Helping hands ๏ Dean Edward’s IE scripts ๏ Selectivizr ๏ css3-mediaqueries.js Browser Patchers ๏ Respond.js CSS Summit - July 2011 46

  33. CSS & eCSStender Alternative syntax ๏ SASS (Syntactically Awesome Stylesheets) ๏ LESS (Leaner CSS) ๏ OO CSS (purely conceptual) Browser Patchers Shorthand Parsers CSS Summit - July 2011 47

  34. CSS & eCSStender Capability checking ๏ Modernizr Testing Scripts Browser Patchers Shorthand Parsers CSS Summit - July 2011 48

  35. CSS & eCSStender Something new ๏ More CSS Testing Scripts Browser Patchers Shorthand Parsers Custom CSS Parsers CSS Summit - July 2011 49

  36. CSS & eCSStender Ecosystem ๏ jQuery plug-ins One-off CSS scripts libraries & ๏ CSS Sandpaper ๏ CVI scripts Testing Scripts Browser Patchers Shorthand Parsers Custom CSS Parsers CSS Summit - July 2011 50

More Related