It's Business Time: The Graceful Degradation of CSS3

4,185 views

Published on

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.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,185
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

It's Business Time: The Graceful Degradation of CSS3

  1. It’s Business Time:Gettin’ Down With the GracefulDegradation of CSS3 Denise R. Jacobs The Future of Web Design London
  2. #gdcss3
  3. Thepassionatelove affairwith CSS3only growsstronger overtime
  4. What’s not to love?Easierimplementation ofvisual effectsEffects thatenhance the userexperience
  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 needto look exactly thesame in everybrowser?”
  16. While looksaren’teverything
  17. They do shape user perceptionand experience
  18. Compatibility is the foundation ofstrong relationships
  19. So, which is better,Graceful Degradation or Progressive Enhancement?
  20. * Whatever *
  21. Sites need be usable andlook good to as manypeople as possible.Period.
  22. (It doesn’t matter how you get there)
  23. Do you want to date my browser?
  24. The A-Team
  25. The Motley Crew
  26. While derisiontowards IE6 isjustified
  27. You stillshouldshowa littleLove.
  28. The Seduction Suite
  29. CSS3 Specifications
  30. Browser Compatibility Charts
  31. Cross- Browser Testers
  32. A bit of technique goes a long way
  33. (Re)set the moodA CSS reset insures that you arestarting from a common base pointin all browsers.
  34. Leverage source orderPlace browser-specific propertiesahead of standard properties.
  35. Use advanced selectorsAdvanced selectors are a good wayto specifically target styles formodern browsers.
  36. Create conditional comments <!--[if gte IE 6]> <link href="ie_stylesheet.css" rel="stylesheet"> <![endif]--> (place after the regular stylesheet link to override styles)
  37. Presumptions • POSH markup • You know your audience’s browser profilePrecautions• Many properties are browser-specific• Syntax differences between browser-specific properties and the standard property• Increase in the amount of CSS
  38. Let’s Get It On
  39. 8 CSS3 Properties andTheir Graceful Degradation
  40. @font-face 1• Tips & issues – Potential font license restrictions – Flash of unstyled text (fout)• Browser Support – IE requires fonts to be in EOT format
  41. @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
  42. @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 “ColaborateLight”, sans-serif;}
  43. @font-face 1In modern browsers In IE 8: fallback font
  44. 2 text-shadow • Tips & issues – Can help accentuate text – No impact on accessibility • Browser Support – IE does not support
  45. 2 text-shadow • Graceful degradation – If it doesn’t show up, that’s okay – Extra credit: image replacement
  46. 2 text-shadow #nav-primary a.current { text-shadow:1px 1px 0 rgba(0,0,0,.5); }
  47. 2 text-shadowIn modern browsers In IE 7 without text shadow
  48. border-radius 3• Tips & issues – Different syntax for mozilla, webkit, and opera browsers• Browser Support – IE does not support, Opera: 10.5 only
  49. border-radius 3• Graceful Degradation – Square corners are okay – Extra credit: serve images through conditional comments
  50. 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;}
  51. border-radius 3 In IE 6, no image replacement In IE 7, image replacementIn modern browsers through conditional comments
  52. 4 box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE does not support, Opera only 10.5
  53. 4 box-shadow • Graceful degradation – Okay if users do not see effect – Extra credit: serve images through conditional comments
  54. 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); }
  55. 4 box-shadowIn modern browsers In IE 7, sans box shadow
  56. opacity 5• Tips & issues – Do not use on elements that would cover important content• Browser Support – IE does not support
  57. opacity 5• Graceful degradation – Accept that effect will not work in non-supportive browsers
  58. opacity 5#feature-meta {background:none repeat scroll 0 0 #3C4C55;opacity:0.85;}
  59. opacity 5In modern browsers In IE7, no opacity
  60. 6 rgba • Tips & issues – More granular control of particular elements than opacity • Browser Support – IE does not support
  61. 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
  62. 6 rgba #about { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); }
  63. 6 rgbaIn modern browsers In IE 7, no rgba
  64. transform 7• Tips & issues – Mozilla, webkit, and opera properties• Browser Support – IE does not support, Opera 10.5 only
  65. transform 7• Graceful degradation – Leave images in standard orientation – Extra credit: serve images or image sprites with conditional comments
  66. transform 7#photos img {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}
  67. transform 7In modern browsers In IE 7 without transform
  68. 8 gradient • Tips & issues – Different syntax for mozilla and webkit browsers • Browser Support – IE and Opera do not support
  69. 8 gradient • Graceful degradation – Gradient will not appear older browsers – Establish fallback background image first in code
  70. 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)); }
  71. 8 gradient In IE, with fallback image; conditionalIn modern browsers comment for rounded corners
  72. Advanced Tips
  73. Multiple StylesheetsUse multiple stylesheets to add layers ofstyle complexity for multiple platformsSee:http://www.alistapart.com/articles/progressiveenhancementwithcss
  74. Useful ToolsIe7.js: A javascript library that make IE act likea standards-compliant browserhttp://code.google.com/p/ie7-js/Modernizr: detects support of CSS3 propertiesin browsershttp://www.modernizr.com/
  75. Making plans for the future
  76. Don’t be afraid to commit to using CSS3
  77. Feel the love:Put in some hands-on quality time
  78. One thing you can do in the next week1. Find some favorite CSS3 and graceful degradation resources
  79. Two things you can do in the next month1. Incorporate CSS3 properties in to a personal site2. Seek out CSS3 inspiration and sounding boards
  80. Three things you can do inthe next three months1. Convince your boss that using CSS3 is a beneficial move2. Plan to use CSS3 in your next project3. Share CSS3 with colleagues or your team
  81. Re/sources delicious.com/denisejacobs/ gdcss3 delicious.com/denisejacobs/ gdcss3examples
  82. Book Love Come to the book signing today from 12:25 – 1:55pm at the Peach Pit table!CSSDetectiveGuide.com twitter.com/cssdetective
  83. Book LoveInterActWithWebStandards.com Also available during the book signing today from 12:25 – 1:55pm at the Peach Pit table!
  84. Questions?
  85. Flickr Lovehttp://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/3282026121http://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
  86. 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 CruzAmber 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 BrandiAngela Betancourt Denise Gaudy Jonathan Snook Robbie Mae Lowe Ann Daramola Deloria Jacobs Juanetta Whylie Robert Chafino Anukul Gurung Donna Freeman Julia Wakefield Robert DellowBaratunde 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 LoweCharmell Slaughter J. Todd Bennett Marlo Salawou Winifred Day
  87. Closed.
  88. <bowing>Thank you!</bowing> denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs

×