• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
It's Business Time: The Graceful Degradation of CSS3

It's Business Time: The Graceful Degradation of CSS3



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.

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.



Total Views
Views on SlideShare
Embed Views



1 Embed 50

http://www.slideshare.net 50



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    It's Business Time: The Graceful Degradation of CSS3 It's Business Time: The Graceful Degradation of CSS3 Presentation Transcript

    • It’s Business Time:Gettin’ Down With the GracefulDegradation of CSS3 Denise R. Jacobs The Future of Web Design London
    • #gdcss3
    • Thepassionatelove affairwith CSS3only growsstronger overtime
    • What’s not to love?Easierimplementation ofvisual effectsEffects thatenhance the userexperience
    • As with many seemingly perfect romances, there are issues…
    • Relationship Status:
    • Still a working draft
    • Validation (or lack thereof)
    • Uneven browser support, Proprietary properties, And code bloat, Oh my!
    • Despite our most fervent wishes otherwise…
    • Many users are still using older browsers
    • Either by force
    • Or by choice
    • oh, the horror!
    • “Do websites needto look exactly thesame in everybrowser?”
    • While looksaren’teverything
    • They do shape user perceptionand experience
    • Compatibility is the foundation ofstrong relationships
    • So, which is better,Graceful Degradation or Progressive Enhancement?
    • * Whatever *
    • Sites need be usable andlook good to as manypeople as possible.Period.
    • (It doesn’t matter how you get there)
    • Do you want to date my browser?
    • The A-Team
    • The Motley Crew
    • While derisiontowards IE6 isjustified
    • You stillshouldshowa littleLove.
    • The Seduction Suite
    • CSS3 Specifications
    • Browser Compatibility Charts
    • Cross- Browser Testers
    • A bit of technique goes a long way
    • (Re)set the moodA CSS reset insures that you arestarting from a common base pointin all browsers.
    • Leverage source orderPlace browser-specific propertiesahead of standard properties.
    • Use advanced selectorsAdvanced selectors are a good wayto specifically target styles formodern browsers.
    • Create conditional comments <!--[if gte IE 6]> <link href="ie_stylesheet.css" rel="stylesheet"> <![endif]--> (place after the regular stylesheet link to override styles)
    • 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
    • Let’s Get It On
    • 8 CSS3 Properties andTheir Graceful Degradation
    • @font-face 1• Tips & issues – Potential font license restrictions – Flash of unstyled text (fout)• Browser Support – IE requires fonts to be in EOT format
    • @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
    • @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;}
    • @font-face 1In modern browsers In IE 8: fallback font
    • 2 text-shadow • Tips & issues – Can help accentuate text – No impact on accessibility • Browser Support – IE does not support
    • 2 text-shadow • Graceful degradation – If it doesn’t show up, that’s okay – Extra credit: image replacement
    • 2 text-shadow #nav-primary a.current { text-shadow:1px 1px 0 rgba(0,0,0,.5); }
    • 2 text-shadowIn modern browsers In IE 7 without text shadow
    • border-radius 3• Tips & issues – Different syntax for mozilla, webkit, and opera browsers• Browser Support – IE does not support, Opera: 10.5 only
    • border-radius 3• Graceful Degradation – Square corners are okay – Extra credit: serve images through conditional comments
    • 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;}
    • border-radius 3 In IE 6, no image replacement In IE 7, image replacementIn modern browsers through conditional comments
    • 4 box-shadow • Tips & issues – Different syntax for mozilla, webkit, and opera browsers • Browser Support – IE does not support, Opera only 10.5
    • 4 box-shadow • Graceful degradation – Okay if users do not see effect – Extra credit: serve images through conditional comments
    • 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); }
    • 4 box-shadowIn modern browsers In IE 7, sans box shadow
    • opacity 5• Tips & issues – Do not use on elements that would cover important content• Browser Support – IE does not support
    • opacity 5• Graceful degradation – Accept that effect will not work in non-supportive browsers
    • opacity 5#feature-meta {background:none repeat scroll 0 0 #3C4C55;opacity:0.85;}
    • opacity 5In modern browsers In IE7, no opacity
    • 6 rgba • Tips & issues – More granular control of particular elements than opacity • Browser Support – IE does not support
    • 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
    • 6 rgba #about { color: rgba(255, 255, 255, 0.8); background-color: rgba(142, 213, 87, 0.3); }
    • 6 rgbaIn modern browsers In IE 7, no rgba
    • transform 7• Tips & issues – Mozilla, webkit, and opera properties• Browser Support – IE does not support, Opera 10.5 only
    • transform 7• Graceful degradation – Leave images in standard orientation – Extra credit: serve images or image sprites with conditional comments
    • transform 7#photos img {-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);-o-transform: rotate(-2deg);}
    • transform 7In modern browsers In IE 7 without transform
    • 8 gradient • Tips & issues – Different syntax for mozilla and webkit browsers • Browser Support – IE and Opera do not support
    • 8 gradient • Graceful degradation – Gradient will not appear older browsers – Establish fallback background image first in code
    • 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)); }
    • 8 gradient In IE, with fallback image; conditionalIn modern browsers comment for rounded corners
    • Advanced Tips
    • Multiple StylesheetsUse multiple stylesheets to add layers ofstyle complexity for multiple platformsSee:http://www.alistapart.com/articles/progressiveenhancementwithcss
    • 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/
    • Making plans for the future
    • Don’t be afraid to commit to using CSS3
    • Feel the love:Put in some hands-on quality time
    • One thing you can do in the next week1. Find some favorite CSS3 and graceful degradation resources
    • Two things you can do in the next month1. Incorporate CSS3 properties in to a personal site2. Seek out CSS3 inspiration and sounding boards
    • 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
    • Re/sources delicious.com/denisejacobs/ gdcss3 delicious.com/denisejacobs/ gdcss3examples
    • Book Love Come to the book signing today from 12:25 – 1:55pm at the Peach Pit table!CSSDetectiveGuide.com twitter.com/cssdetective
    • Book LoveInterActWithWebStandards.com Also available during the book signing today from 12:25 – 1:55pm at the Peach Pit table!
    • Questions?
    • 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
    • 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
    • Closed.
    • <bowing>Thank you!</bowing> denisejacobs.com twitter.com/denisejacobs slideshare.net/denisejacobs