Everyone is falling in love with CSS3, and no small wonder. Learn how to use popular CSS3 properties of the future while respecting the browsers of the past.

1. It’s Business Time:
Gettin’ Down With the Graceful
Degradation of CSS3
Denise R. Jacobs
The Future of Web Design London

2. #gdcss3

3. The
passionate
love affair
with CSS3
only grows
stronger over
time

4. What’s not to love?
Easier
implementation of
visual effects
Effects that
enhance the user
experience

5. As with many seemingly perfect
romances, there are issues…

6. Relationship Status:

7. Still a working draft

8. Validation (or lack thereof)

9. Uneven browser support,
Proprietary properties,
And code bloat,
Oh my!

10. Despite our most fervent
wishes otherwise…

11. Many users are still using older browsers

12. Either by force

13. Or by choice

14. oh, the horror!

15. “Do websites need
to look exactly the
same in every
browser?”

18. While looks
aren’t
everything

19. They do shape user perception
and experience

20. Compatibility is the foundation of
strong relationships

21. So, which is better,
Graceful Degradation or Progressive Enhancement?

22. * Whatever *

23. Sites need be usable and
look good to as many
people as possible.
Period.

24. (It doesn’t matter how you get there)

25. Do you want to date my browser?

26. The A-Team

27. The Motley Crew

28. While derision
towards IE6 is
justified

29. You still
should
show
a little
Love.

30. The Seduction Suite

31. CSS3 Specifications

32. Browser Compatibility Charts

33. Cross- Browser Testers

34. A bit of technique goes a long way

35. (Re)set the mood
A CSS reset insures that you are
starting from a common base point
in all browsers.

36. Leverage source order
Place browser-specific properties
ahead of standard properties.

37. Use advanced selectors
Advanced selectors are a good way
to specifically target styles for
modern browsers.

38. Create conditional comments
<!--[if gte IE 6]>
<link href="ie_stylesheet.css"
rel="stylesheet">
<![endif]-->
(place after the regular stylesheet
link to override styles)

39. Presumptions
• POSH markup
• You know your audience’s browser profile
Precautions
• Many properties are browser-specific
• Syntax differences between browser-specific
properties and the standard property
• Increase in the amount of CSS

40. Let’s Get It On

41. 8 CSS3 Properties and
Their Graceful Degradation

42. @font-face 1
• Tips & issues
– Potential font license restrictions
– Flash of unstyled text (fout)
• Browser Support
– IE requires fonts to be in EOT format

43. @font-face 1
• Graceful degradation
– Desired font should display in all
browsers. If not, fallback fonts will
display
– Extra credit: image replacement
through conditional comments

44. @font-face 1
@font-face {
font-family: “Colaborate Light";
src: url(ColabLig.eot);
src: url(ColabLig.ttf) format("truetype");
}
Then later in the stylesheet:
h2 {font: 1.58em/1.45em “Colaborate
Light”, sans-serif;}

45. @font-face 1
In modern browsers In IE 8: fallback font

46. 2 text-shadow
• Tips & issues
– Can help accentuate text
– No impact on accessibility
• Browser Support
– IE does not support

47. 2 text-shadow
• Graceful degradation
– If it doesn’t show up, that’s okay
– Extra credit: image replacement

48. 2 text-shadow
#nav-primary a.current {
text-shadow:1px 1px 0 rgba(0,0,0,.5);
}

49. 2 text-shadow
In modern browsers In IE 7 without text shadow

50. border-radius 3
• Tips & issues
– Different syntax for mozilla, webkit,
and opera browsers
• Browser Support
– IE does not support, Opera: 10.5 only

51. border-radius 3
• Graceful Degradation
– Square corners are okay
– Extra credit: serve images through
conditional comments

52. border-radius 3
#contentcolumn {
-moz-border-radius: 20px 20px 0 0;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
border-radius: 20px 20px 0 0;
}

53. border-radius 3
In IE 6, no image replacement
In IE 7, image replacement
In modern browsers
through conditional comments

54. 4 box-shadow
• Tips & issues
– Different syntax for mozilla, webkit,
and opera browsers
• Browser Support
– IE does not support, Opera only 10.5

55. 4 box-shadow
• Graceful degradation
– Okay if users do not see effect
– Extra credit: serve images through
conditional comments

56. 4 box-shadow
.portfolio {
-moz-box-shadow: 0 5px 20px
rgba(0,0,0,0.6);
-webkit-box-shadow: 0 5px 20px
rgba(0,0,0,0.6);
box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

57. 4 box-shadow
In modern browsers In IE 7, sans box shadow

58. opacity 5
• Tips & issues
– Do not use on elements that would
cover important content
• Browser Support
– IE does not support

59. opacity 5
• Graceful degradation
– Accept that effect will not work in
non-supportive browsers

60. opacity 5
#feature-meta {
background:none repeat scroll 0 0 #3C4C55;
opacity:0.85;
}

61. opacity 5
In modern browsers In IE7, no opacity

62. 6 rgba
• Tips & issues
– More granular control of particular
elements than opacity
• Browser Support
– IE does not support

63. 6 rgba
• Graceful degradation
– Place after regular rgb color property
to override in modern browsers; older
browsers will ignore it
– Use a png for fallback if desired

64. 6 rgba
#about {
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);
}

65. 6 rgba
In modern browsers In IE 7, no rgba

66. transform 7
• Tips & issues
– Mozilla, webkit, and opera properties
• Browser Support
– IE does not support, Opera 10.5 only

67. transform 7
• Graceful degradation
– Leave images in standard orientation
– Extra credit: serve images or image
sprites with conditional comments

68. transform 7
#photos img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}

69. transform 7
In modern browsers In IE 7 without transform

70. 8 gradient
• Tips & issues
– Different syntax for mozilla and
webkit browsers
• Browser Support
– IE and Opera do not support

71. 8 gradient
• Graceful degradation
– Gradient will not appear older
browsers
– Establish fallback background image
first in code

72. 8 gradient
#mainnav li a {
background-color: #f7f6f4;
background-image: url(bg_navitems.gif);
background-image:
-moz-linear-gradient(100% 100% 90deg,
#ccc9ba, #ffffff);
background-image:
-webkit-gradient(linear, 0% 0%, 0% 100%,
from(#ffffff), to(#ccc9ba));
}

73. 8 gradient
In IE, with fallback image; conditional
In modern browsers
comment for rounded corners

74. Advanced Tips

75. Multiple Stylesheets
Use multiple stylesheets to add layers of
style complexity for multiple platforms
See:
http://www.alistapart.com/articles/progressive
enhancementwithcss

76. Useful Tools
Ie7.js: A javascript library that make IE act like
a standards-compliant browser
http://code.google.com/p/ie7-js/
Modernizr: detects support of CSS3 properties
in browsers
http://www.modernizr.com/

77. Making plans for the future

78. Don’t be afraid to commit to using CSS3

79. Feel the love:
Put in some hands-on quality time

80. One thing you can do in the next week
1. Find some
favorite CSS3
and graceful
degradation
resources

81. Two things you can do in
the next month
1. Incorporate CSS3
properties in to a
personal site
2. Seek out CSS3
inspiration and
sounding boards

82. Three things you can do in
the next three months
1. Convince your boss that
using CSS3 is a beneficial
move
2. Plan to use CSS3 in your
next project
3. Share CSS3 with colleagues
or your team

83. Re/sources
delicious.com/denisejacobs/
gdcss3
delicious.com/denisejacobs/
gdcss3examples

84. Book Love
Come to the
book signing
today from
12:25 – 1:55pm
at the Peach
Pit table!
CSSDetectiveGuide.com
twitter.com/cssdetective

85. Book Love
InterActWithWebStandards.com
Also available
during the book
signing today
from 12:25 –
1:55pm at the
Peach Pit table!

86. Questions?

87. Flickr Love
http://www.flickr.com/photos/victoriapeckham/2091704 http://www.flickr.com/photos/deapeajay/2969264395/
802/ http://www.flickr.com/photos/mogwai_83/2055034959/
http://www.flickr.com/photos/shibanidutta/4115390982/ http://www.flickr.com/photos/thisparticulargreg/5148172
http://www.flickr.com/photos/cybervin/266632074/ 08/
http://www.flickr.com/photos/spierzchala/66232046/ http://www.flickr.com/photos/criminalintent/3282026121
http://www.flickr.com/photos/bdwaydiva1/2400841641/ /
http://www.flickr.com/photos/1k3r/1371314660/ http://www.flickr.com/photos/nostri-imago/3216359107/
http://www.flickr.com/photos/porcupiny/783990790/ http://musicselections.files.wordpress.com/2007/03/marv
http://www.flickr.com/photos/mwichary/2240608755/ in-gaye-16.jpg
http://www.flickr.com/photos/tom1231/273579455/ http://www.flickr.com/photos/gorriti/426787181/
http://www.flickr.com/photos/gideon/6582069/ http://www.flickr.com/photos/unfrenziedspace/45515056
64/
http://www.flickr.com/photos/shirinwiniger/3680885289/
http://www.flickr.com/photos/erikogan/3481255/
http://www.flickr.com/photos/briankameoka/3754385207
/ http://www.flickr.com/photos/possible248/3695594410/
http://www.flickr.com/photos/tomergabel/3355451483/ http://www.flickr.com/photos/carbonnyc/3160373238/
http://www.flickr.com/photos/johnsnape/4258191545/ http://www.flickr.com/photos/boklm/486646798/in/set-
72157600208217964/
http://www.flickr.com/photos/hookdesignalter/42735654
89/ (& http://www.robotjohnny.com/) http://www.flickr.com/photos/soerenheuer/17879000/
http://www.flickr.com/photos/tnarik/899866806/
http://www.flickr.com/photos/nickwebb/2919914290/
http://www.billwisserphoto.com

88. Superstar Sponsor Love!
Aarron Walter Chijioke Amah Janet Tu Marlon Norris
Adam Avitia Chris Coyier Jay F Hicks Mary M Morgan
Adria Richards Chris Fullman Jean MacDonald Maurice Cherry
Adriana Vega Chris Lawson Jeffrey Croft Mou Mukherjee
Alina Balean Chris Rainey Jennifer Dixey Natascha Dela Cruz
Amber Zimmerman Christopher Coldewey Jennifer Strickland Nicholas St Surin
Andrea Gietz Craig Simon Jessica Gidal Phil Pickering
Andrea Wang David Bisset Jewel Figueras Priscilla Janney-Pace
Andy Stratton David J. Shea Jim & Betty Felder Ralph Brandi
Angela Betancourt Denise Gaudy Jonathan Snook Robbie Mae Lowe
Ann Daramola Deloria Jacobs Juanetta Whylie Robert Chafino
Anukul Gurung Donna Freeman Julia Wakefield Robert Dellow
Baratunde Thurston Emily Dykstra Kevin V. Michael Ron Smith
Barbara Fleming Eric Marden, XENTEK.net Kim Andre Ottesen Ryan Carson
Barbara Hyman Erica Mauter Kiratiana Freelon S. Elizabeth Burr
Belinda Thurston Evan Schneider Kornelia Rybitwa Stephanie Hobson
Beth Kipnis Faruk Ates Kris Krug Stephanie Sullivan
Betsy Soler Fredric Mitchell Kristin Quintas Stephen Malagodi
Betty Hairston Gail Simpson Kristine Hofstra Sue Parker
Bryce Kerley George Kelly Kyle Hurst Tony Carrera Jr
Carol Ferrari Hans Verschooten Lori Todd Vanessa Montes
Cecily Walker Havivah Schwartz Lynne d Johnson Wayne Sutton
Cesar Abueg Ivan Mladenovic Marc Hall William James Lowe
Charmell Slaughter J. Todd Bennett Marlo Salawou Winifred Day

89. Closed.

90. <bowing>Thank you!</bowing>
denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs