CSS3: Progressive Enrichment and Graceful Degradation

What’s new in CSS?

CSS3 Properties and Values Text Shadow, Text Stroke and Text Overflow Box Shadow and Sizing Border Image, Radius and Gradient Opacity and RGBA Color Columns @FontFace Transitions :Before and :After¹▪ ¹Improved over CSS Revisions

A closer look . . .

How we make an image button Use Photoshop to make button bgd and

text Optimize for Web Upload Image Add to Markup▪ Total Time = > 6 Minutes

The Image Button

Markup: <a href=“”><img

src=img_button.jpg /></a>

A closer look . . .

How to make a button with Border-radius Text-shadow▪ HTML▪ CSS3▪ Multiple States▪ Total Time = > 3 Minutes

The CSS3 Button

Markup:

CSS:div.rnd_btn a {padding:10px 14px;color:#FFFFFF;font-family:Arial Narrow;font-size:24px;font-weight:bold;background:#ff5700 url(images/btn_bgd.png) repeat-x 0 50%;text-shadow: 0.05em 0.05em 0.05em #333;text-decoration:none;border:5px solid #ff5700;border-radius:14px;-webkit-border-radius:14px;-moz-border-radius:14px;box-shadow:0px 0px 10px #333;-webkit-box-shadow:0px 0px 10px #333;-moz-box-shadow:0px 0px 10px #333;}

<div class="rnd_btn"> <a href="">GET CONTRACTED!</a></div>

The Inevitable . . .

That’s great, but can you make it green? Total time to change image (> 6

minutes)▪ Now we have two images▪ And a new image (must replace an old one)

Total time to change CSS (< 1 minute)▪ As few as 3-character change▪ Cascades throughout site▪ Semantics

The CSS3 Button Markup:

CSS:div.rnd_btn a {padding:10px 14px;color:#FFFFFF;font-family:Arial Narrow;font-size:24px;font-weight:bold;background:#090url(images/btn_bgd.png) repeat-x 0 50%;text-shadow: 0.05em 0.05em 0.05em #333;text-decoration:none;border:5px solid #090;border-radius:14px;-webkit-box-shadow:0px 0px 10px #333;-moz-box-shadow:0px 0px 10px #333;-webkit-border-radius:14px;-moz-border-radius:14px;}

div.rnd_btn a:hover {background-color:#0C0;}

<div class="rnd_btn"> <a href="">GET CONTRACTED!</a></div>

The Problem: CSS3 SupportProperty Firefox 3

(12%)Safari 3 (2%) Opera 9 (2%) IE 8 (37%) IE 7 & 6 (47%)

Text-Shadow SUPPORTED SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

Box-Shadow SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Multiple BGD SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Border-Image SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Text-Stroke SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Border-Radius SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Opacity SUPPORTED SUPPORTED SUPPORTED SUPPORTED SUPPORTED on 7

Text-Overflow SUPPORTED SUPPORTED SUPPORTED SUPPORTED NOT SUPPORTED

:before SUPPORTED SUPPORTED NOT SUPPORTED

SUPPORTED NOT SUPPORTED

:after SUPPORTED SUPPORTED NOT SUPPORTED

SUPPORTED SUPPORTED on 7

RGBA SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Columns SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

@fontface SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

Transitions SUPPORTED SUPPORTED NOT SUPPORTED

NOT SUPPORTED

NOT SUPPORTED

What is . . .

Progressive Enrichment “…visual details as rewards for the

browsers that support the advanced code that creates them…”¹

“…visually rewarding users of browsers that are forward thinking…”¹▪ -webkit-border-radius:14px;▪ -moz-border-radius:14px;

¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83

What is . . .

Graceful Degradation “…allowing [CSS3 non-supporting]

browsers to degrade in a perfectly acceptable fashion.”¹

¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83

For the “Visual People”

The “New Box Model” Markup: <div>BOX</div>

I give 80%

“I’ve always thought of myself as an 80 percenter . . . to go beyond that requires an obsession and degree of specialization that doesn’t appeal to me.”² Yvon Chouinard, Let My People Go Surfing▪ Founder and Owner, Patagonia▪ ² Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83

What does the last 20% do to your budget Think about nested tables and spacer gifs

What about “Decision Makers”

A Question . . .

Do things need to look the same on all browsers mediums? On the Web: IE, Firefox, Sarari▪ What about resolutions? What about CMS?

On the Mobile: iPhone, Blackberry On the TV: PS3, Xbox Audible: Screen and Text Readers

The Web is not Print

RGBA Color

Old Way: Image only New Way: RGBA and/or Opacity

RGBA Color

Old Way: Image only Markup: <img src=“image” alt=“abc” />

New Way: RGBA and/or Opacity

<div class="special"> <a href="retirement-income.cfm?page=guides" title="Recent Updates from SEQUENT"> <img src="http://seniormarketsales.s3.amazonaws.com/sequent/images/sequent_whitepaper_retirement_income_couple.jpg" width="425" height="298" border="0" /> <span> <strong>Recent Updates from SEQUENT:</strong> <em>Free guides for 2010 are now available in the &##8220;Free Guides&##8221; section of the website. Click here to learn more.</em> <br /> </span> </a></div>

div.special {position:relative;width:425px;font-size:80%;}

div.special a span {display:block;position:absolute;width:425px;bottom:2px;*bottom:3px;left:0;line-height:1.3em;background:#000;background:rgba(0,0,0,.8);}

div.special a strong {display:block;padding:10px 10px 0 10px;color:#fff;}

div.special a em {display:block;padding:0 10px 10px 10px;font-style:normal;color:#fff;}

div.special a:hover span {background:#333;background:rgba(0,54,96,.8);cursor:pointer;}

Columns

Old Way: Tables, Floats New Way: Column

Semantic Easy Markup

<div class=“article”> <p>Lorem ispum … </p> <p>Lorem ispum … </p> <p>Lorem ispum … </p></div>.article { width:40em; text-align: justify; -moz-column-count: 2; -moz-column-width: 15em; -moz-column-gap: 2em; }

@font-face

Old Way: Image Only New Way: @font-face

Legal and style Issues?

@font-face {font-family: "Archer";src: url("fonts/archer-medium.otf")}

body {font-family: "Archer", Arial, sans-serif;}

.Group*

Old Way: Clearfix New Way: .Group

Semantic (more than just a <br /> or clearfix)

Modular *This is actually a CSS2 property, but until recently it hasn’t

been widely supported on any browser..group:after {Content: “.”;Display:block;Height:0px;Clear:both;Visibility:hidden}

/* for IE 6.group {Height:1%;}

/* for IE 7*:first-child+html .group {Min-height:1%;}

.Group*

References

www.Simplebits.com http://shouldwebsiteslookthesameinallbrowsers.com/ http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/ http://www.westciv.com/iphonetests/ http://www.noupe.com/css3/css3-exciting-functions-and-features-30-useful

-tutorials.html ¹ Cedarholm, Dan. “Handcrafted CSS.” Berkley, CA. New Riders. 83