You can put html5 and css3 to use *today*. Using some clever code and trusted techniques of progressive enhancement, you'll be creating cutting edge sites that handle older browsers appropriately.

1. Progressive Advancement
in Web8
(btw- web8 == html5 + css3)
Paul Irish
Isobar
JSConf ’10
Friday, April 23, 2010

2. Friday, April 23, 2010

3. Native is better
html5 form controls vs UI libraries
html5 drag ‘n drop vs draggable()
css transitions vs animate()
border-radius, border-image, background-size
vs using large sprites
localStorage vs cookies
Friday, April 23, 2010

4. SHIM. okay? Shim. not shiv.
Friday, April 23, 2010

5. hx, ly.
Printing, too. t l
rea
www.iecss.com/print-protector by @jon_neal
Friday, April 23, 2010

6. now
hx, ly. htm
Printing, too. t l
rea mo l5s
hiv
in
der &
niz
r!
www.iecss.com/print-protector by @jon_neal
Friday, April 23, 2010

7. How Ready Is HTML5 & CSS3?
Friday, April 23, 2010

8. Contenteditable
Friday, April 23, 2010

9. Friday, April 23, 2010

10. CSS3 Please!
Friday, April 23, 2010

11. CSS3 Helpers
border-radius.com
Friday, April 23, 2010

12. CSS3 Helpers
border-image.com
border-radius.com
Friday, April 23, 2010

13. But what if there’s no support?
Friday, April 23, 2010

14. Modernizr
Making use of tomorrow’s technologies, today!
Friday, April 23, 2010

15. Friday, April 23, 2010

16. Feature Detection
Just Detect It™
Friday, April 23, 2010

17. sni
ffin
g us
era
gent
s ==
= sn
iffin
g gl
ue
Friday, April 23, 2010

18. Friday, April 23, 2010

19. Native No Native
Implementation Implementation
. box { .no-borderradius .box {
// use border-radius // maybe less padding?
} }
if (Modernizr.borderradius == false){
// call up DD_roundies, etc.
}
Friday, April 23, 2010

20. Native No Native
Implementation Implementation
.boxshadow div { .no-boxshadow div {
box-shadow: 1px 1px 1px #666; border-bottom: 1px solid #666;
} border-right: 1px solid #777;
}
Friday, April 23, 2010

21. // geo-location bridge
function getLocation(callback){
if (getLocation.cache) return callback(getLocation.cache);
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
callback(getLocation.cache = {
"lat": position.coords.latitude,
"lon": position.coords.longitude,
"obj": position
})
});
} else {
$.getScript('//www.google.com/jsapi',function(){
callback(getLocation.cache = {
"lat": google.loader.ClientLocation.latitude,
"lon": google.loader.ClientLocation.longitude,
"obj": google.loader.ClientLocation
})
});
}
}
// usage
getLocation(function(pos){
console.log("I'm located at ",pos.lat,' and ',pos.lon);
});
Friday, April 23, 2010

22. Friday, April 23, 2010

23. OM
G it
onl ’s
y7
k!
Friday, April 23, 2010

24. We got you covered, b.
Rounded corners 2D Transformations
@font-face fonts CSS Gradients
Canvas SVG
rgba(), hsla() colors Geolocation
border-image CSS Columns
box-shadow HTML5 Forms
HTML5 Audio & Video Web Workers
CSS Animations Offline Web Apps
CSS Transitions …
Friday, April 23, 2010

25. We got you covered, b.
Rounded corners 2D Transformations webGL
@font-face fonts CSS Gradients SMIL
Canvas SVG hashchange event
rgba(), hsla() colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio & Web Workers html5 drag ‘n drop
Video
Offline Web Apps web sql database
CSS Animations
CSS Transitions
Friday, April 23, 2010

26. We got you covered, b.
Rounded corners 2D Transformations webGL
@font-face fonts CSS Gradients SMIL
Canvas SVG hashchange event
rgba(), hsla() colors Geolocation localStorage
border-image CSS Columns sessionStorage
box-shadow HTML5 Forms postMessage
HTML5 Audio &
Video
Steal me!
Web Workers html5 drag ‘n drop
Offline Web Apps web sql database
CSS Animations
CSS Transitions
Friday, April 23, 2010

27. Modernizr
http://modernizr.com
@modernizr
Yah, it’s open source. Fork it, baby.
Friday, April 23, 2010

28. dowebsitesneedtolookexactlythesameineverybrowser.com
Friday, April 23, 2010

29. dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
Friday, April 23, 2010

30. ishtml5readyyet.com
Friday, April 23, 2010

31. UP !
HU T wrong.
S y ou ’re
ishtml5readyyet.com
Friday, April 23, 2010

32. Your mother does
NOT find a website
she likes the look of,
and then opens it
another browser.
~Andy Clarke (@malarkey)
Friday, April 23, 2010

33. A Performance Policy
2 truths
1. Both you and the client want the most
responsive experience possible.
2. Everything added to the page slows it
down.
Friday, April 23, 2010

34. A Performance Policy
During IA, IxD and visual design
communicate impact of design decisions
Tell the client all browsers will not have the same
experience
It’s not worthwhile to have feature parity
Stop in the name of love
Drop in the name of performance
Friday, April 23, 2010

35. What would you prefer me to do?
Spend my time hacking around issues in
older technologies like Internet Explorer 6
or
would you like that time spent making the
site look the best that it can on better
desktop browsers, as well as on the
iPhone, iPod Touch, iPad, Blackberry and a
whole host of other mobile devices?
~Andy Clarke (@malarkey)
Friday, April 23, 2010

36. When performance is poor
There are three options:
1. Redevelop the code
2. Drop the feature
3. Redesign approach of the UI
Friday, April 23, 2010

37. Friday, April 23, 2010

38. Me:
http://paulirish.com
@paul_irish
Friday, April 23, 2010