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.
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
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
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
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
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/
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
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