the graceful degradation of css3

Download The Graceful Degradation of CSS3

Post on 18-Oct-2014

4.035 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

Its Business Time: Gettin Down with the Graceful Degradation of CSS3

DeniseR.JacobsPapillonEffect Consulting

BBCLondonNovember2010

Its Business Time:Gettin Down With the Graceful Degradation of CSS3

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/victoriapeckham/2091704802/

Whats not to love?

Easierimplementationof

visualeffects

Effectsthatenhancetheuser

experience

http://www.flickr.com/photos/shibanidutta/4115390982/

Past =

Contortions

Present =

Ease

As with many seemingly perfect romances, there are issues

http://www.flickr.com/photos/cybervin/266632074/

Relationship Status:

Its Complicated

Still a working draft +

Uneven browser support +

Does not validate +

Code bloatIdeally:a.polaroid:active {z-index: 999;border-color: #6A6A6A;box-shadow: 15px 15px 20px rgba(0,0,

0, 0.4);transform: rotate(0deg) scale(1.05);}

Reality:a.polaroid:active {z-index: 999;border-color: #6A6A6A;-webkit-box-shadow: 15px 15px

20px rgba(0,0, 0, 0.4);-moz-box-shadow: 15px 15px 20px

rgba(0,0, 0, 0.4);box-shadow: 15px 15px 20px

rgba(0,0, 0, 0.4);-webkit-transform: rotate(0deg)

scale(1.05);-moz-transform: rotate(0deg)

scale(1.05);transform: rotate(0deg)

scale(1.05);}

= 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 arent

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.

Whats in a name?

Progressful Degrahancement(coinedbyM.JacksonWilkinsonandJasonGarber)

GracefulReverseDegradation(coinedbyme)

The end result: most important

Tools

CSS3 Specifications

TheCSS3SpecificationsareTHEresourceforfindingouttheexactintended

behavioranduseofanygivenproperty.

http://www.w3.org/standards/techs/css#w3c_all

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 GoalCodethatdisplayswellinallbrowsers

However, Manypropertiesarebrowserspecific,requiring

vendorprefixes Andthereisastandardproperty Therearesyntaxdifferencesbetweenbrowser

specificpropertiesandthestandardproperty Allofthiscausesanincreaseintheamountof

CSS OlderIEs dontsupportCSS3 needeitherfilters

orhelperscripts

Getting as close as possible

1. (Re)set themood2. Leveragesourceorder

3. Beconditional4. Useafilter5. Addtoolstothemix

6. Beproactivelydefensive

(Re)set the MoodACSSresetinsuresthatyouarestartingfroma

commonbasepointinallbrowsers.

Example:html, body, div, span, applet, object, iframe, h1, h2,

h3, h4, h5, h6, p, blockquote, pre (etc){margin: 0; padding: 0; border: 0; outline: 0;font-size: 100%; vertical-align: baseline; background: transparent; }

1.

CSS ResetsEricMeyersReset:

http://meyerweb.com/eric/tools/css/reset/

ArticleonDIYresetsbyJasonCranfordTeague:http://bit.ly/1D4jSB

Placedefaultpropertiesfirst

Placebrowserspecificpropertiesaheadofstandardproperties

Thestandardpropertieswilloverridethevendorswhenthestandardisestablished.

Leverage Source Order2.

A Proper Stack.gradient {color: #fff;

A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;

/*fallback background color & image*/

A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;

/*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);

/* gradient for Mozilla */

A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;

/*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);

/* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left

bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */

A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;

/*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);

/* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left

bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */

A Proper Stack.gradient {color: #fff;background: #aaaaaa url(gradient_slice.jpg) 0 0 x-repeat;

/*fallback background color & image*/background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);

/* gradient for Mozilla */background-image: -webkit-gradient(linear,left top,left

bottom,color-stop(0, #07407c),color-stop(1, #aaaaaa)); /* gradient for the Webkits */

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')"; /* filter for IE8 (& IE9) */

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');

} /* filter for IE7 and lower */

Establish Conditions

(placeaftertheregularstylesheet linktooverridestyles)

3.

Ifyoumust havetheeffectinIE,suchasalphaopacity,gradient,shadow,transitions

etc.youcoulduseaproprietaryIEfilter.

{CaveatCoder} IEfilterswork,butareessentiallyhacks

IEfiltersareproprietaryandthusnotpartofanystandardspecification,andneverwillbe

Apply a Filter4.

Filter extensions The-ms-filter attributeisan

extensiontoCSSforIE8andabove.ThissyntaxwillallowotherCSSparserstoskip

thevalueofthisunknownpropertycompletelyandsafely.ItalsoavoidsfuturenameclasheswithotherCSSparsers.

Filter extension syntax ForIE8+,notonlymustfiltersbeprefixed

with"ms",butthePROGIDmustbeinsingleordoublequotestomakesurethe

browsersrenderthefiltersproperly.

Example:-ms-filter:

"progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052')";

Get Script HelpThereareseveralscripts,javascript libraries,

andjquery scriptsandplugins thatwillhelpolderbrowsersmimicmodernones.

5.

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 ProactiveDefensivecodingforolderbrowsershelps

youtoquicklyandeasilyidentifyandsolveproblemswhentheycomeup

Organizeforeasyreadingandaccess Optimizeforloadingspeed

Buildinbugfixes

6.

The Special Relationship:Dealing with the IEs

The older IEs DO NOT support CSS3

asinatall. Right.Enoughsaid.

6 7 8

http://www.flickr.com/photos/johnsnape/4258191545/

9Initial reports of IE9 support of CSS3

The reality

Dealing with IE6 (Still? Yes, still.)

Approaches:

Kickittothecurb Exercisetolerance FullRespect:showgraceindegradation

IE6: Go home!

http://www.flickr.com/photos/robotjohnny/3629069606/

Having the talk

InIE6Inmodernbrowsers

paulcarbo.net

Serve some stripped-down style

makephotoshopfaster.com

InIE6Inmodernbrowsers

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

InIE6Inmodernbrowsers

Resource: BrowseSad.org

browsesad.org

Limit Your Support

gowalla.com

Showing a little extra

Love.

Respectful, yet graceful

aposd.org

InIE6Inmodernbrowsers

Lets Get It On

8 CSS3 Properties with Graceful Degradation

Fallbacks

The Properties

1. @fontface

2. borderradius

3. opacity

4. rgba

5. boxshadow

6. textshadow

7. gradient

8. transform

Warning: this may put you in the mood for some seriouscoding

@font-face1.

http://sickdesigner.com/

@font-face1.

@font-face Note:

ActuallypartoftheCSS2.1specification.

Therefore,theIEs dosupportit!

BrowserSupport TheolderIEs requirefontstobeinEOTformat

IE9nowsupportsWOFF(webopenfontface)

@font-face Tips&issues

Potentialfontlicenserestrictions

Flashofunstyled text(fout)

Gracefuldegradation Desiredfontshoulddisplayinallbrowsers.Ifnot,

fallbackfontswilldisplay

Extracredit:imagereplacementthroughconditionalcomments

@font-face bug: the IEs@font-face superbulletproofing

Theproblem:@fontfacedoesntwork,evenwiththeproper

normalsyntax.Whatgives?

Thesolu