CSS3 vs. jQueryCSS3 vs. jQueryPrak Sophy (@psophy)Prak Sophy (@psophy)

www.web-essentials.asiawww.web-essentials.asia

www.typo3cambodia.orgwww.typo3cambodia.org

CSS3?CSS3?CSS3 contains just about everything that’s included in CSS3 contains just about everything that’s included in CSS2.1CSS2.12000-04-14 2000-04-14 First Public DraftFirst Public Draft  2001-01-19 2001-01-19 Working DraftWorking DraftCurrent Working DraftCurrent Working Draft

jQuery?jQuery?

An open source JavaScript library An open source JavaScript library Created by John Resig in 2005 Created by John Resig in 2005 Release in January 14th, 2006 at BarCampNYCRelease in January 14th, 2006 at BarCampNYCCurrent Version Current Version jQuery v1.6.4jQuery v1.6.4

SelectorsSelectorsCSS3:CSS3:

:first-child:first-child:last-child:last-child:nth-child(n):nth-child(n):nth-of-type:nth-of-type:first-of-type:first-of-type:last-of-type:last-of-type:only-child:only-child:only-of-type:only-of-type:root:root:empty:empty

:empty:empty:target:target:enable:enable:display:display:not(S):not(S)::first-line::first-line::first-::first-letterletter......

Selectors...Selectors...

jQuery:jQuery::button, :button, :even:even:empty:empty:first-child:first-child:gt :gt :has :has :last-child :last-child :parent:parent......

HTMLHTML

<ul class="menu"><ul class="menu"> <li><a href="/a/1">Menu</a> <li><a href="/a/1">Menu</a> <ul> <ul> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/a">Sub-menu A</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/b">Sub-menu B</a></li> <li><a href="/a/c">Sub-menu C</a></li> <li><a href="/a/c">Sub-menu C</a></li> </ul> </ul> </li> </li> </ul> </ul>

CSS3CSS3

.menu > li > ul {.menu > li > ul { display: none; display: none; } } .menu > li:hover > ul { .menu > li:hover > ul { display: block; display: block; } }

jQueryjQuery

$('.menu > li').hover($('.menu > li').hover(function(){function(){

$('ul', this).show('slow');$('ul', this).show('slow');},},function(){function(){

$('ul', this).hide('slow');$('ul', this).hide('slow');}}

););

:nth-child:nth-child

CSS3CSS3.student-list tbody .student-list tbody tr:nth-child(2n) tr:nth-child(2n) {{

background: #7CEAE1;background: #7CEAE1; }} .student-list tbody .student-list tbody tr:nth-child(2n + 1)tr:nth-child(2n + 1) { {

background: #fcfcfc;background: #fcfcfc; }}

.student-list tbody .student-list tbody tr:nth-child(odd)tr:nth-child(odd) {{background: #7CEAE1;background: #7CEAE1;

}} .student-list tbody .student-list tbody tr:nth-child(even)tr:nth-child(even) { {

background: #fcfcfc;background: #fcfcfc; }}

Or...Or...

jQueryjQuery$(".student-list tbody $(".student-list tbody tr:oddtr:odd").css('background', '").css('background', '#7CEAE1#7CEAE1');');$(".student-list tbody $(".student-list tbody tr:eventr:even").css('background', '#f5f5f5');").css('background', '#f5f5f5');

$(".student-list tbody $(".student-list tbody tr:nth-child(2n)tr:nth-child(2n)").css('background', ").css('background', ''#7CEAE1#7CEAE1');');

$(".student-list tbody $(".student-list tbody tr:nth-child(2n+1)tr:nth-child(2n+1)").css('background', ").css('background', '#f5f5f5');'#f5f5f5');

Or..Or..

FORM VALIDATIONFORM VALIDATION

jQuery Validate EnginejQuery Validate Engine

https://github.com/posabsolute/jQuery-Validation-Enginehttps://github.com/posabsolute/jQuery-Validation-Engine

HTMLHTML<input value="2010-12-01" <input value="2010-12-01" class="validate[required,custom[date]]"class="validate[required,custom[date]]" type="text" name="date" id="date" />type="text" name="date" id="date" />

<input value="too" <input value="too" class="validate[required,custom[onlyLetclass="validate[required,custom[onlyLetterNumber]]"terNumber]]" type="text" name="special" type="text" name="special" id="special" />id="special" />

jQueryjQuery$("#form.id").validationEngine();$("#form.id").validationEngine();

//Demo//Demo http://www.position-relative.net/creation/formValidator/http://www.position-relative.net/creation/formValidator/

Using CSS3 and HTML5 Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */

CSS3 UI pseudo-classCSS3 UI pseudo-class

:valid:valid

:invalid:invalid

:required:required

:optional:optional

:out-of-range:out-of-range

:read-only:read-only

:read-write:read-write

HTMLHTML……

<label for="email">Email *</label> <label for="email">Email *</label> <input type="email" id="email" name="email" <input type="email" id="email" name="email" placeholder="e.g. ryan@example.net" placeholder="e.g. ryan@example.net" title="Please enter a valid email" title="Please enter a valid email" requiredrequired /> /> <p class="validation01"><p class="validation01">

<span class="invalid">Please enter a valid <span class="invalid">Please enter a valid email address e.g. ryan@example.com</span> email address e.g. ryan@example.com</span><span class="valid">Thank you for entering a <span class="valid">Thank you for entering a valid email</span> valid email</span>

</p></p>

……

CSS3CSS3.validation01 {.validation01 { background: red;background: red; color: #fff;color: #fff; display: none;display: none; font-size: 12px;font-size: 12px; padding: 3px;padding: 3px; position: absolute;position: absolute; right: -110px;right: -110px; text-align: center;text-align: center; top: 0;top: 0; width: 100px;width: 100px;}}

CSS3CSS3input:focus + .validation01 {input:focus + .validation01 { display: block;display: block;}}

input:focus:required:valid + .validation01 {input:focus:required:valid + .validation01 { background: green;background: green;}}

input:focus:required:valid + .validation01 .invalid input:focus:required:valid + .validation01 .invalid {{ display: none;display: none;}}

input:focus:required:invalid + .validation01 .valid input:focus:required:invalid + .validation01 .valid {{ display: none;display: none;}}

ANIMATIONANIMATION

jQuery Animation jQuery Animation MethodsMethods

.animate().animate()

.fadeIn().fadeIn()

.fadeOut().fadeOut()

.fadeToggle().fadeToggle()

.fadeTo().fadeTo()

.hide().hide()

.show().show()

.slideDown.slideDown

.slideToggle().slideToggle()

.slideUp.slideUp

.stop().stop()

.toggle().toggle()

jQuery AnimatejQuery Animate

$("#example_box").animate({$("#example_box").animate({

width: "70%",width: "70%",

opacity: 0.4,opacity: 0.4,

marginLeft: "0.6in",marginLeft: "0.6in",

fontSize: "3em",fontSize: "3em",

borderWidth: "10px"borderWidth: "10px"

}, 1500 );}, 1500 );

CSS3 TransitionsCSS3 Transitionstransition-property: background;transition-property: background;

transition-duration: 0.3s;transition-duration: 0.3s;

transition-timing-function: ease;transition-timing-function: ease;

/* Don't forget vendors prefix *//* Don't forget vendors prefix */

-moz-transition-moz-transition

-webkit-transition-webkit-transition

-o-transition-o-transition

CSS3 TransitionsCSS3 Transitions/* Shortcut *//* Shortcut */

transition: background 0.3s ease;transition: background 0.3s ease;

/* Multiple properties *//* Multiple properties */

transition: background 0.3s ease, transition: background 0.3s ease, width 0.3s linear; width 0.3s linear;

/* All properties *//* All properties */

transition: all 0.3s ease;transition: all 0.3s ease;

/* Understanding CSS3 Transitions *//* Understanding CSS3 Transitions */

http://goo.gl/k9EcXhttp://goo.gl/k9EcX

/* Transition with Tranform *//* Transition with Tranform */

http://goo.gl/HB2mchttp://goo.gl/HB2mc

http://goo.gl/KvclUhttp://goo.gl/KvclU

CSS3 TransformCSS3 Transform

http://goo.gl/QZvVw

http://goo.gl/xL2yv

CSS3 TransformCSS3 Transformtransform: translate(100px, 100px);transform: translate(100px, 100px);

/* Don't forget vendors prefix *//* Don't forget vendors prefix */

-moz-transform-moz-transform

-webkit-transform-webkit-transform

-o-transform-o-transform

CSS3 TransformCSS3 Transformtransform: translate(80px, 80px) transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); scale(1.5, 1.5) rotate(45deg);

CSS3 Animation(@) CSS3 Animation(@)

http://goo.gl/c8QJB http://goo.gl/uv33G

CSS3 Animation CSS3 Animation . The Keyframe @ Rule. The Keyframe @ Rule

. animation-name. animation-name

. animation-duration. animation-duration

. animation-timing-function. animation-timing-function

. animation-iteration-count. animation-iteration-count

. animation-direction. animation-direction

. animation-delay. animation-delay

CSS3 Animation CSS3 Animation @keyframes resize {@keyframes resize {

0% {0% {

padding: 0;padding: 0;

}}

50% {50% {

padding: 0 20px;padding: 0 20px;

background-color:rgba(255,0,0,0.2);background-color:rgba(255,0,0,0.2);

}}

100% {100% {

padding: 0 100px;padding: 0 100px;

background-color:rgba(255,0,0,0.9);background-color:rgba(255,0,0,0.9);

}}

}}

CSS3 Animation CSS3 Animation #box {#box {

animation-name: resize;animation-name: resize;

animation-duration: 1s;animation-duration: 1s;

animation-iteration-count: 4;animation-iteration-count: 4;

animation-direction: alternate;animation-direction: alternate;

animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;

}}

/* Don't forget vendors prefix *//* Don't forget vendors prefix */

-moz-transition-moz-transition

-webkit-transition-webkit-transition

-o-transition-o-transition

TAG TEAM: jQuery with CSS3TAG TEAM: jQuery with CSS3

http://jquerymobile.com/http://jquerymobile.com/

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