Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Denise R. Jacobs
PapillonEffect Consulting 
BBC London
November 2010
It’s Business Time:
Gettin’ Down With the Graceful
De...
Meet your presenter
CSSDetectiveGuide.com & InterActWithWebStandards.com
1969 2010
On CSS3
The love affair
with CSS3
continues to grow
stronger and more
passionate over
time
http://www.flickr.com/photos/victoriape...
What’s not to love?
Easier 
implementation of 
visual effects
Effects that 
enhance the user 
experience
http://www.flickr...
Past =
Contortions
Present =
Ease
As with many seemingly perfect
romances, there are issues…
http://www.flickr.com/photos/cybervin/266632074/
Relationship Status:
It’s Complicated
Still a working draft +
Uneven browser support +
Does not validate +
Code bloat
Ideally:
a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
box-shadow: 15px 15px 20px rgba(0,0,
0, 0.4);...
= Oh My!
Despite our most fervent prayers
Many users are still using older browsers
Either by force
Or by choice
“Do websites
need to look
exactly the same
in every
browser?”
While looks
aren’t
everything
They do shape user perception
and experience
Happy end users
Facilitating compatibility
CSS3 Graceful Degradation:
The Necessities
So, which is better,
Graceful Degradation or Progressive Enhancement?
* Please *
Sites need be usable and look
good to as many people as
possible.
Period.
What’s in a name?
“Progressful Degrahancement”
(coined by M. Jackson Wilkinson and Jason 
Garber)
“Graceful Reverse Degrad...
The end result: most important
Tools
CSS3 Specifications
The CSS3 Specifications are THE resource 
for finding out the exact intended 
behavior and use of any ...
Browser Support Charts
http://www.findmebyip.com/
litmus
Cross-Browser Testers
http://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com/(paid)
http://browsershots.org/(free)
Techniques
The Goal
Code that displays well in all browsers
…However,
Many properties are browser‐specific, requiring 
vendor prefixes
And there is a standard property
There are synt...
Getting as close as possible
1. (Re)set the mood
2. Leverage source order
3. Be conditional
4. Use a filter
5. Add tools t...
(Re)set the Mood
A CSS reset insures that you are starting from a 
common base point in all browsers.
Example:
html, body,...
CSS Resets
Eric Meyer’s Reset: 
http://meyerweb.com/eric/tools/css/reset/
Article on DIY resets by Jason Cranford 
Teague:...
Place default properties first
Place browser‐specific properties ahead of 
standard properties
The standard properties wil...
A Proper Stack
.gradient {
color: #fff;
A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background co...
A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background co...
A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background co...
A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background co...
A Proper Stack
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*fallback background co...
Establish Conditions
<!--[if gte IE 6]>
<link href="ie_stylesheet.css"
rel="stylesheet">
<![endif]-->
(place after the reg...
If you must have the effect in IE, such as 
alpha opacity, gradient, shadow, transitions 
etc. you could use a proprietary...
Filter extensions
The -ms-filter attribute is an 
extension to CSS for IE8 and above. This 
syntax will allow other CSS pa...
Filter extension syntax
For IE8+, not only must filters be prefixed 
with "‐ms‐" , but the PROGID must be in 
single or do...
Get Script Help
There are several scripts, javascript libraries, 
and jquery scripts and plugins that will help 
older bro...
Ie-7.js
http://code.google.com/p/ie7-js/
CSS3Pie.com
CSS Sandpaper
http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
Be Proactive
Defensive coding for older browsers helps 
you to quickly and easily identify and solve 
problems when they c...
The “Special” Relationship:
Dealing with the IEs
The older IEs DO NOT support CSS3
…as in “at all.” Right. Enough said.
6 7 8
http://www.flickr.com/photos/johnsnape/425819...
9
Initial reports of IE9 support of CSS3
The reality
Dealing with IE6 (Still? Yes, still.)
Approaches:
Kick it to the curb
Exercise tolerance
Full Respect: show grace in degra...
IE6: Go home!
http://www.flickr.com/photos/robotjohnny/3629069606/
Having “the talk”
In IE6In modern browsers
paulcarbo.net
Serve some stripped-down style
makephotoshopfaster.com
In IE6In modern browsers
Resource: Universal IE CSS
Universal IE6 stylesheet: http://code.google.com/p/universal-ie6-css/
Make a helpful suggestion
http://yaronschoen.com/blog/sudden_metanoia
In IE6In modern browsers
Resource: BrowseSad.org
browsesad.org
Limit Your Support
gowalla.com
Showing a
little extra
Love.
Respectful, yet graceful
aposd.org
In IE6In modern browsers
Let’s Get It On
8 CSS3 Properties with
Graceful Degradation
Fallbacks
The Properties
1. @font‐face
2. border‐radius
3. opacity
4. rgba
5. box‐shadow
6. text‐shadow
7. gradient
8. transform
Warning: this may
put you in the
mood for some
serious…coding
@font-face1.
http://sickdesigner.com/
@font-face1.
@font-face
Note:
– Actually part of the CSS2.1 specification. 
– Therefore, the IEs do support it!
Browser Support
– The o...
@font-face
Tips & issues
– Potential font license restrictions
– Flash of unstyled text (“fout”)
Graceful degradation
– De...
@font-face bug: the IEs
@font-face super bullet‐proofing
The problem:
@font‐face doesn’t work, even with the proper 
norma...
@font-face bug: Webkit
@font-face bold and italics “bug”
The problem:
Applying font-weight:bold or font-style:
italic to @...
Full solution: @font-face
@font-face {
font-family: 'Colaborate Light';
src: url('ColabLig.eot');
}
@font-face {
font-fami...
Full solution: @font-face
@font-face {
font-family: 'Colaborate Light';
src: url('ColabLig.eot');
}
@font-face {
font-fami...
In modern browsers In IE 8 with fallback font
Graceful degradation: @font-face
FontSquirrel.com
http://www.fontsquirrel.com/fontface
border-radius2.
border-radius2.
http://www.denisejacobs.com/cdgexamples/chapter10/
border-radius
Tips & issues
– Different syntax for mozilla, webkit, and opera 
browsers
Graceful Degradation
– Square corn...
border-radius
Syntax comparison breakdown:
‐moz allows multiple values for each position
‐webkit individual values
Standar...
border-radius syntax
Full solution: border-radius
#contentcolumn {
margin: -40px 3% 0 3%;
width: 42%;
-moz-border-radius: 20px 20px 0 0;
-webki...
In modern browsers In IE 7, image replacement
through conditional comments
Graceful Degradation: border-radius
Full solution: border-radius
Conditional Comment:
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ohhai_ie...
In modern browsers In IE 6, no image replacement
Graceful Degradation: border-radius
opacity3.
opacity3.
http://rustinjessen.com/weblog/833
opacity
Tips & issues
– Do not use on elements that would cover 
important content
Graceful Degradation
– Accept that effe...
Full solution: opacity
.opacity {
color: #fff;
background-color: #3C4C55;
opacity: 0.2;
-ms-filter:
"progid:DXImageTransfo...
In modern browsers In IE7, no opacity
Graceful degradation: opacity
rgba4.
rgba4.
http://aarronwalter.com/designer/
rgba
Tips & issues
– More granular control of particular elements than opacity
– Place after regular rgb color property to...
Full solution: rgba
.rgba {
background-color: #ff0000;
/* fallback color in hexidecimal */
background-color: transparent;
...
In modern browsers In IE 7, no rgba
Graceful degradation: rgba
box-shadow5.
box-shadow5.
http://badassideas.com/work/
box-shadow
Tips & issues
– Okay if users don’t see effect, doesn’t affect 
usability of the page.
Graceful Degradation
– T...
box-shadow syntax
Syntax breakdown:
box-shadow: <x-offset> <y-offset> <blur> <color>
Full solution: box-shadow
.boxshadow {
-moz-box-shadow: 3px 3px 10px #333;
-webkit-box-shadow: 3px 3px 10px #333;
box-shad...
In modern browsers In IE 7, sans box shadow
Graceful degradation: box-shadow
text-shadow6.
text-shadow6.
http://www.bountybev.com/home.html
text-shadow
Tips & issues
– Can help accentuate text and improve readability 
and visual importance
Graceful Degradation
–...
Full solution: text-shadow
.textshadow h2 {
text-shadow: 1px 1px 2px rgba(48,80,82,0.8);
-ms-filter:
"progid:DXImageTransf...
In modern browsers In IE 7 without text shadow
Graceful degradation: text-shadow
gradient7.
gradient7.
http://www.denisejacobs.com/cdgexamples/chapter8/
gradient
Tips & issues
– Different syntax for mozilla and webkit browsers
Graceful Degradation
– Gradient will not appear ...
gradient syntax
#mainnav li a {
background-color: #f7f6f4;
background-image: url(bg_navitems.gif);
background-image:
-moz-linear-gradient(...
Full solution: gradient
.gradient {
color: #fff;
background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;
/*background co...
Graceful degradation: gradient
In modern browsers
In IE, with fallback image & conditional 
comment for rounded corners
Colorzilla gradient tool
http://www.colorzilla.com/gradient-editor/
transform8.
transform (2d)8.
http://www.zurb.com/playground/css3-polaroids/
transform
Tips & issues
– Mozilla, webkit, and opera vendor prefixes, but no 
standard yet.
– Rendering uneven: jagged edg...
transform: types
• rotate
• scale
• skew
• translate
• matrix
transform: rotate syntax
The generic syntax for transform is
<-prefix->transform: type(<value>) type(<value>)
type(<value>...
#photos img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}
transform: r...
In modern browsers In IE 7 without transform
Graceful degradation: transform
Useful Tools
More tools to do the heavy lifting
CSS3 Generators
CSS3Please.com
CSS3Generator.com
CSS3-Maker.com
CSS3 Tools at WestCiv
http://westciv.com/tools/
Even more CSS3 Generators
http://csscorners.com/
http://border‐image.com
Helper Scripts
Modernizr.com
Templates
HTML5Boilerplate.com
Paul Irish’s HTML5 template file
http://html5boilerplate.com/
Final Thoughts
“Can I use CSS3 now?”
Make the…
Try out some new moves
Totally hot
Coding superhero
Resources
delicious.com/denisejacobs/
gdcss3
delicious.com/denisejacobs/
gdcss3examples
delicious.com/denisejacobs/css3
Thank you!
denisejacobs.com
denise@denisejacobs.com
twitter.com/denisejacobs
slideshare.net/denisejacobs
Closed.
@font-face Note: – Actually part of the CSS2.1 specification.  –
@font-face Note: – Actually part of the CSS2.1 specification.  –
@font-face Note: – Actually part of the CSS2.1 specification.  –
@font-face Note: – Actually part of the CSS2.1 specification.  –
Prochain SlideShare
Chargement dans…5
×

@font-face Note: – Actually part of the CSS2.1 specification.  – The Graceful Degradation of CSS3

12 144 vues

Publié le

@font-face
Note:
– Actually part of the CSS2.1 specification. 
– Therefore, the IEs do support it!
Browser Support
– The older IEs require fonts to be in EOT format
– IE9 now supports WOFF (web open font face)

Publié dans : Technologie
  • Soyez le premier à commenter

×