CSS3 vs jQuery
1 like1,163 views
This document compares CSS3 and jQuery for selecting elements, manipulating HTML elements, and animating elements. CSS3 allows for robust element selection using pseudo-classes like :first-child and :nth-child(n). Both CSS3 and jQuery can toggle element visibility for drop-down menus. CSS3 introduces transitions, transforms and keyframe animations for animating elements, while jQuery has animation methods like .animate(), .fadeIn(), and .slideToggle(). CSS3 and jQuery can both be used to validate HTML forms, with CSS3 using pseudo-classes and jQuery using plugins. The document recommends using jQuery and CSS3 together to take advantage of their complementary capabilities.
![HTML
<input value="2010-12-01"
class="validate[required,custom[date]]"
type="text" name="date" id="date" />
<input value="too"
class="validate[required,custom[onlyLet
terNumber]]" type="text" name="special"
id="special" />](https://image.slidesharecdn.com/css3vsjquery-111116091740-phpapp01/85/CSS3-vs-jQuery-16-320.jpg)
CSS3 vs jQuery
- 1. CSS3 vs. jQuery Prak Sophy (@psophy)
- 4. CSS3? CSS3 contains just about everything that’s included in CSS2.1 2000-04-14 First Public Draft 2001-01-19 Working Draft Current Working Draft
- 5. jQuery? An open source JavaScript library Created by John Resig in 2005 Release in January 14th, 2006 at BarCampNYC Current Version jQuery v1.6.4
- 6. Selectors CSS3: :first-child :empty :last-child :target :nth-child(n) :enable :nth-of-type :display :first-of-type :not(S) :last-of-type ::first-line :only-child ::first- :only-of-type letter :root ... :empty
- 7. Selectors... jQuery: :button, :even :empty :first-child :gt :has :last-child :parent ...
- 8. HTML <ul class="menu"> <li><a href="/a/1">Menu</a> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/c">Sub-menu C</a></li> </ul> </li> </ul>
- 9. CSS3 .menu > li > ul { display: none; } .menu > li:hover > ul { display: block; }
- 10. jQuery $('.menu > li').hover( function(){ $('ul', this).show('slow'); }, function(){ $('ul', this).hide('slow'); } );
- 11. :nth-child
- 12. CSS3 .student-list tbody tr:nth-child(2n) { background: #7CEAE1; } .student-list tbody tr:nth-child(2n + 1) { background: #fcfcfc; } Or... .student-list tbody tr:nth-child(odd) { background: #7CEAE1; } .student-list tbody tr:nth-child(even) { background: #fcfcfc; }
- 13. jQuery $(".student-list tbody tr:odd").css('background', '#7CEAE1'); $(".student-list tbody tr:even").css('background', '#f5f5f5'); Or.. $(".student-list tbody tr:nth-child(2n)").css('background', '#7CEAE1'); $(".student-list tbody tr:nth-child(2n+1)").css('background', '#f5f5f5');
- 14. FORM VALIDATION
- 16. HTML <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" /> <input value="too" class="validate[required,custom[onlyLet terNumber]]" type="text" name="special" id="special" />
- 17. jQuery $("#form.id").validationEngine(); //Demo http://www.position-relative.net/creation/formValidator/
- 18. Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */
- 20. HTML … <label for="email">Email *</label> <input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" title="Please enter a valid email" required /> <p class="validation01"> <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span> <span class="valid">Thank you for entering a valid email</span> </p> …
- 21. CSS3 .validation01 { background: red; color: #fff; display: none; font-size: 12px; padding: 3px; position: absolute; right: -110px; text-align: center; top: 0; width: 100px; }
- 22. CSS3 input:focus + .validation01 { display: block; } input:focus:required:valid + .validation01 { background: green; } input:focus:required:valid + .validation01 .invalid { display: none; } input:focus:required:invalid + .validation01 .valid { display: none; }
- 23. ANIMATION
- 24. jQuery Animation Methods .animate() .slideDown .fadeIn() .slideToggle() .fadeOut() .slideUp .fadeToggle() .stop() .fadeTo() .toggle() .hide() .show()
- 25. jQuery Animate $("#example_box").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );
- 26. CSS3 Transitions transition-property: background; transition-duration: 0.3s; transition-timing-function: ease; /* Don't forget vendors prefix */ -moz-transition -webkit-transition -o-transition
- 27. CSS3 Transitions /* Shortcut */ transition: background 0.3s ease; /* Multiple properties */ transition: background 0.3s ease, width 0.3s linear; /* All properties */ transition: all 0.3s ease;
- 28. /* Understanding CSS3 Transitions */ http://goo.gl/k9EcX /* Transition with Tranform */ http://goo.gl/HB2mc http://goo.gl/KvclU
- 29. CSS3 Transform http://goo.gl/QZvVw http://goo.gl/xL2yv
- 30. CSS3 Transform transform: translate(100px, 100px); /* Don't forget vendors prefix */ -moz-transform -webkit-transform -o-transform
- 31. CSS3 Transform transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
- 32. CSS3 Animation(@) http://goo.gl/c8QJB http://goo.gl/uv33G
- 33. CSS3 Animation . The Keyframe @ Rule . animation-name . animation-duration . animation-timing-function . animation-iteration-count . animation-direction . animation-delay
- 34. CSS3 Animation @keyframes resize { 0% { padding: 0; } 50% { padding: 0 20px; background-color:rgba(255,0,0,0.2); } 100% { padding: 0 100px; background-color:rgba(255,0,0,0.9); } }
- 35. CSS3 Animation #box { animation-name: resize; animation-duration: 1s; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out; } /* Don't forget vendors prefix */ -moz-transition -webkit-transition -o-transition
- 36. TAG TEAM: jQuery with CSS3