It's Business Time: The Graceful Degradation of CSS3

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  (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

It's Business Time: The Graceful Degradation of CSS3

by Denise Jacobs on Jun 04, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 50

Statistics

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