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 submenus on hover. CSS3 also enables styling HTML5 elements and form validation. jQuery simplifies DOM manipulation through methods like .show() and .hide(). CSS3 introduces transitions, transforms and animation capabilities with keyframe rules. The document recommends using jQuery and CSS3 together, with jQuery for interactive behaviors and CSS3 for static styles, transitions and animations. Modern frameworks like jQuery Mobile combine both for rich mobile web experiences.

1. CSS3 vs. jQuery
Prak Sophy (@psophy)

2. www.web-essentials.asia

3. www.typo3cambodia.org

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-letter
:only-of-type ...
: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

15. jQuery Validate Engine
https://github.com/posabsolute/jQuery-Validation-Engine

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) */

19. CSS3 UI pseudo-class
:valid
:invalid
:required
:optional
:out-of-range
:read-only
:read-write

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

37. http://jquerymobile.com/

39. THANK YOU!
http://kooms.info