This document summarizes a presentation about using CSS3 features now rather than waiting for full browser support. It recommends using new CSS3 properties like fonts, shadows, gradients, and animations through various techniques including fallbacks for older browsers. Specific techniques demonstrated include @font-face, box-shadow, rgba, gradients, and Modernizr for feature detection. Examples are given of popular websites that are broken in older browsers like IE6 to argue for progressive enhancement over full backwards compatibility.

1. CSS3 NOW!
Monday 29th of November — Tech Mondays Kaho St. Lieven — Johan Ronsse
Tuesday 30 November 2010

2. Hi! I’m Johan.
Tuesday 30 November 2010

3. FLANDERS WEB VALLEY!
#introduction
Tuesday 30 November 2010

4. Netlog.com
Tuesday 30 November 2010

5. Larian Studios
Tuesday 30 November 2010

6. Kaho!
Tuesday 30 November 2010

7. I work at Netlash, a web agency
Tuesday 30 November 2010

8. Tuesday 30 November 2010

9. Tuesday 30 November 2010

10. Tuesday 30 November 2010

11. Tuesday 30 November 2010

12. Who writes CSS on a regular basis?
Tuesday 30 November 2010

13. Who uses CSS3 properties in their CSS?
Tuesday 30 November 2010

14. Fallacy
Tuesday 30 November 2010

15. Browser feature: traditional
The spec writer writes feature
The browser developer implements
The web developer implements
Visitor sees feature
Tuesday 30 November 2010

16. CSS feature: now
The web developer needs feature
Web developer hacks feature into code (with JS)
Visitor sees feature
The browser developers implement the feature (wait a few months)
The spec writers write about it in the spec (wait a few years)
Tuesday 30 November 2010

17. WEB DEV’S
RESPONSIBILITY
Advance the web!
Tuesday 30 November 2010

18. How?
USE CSS3 NOW!
Tuesday 30 November 2010

19. 1. @FONT-FACE
Tuesday 30 November 2010

20. http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
Tuesday 30 November 2010

21. Typekit.com
Tuesday 30 November 2010

22. By Jason Santa Maria
Tuesday 30 November 2010

23. By Frank Chimero
Tuesday 30 November 2010

24. Free alternatives to Typekit:
FontSquirrel Google font directory
Tuesday 30 November 2010

25. Door populariteit Typekit:
• .woff support in Firefox, coming in other browsers
• meer beschikbare fonts voor web embedding
• fonts worden herbekeken voor betere weergave op scherm (e.g.
FF META)
Tuesday 30 November 2010

26. 2. LIGHT&SHADOWS
Tuesday 30 November 2010

27. Simulate Photoshop layer styles with CSS3:
border-radius, (inset) box-shadow, opacity, rgba/hsl
Tuesday 30 November 2010

28. Box shadow demo
#element {
box-shadow: 2px 2px 6px #000;
}
#element {
box-shadow: inset 2px 2px 6px #000;
}
(Before: try to recreate shadow with images)
Tuesday 30 November 2010

29. Tuesday 30 November 2010

30. IE Fallback:
Simulate shadow with border-right and
border-bottom
Tuesday 30 November 2010

31. rgba() demo
CSS2: CSS3:
#element { #elementRGBA {
background: rgb(0,0,0); background: rgba(0,0,0,0.33);
width: 200px; width: 200px;
height: 100px; height: 100px;
margin: 20px; margin: 20px;
} }
Tuesday 30 November 2010

32. Gradients demo
#element {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca
51%, #7db9e8 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop
(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop
(100%,#7db9e8)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */
}
http://www.colorzilla.com/gradient-editor/
Tuesday 30 November 2010

33. IE Fallback:
Gradient filter/repeating PNG background/
flat color
Tuesday 30 November 2010

34. 3. ANIMATE!
(hardware accelerated)
Tuesday 30 November 2010

35. deaxon.com
Tuesday 30 November 2010

36. Great animation demo
http://www.nevermindthebullets.com
Tuesday 30 November 2010

37. IE Fallback:
Gradient filter/repeating PNG background/
flat color
Tuesday 30 November 2010

38. Use modernizr.js
(for feature detection)
http://www.modernizr.com/
Tuesday 30 November 2010

39. To end this presentation:
Some popular websites in IE6
http://www.elated.com/articles/top-30-websites-viewed-in-ie6/
Tuesday 30 November 2010

40. Twitter.com: very much broken.
Tuesday 30 November 2010

41. MSN: Can’t click lightbox. Javascript error.
Stuck on this page.
Tuesday 30 November 2010

42. Wordpress: layout borked.
Tuesday 30 November 2010

43. Flick: layout borked too.
Tuesday 30 November 2010

44. IE: the best browser to download Firefox.
(Firefox.com borked in IE6 too)
Tuesday 30 November 2010

45. CNN: politics page crashes the browser.
Tuesday 30 November 2010

46. Summary
1. Websites don’t have to look the same in every browser
2. Stop spending 5 hours debugging IE on a 20 hour project
3. Don’t spend your time creating crazy sprites and hacking
functionality into older browsers
4. Use progressively enhanced CSS3 instead :)
Tuesday 30 November 2010

47. Q&A
Tuesday 30 November 2010

48. johan@johanronsse.be
http://www.netlash.com
http://www.wolfslittlestore.be
Twitter: @wolfr_
Tuesday 30 November 2010