Progressive
Enhancement
with CSS
Or how I stopped worrying about IE6 and
started loving CSS3
Nick Cowie
Reformed web stand...
Why
build beautiful websites for just a few?
Just a few browsers?
10% Safari and Chrome
10% Firefox 3.5
5% Opera, Firefox 3 and others
15% IE8
47% IE7
13% IE6
CSS3 support
10% Now
20% in 6 months
40% in 2 years
90% in 4 years
100% Who knows?
Trust
Stanford-Makovsy Web Credibility Study

http://captology.stanford.edu/pdf/Stanford-
MakovskyWebCredStudy2002-prelim....
Validation




-webkit-border-radius: 24px;
hacking CSS3 for IE
filter:
progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#ffffe8d8',
EndColorSt...
Example


http://nickcowie.com/eotw
@font-face
No longer restricted to web safe fonts
Supported: FF3.5, SAF3, OP10, IE4
Unsupported: Next font in font stack
I...
opacity
Elements are translucent
Supported: FF1.5, SAF1.2, OP9, IE5
Unsupported: Fully opaque
IE: filter: alpha(opacity = 7...
RGBa
Alpha channel on colours
Supported: FF3, SAF3, OP10
Unsupported: ignores RGBa colour
so set RGB colour before RGBa co...
RGBa backgrounds in IE
hack
Use conditional comments
background-color: transparent;
filter: progid:DXImageTransform.Microso...
border-radius
Rounded corners on block elements
Supported: FF3, SAF3
Unsupported: ignores
IE: JavaScript or images
Problem...
text-shadow
Drop shadow for text
Supported: FF3.5, SAF3, OP9.5
Unsupported: ignores
IE: AVOID AT ALL COSTS filter: Shadow
box-shadow
Drop shadow block elements
Supported: FF3.5, SAF3, IE5
Unsupported: ignores
IE: filter: progid:DXImageTransform....
transform
Alter the appearance of elements:
rotate, skew, flip ...
Supported: FF3.5, SAF4
Unsupported: ignores
IE: no
Probl...
transition
Control the transition between two
states
Supported: FF3.7, SAF4
Unsupported: ignores
IE: has it own transition...
gradients
Gradients as block elements background
Supported: SAF4, IE5
Unsupported: ignores
Provide alternatives first.
IE: ...
box-reflect
Reflects a box element and contents
Supported: SAF4
Unsupported: ignores
Tricks: Add a css mask with a gradient
css-mask
masks a box element and contents
Supported: SAF4
Unsupported: ignores
Wait there are more
I only chose a few to demonstrate a few, so get
a copy of Safari or Chrome and go explore
Surfin’ Safar...
Thank you
Now go make the web a more beautiful
place one website & one browser at a time
Slides: http://www.slideshare.net...
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Progressive enhancement with CSS3
Upcoming SlideShare
Loading in...5
×

Progressive enhancement with CSS3

5,806

Published on

Or how I stopped worrying about IE6 and started loving CSS3

Presentation given at Edge of the Web, November 4, 2009

Published in: Technology, Education
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,806
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
100
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Progressive enhancement with CSS3

  1. 1. Progressive Enhancement with CSS Or how I stopped worrying about IE6 and started loving CSS3 Nick Cowie Reformed web standards fascist nickcowie.com @ nickobec
  2. 2. Why build beautiful websites for just a few?
  3. 3. Just a few browsers? 10% Safari and Chrome 10% Firefox 3.5 5% Opera, Firefox 3 and others 15% IE8 47% IE7 13% IE6
  4. 4. CSS3 support 10% Now 20% in 6 months 40% in 2 years 90% in 4 years 100% Who knows?
  5. 5. Trust Stanford-Makovsy Web Credibility Study http://captology.stanford.edu/pdf/Stanford- MakovskyWebCredStudy2002-prelim.pdf
  6. 6. Validation -webkit-border-radius: 24px;
  7. 7. hacking CSS3 for IE filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#ffffe8d8', EndColorStr='#ffce401c');
  8. 8. Example http://nickcowie.com/eotw
  9. 9. @font-face No longer restricted to web safe fonts Supported: FF3.5, SAF3, OP10, IE4 Unsupported: Next font in font stack IE: .eot format, loads all @font-face Problems: FOUT, failover
  10. 10. opacity Elements are translucent Supported: FF1.5, SAF1.2, OP9, IE5 Unsupported: Fully opaque IE: filter: alpha(opacity = 75); Problems: inherited WCAG2 colour contrast
  11. 11. RGBa Alpha channel on colours Supported: FF3, SAF3, OP10 Unsupported: ignores RGBa colour so set RGB colour before RGBa colour IE: only in special cases
  12. 12. RGBa backgrounds in IE hack Use conditional comments background-color: transparent; filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;
  13. 13. border-radius Rounded corners on block elements Supported: FF3, SAF3 Unsupported: ignores IE: JavaScript or images Problems: max size in some webkit -moz-border-radius: 24px 0 24px 0; -webkit-border-radius: 24px 0 24px 0;
  14. 14. text-shadow Drop shadow for text Supported: FF3.5, SAF3, OP9.5 Unsupported: ignores IE: AVOID AT ALL COSTS filter: Shadow
  15. 15. box-shadow Drop shadow block elements Supported: FF3.5, SAF3, IE5 Unsupported: ignores IE: filter: progid:DXImageTransform.Microsoft.dropshadow (OffX=5, OffY=5, Color='#aaRRGGBB', Positive='true')"; Problems: inheritance in IE
  16. 16. transform Alter the appearance of elements: rotate, skew, flip ... Supported: FF3.5, SAF4 Unsupported: ignores IE: no Problems: getting too smart
  17. 17. transition Control the transition between two states Supported: FF3.7, SAF4 Unsupported: ignores IE: has it own transition, but ... Problems: getting too smart
  18. 18. gradients Gradients as block elements background Supported: SAF4, IE5 Unsupported: ignores Provide alternatives first. IE: filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#aaRRGGBB', EndColorStr='#aaRRGGBB') ;
  19. 19. box-reflect Reflects a box element and contents Supported: SAF4 Unsupported: ignores Tricks: Add a css mask with a gradient
  20. 20. css-mask masks a box element and contents Supported: SAF4 Unsupported: ignores
  21. 21. Wait there are more I only chose a few to demonstrate a few, so get a copy of Safari or Chrome and go explore Surfin’ Safari or css3.info
  22. 22. Thank you Now go make the web a more beautiful place one website & one browser at a time Slides: http://www.slideshare.net/nickobec/progressive- enhancement-with-css3 Demo: http://nickcowie.com/eotw References: http://delicious.com/nickobec/eotwpres licensed under a Creative Commons Attribution 2.5 Australia Licence. except Canny Bill screenshots © Andy Clarke State Library of WA screenshots © State Library of WA used with permission
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×