The presentation was hold during the BarCamp Phnom Penh 2011.

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-
: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

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