Progressive Enhancement with JavaScript and CSSe Enhancement With JavaScript and CSS

Aaron Gustafson

Progressive Enhancement with JavaScript

and CSS

WEBVISONS - 22 MAY 2008

PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS

What isProgressive

Enhancement?

2



ProgressiveEnhancement

vs.Graceful

Degradation

3



Graceful Degradation! A holdover from engineering

! Build for the latest browsers

! Test on older devices

! Happens at the end

! Accounts for few versions

! Expects a poor experience for older browsers

! Fixes major issues but little else

4


WEBVISONS - 22 MAY 2008 5



Progressive Enhancementfocuses on contentcontent

6



Content is why we build websites

and should beour central focus

7



How does it work?

10



12

Flavorful nugget of content(semantic goodness)



13

Rich, indulgent design



14

Sweet interactivity(keeps it from melting in your hands)



Technologies applied as layers

16



stuffandnonsense.co.uk/archives/web_standards_trifle.html



19

Why a peanut m&m?



The peanut is good for

20

! diabetics

! search engine spiders

! mobile devices



21

Its a basic levelof support



22

! some browsers only handle a certain level of CSS

! some companies turn o" JavaScript

Rich, chocolaty goodness



23

It can be beautiful(and progressive)



The candy coating

24

! JavaScript can turn a website into an experience

! we can deliver our scripts a la carte



25

ProgressiveEnhancement

with CSS



26

type.csslayout.csscolor.cssmain.css

Group CSS by function



26

type.css

layout.css color.css




27




28

media="screen,projection" />

Easy support for NN4.x

media="screen,projection" />



29

Supporting alternate media



29

Supporting alternate media

media="screen,projection"

@import 'screen.css';@import 'screen.css' s; screen;

@import 'print.css' print;

@import 'mobile.css' handheld;



Internet Explorer 6is the new Netscape 4

30

(the browser that wouldnt die)



31

Dealing with IEs CSS issuesMicrosoft gave us a great tool for managing progressive enhancement in IE: Conditional Comments.

! CCs allow us to direct select bits of markup to

! IE as a whole or

! specific versions of IE

! Rule of thumb: write CSS for web standards savvy browsers and then use CCs to give IE the nudges it needs



32

Dealing with IEs CSS issues



Keep your style sheetshack free

33



34

Make smart decisions



Contact Us

Send us a message. All fields are required.

Name

Email

Message

Send It

34




Contact Us

Send us a message. All fields are required.

Name

Email

Message

Send It

34


Name

Email

Message



34

Make smart decisionslabel:after {

content: ":";

}



Have fun with it

35



Have fun with it

35

/* inside CC linked CSS file for



36

PE with CSS! think about the content first

! good CSS organization pays dividends

! be discerning about how you include CSS files

! use Conditional Comments to wrangle IE issues

! dont add extra markup if you dont need to



38

ProgressiveEnhancementwith JavaScript



Restraint& Planning

39



Dear George Lucas, please dont sue me. Kthxbye.

A long time ago, in acubicle far, far away...

40



What canJavaScript do?

41

JavaScript



How shouldJavaScriptbe used?

41

JavaScript



Progressive Enhancementhelps us by reminding usto focus on the content

42



Back to basics

43

XHTML + HTTP



Back to basics

43

solid foundation



All code neededto understandand use a site

should exist beforeany scripts run

44



Period.

44



Consider lala.com

45



Without JavaScript

46



Without JavaScript

46

Doh!



And looking at the markup...

47



And looking at the markup...

47

Ugh!



What about search?

48



What aboutalternative devices?

48



EnterUnobtrusiveJavaScript

49

the cornerstone of ProgressiveEnhancement with JavaScript( )



Dont do this

50

some text

or

some text

or

some text



An improvement, but still...

51

some text



document.getElementsByTagName( 'body' )[0].onclick = # clickDelegator;

function clickDelegator( e ){ e = ( e ) ? e : event; var el = e.target || e.srcElement;

// external links if( el.nodeName.toLowerCase() == 'a' && el.getAttribute( 'rel' ) == 'external' ){ newWin( el.href ); }}

Youre hot

53



55



55

JavaScriptCSS



Remember stu" like this?

56

Foo

Obvisouly, we should be doing this instead:

a, a:link, a:visited { color: blue;}a:hover { color: red;}



Isnt this the same?

57

for( i=0; i



Small improvement

58

for( i=0; i



Separation

59

CSS:

.hidden { position: absolute; left: -999em;}

JavaScript:

for( i=0; i



Maintenance options

60

! external style rules added to your CSS file (by hand)

! external CSS file added to the document (by hand)

! external CSS file added to the document via script

! embedding CSS in the document via script



Option 1: Add by hand

61

At the end of your screen layout CSS file:

/* =START WickedCool Script CSS (do not remove) */ .wicked { color: red; font: bold 4em/2 "Comic Sans"; } .cool { color: blue; font: bold 4em/2 "Comic Sans"; } /* =END WickedCool Script CSS */



Option 2: Include by hand

62

Added to the head of your document:



function FindPath( filename ){ var path = false; var scripts = document.getElementsByTagName( 'script' ); for( var i=0; i



var WickedCool = { jsFile: 'WickedCool.js', cssFile: 'WickedCool.css', basePath: false, initialize: function(){ // determine the path this.basePath = FindPath( this.jsFile ); // add the CSS file var css = document.createElement( 'link' ); css.setAttribute( 'rel', 'stylesheet' ); css.setAttribute( 'type', 'text/css' ); css.setAttribute( 'media', 'screen' ); css.setAttribute( 'href', this.basePath + this.cssFile ); document.getElementsByTagName( 'head' # )[0].appendChild( css ); // do the rest of the wicked cool stuff } };

Option 3: Scripted include

64



But keep in mind

67



67

you need toavoid applying

script-related styles



67

until you knowyour script can run

and it hasinitialized properly



How do we do that?

68

! make your style rules specific:

.TabInterface-folder {

...

}

or

#TabInterface .tab {

...

}

#TabInterface .tab.active {

...

}



How do we do that?

69

! turn on script-related rules at run-time:

becomes



How do we do that?

69

! turn on script-related rules at run-time:

Default Activated

add -on to the class .tabbed .tabbed-on

add an activation class .auto-submit .auto-submit.active

change the form of the class .replace-me .replaced



Look for methods

71

function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ...}



Look for methods

72

function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return; /* code that uses document.getElementsByTagName() and document.getElementById() */}



Look for elements

73

function someFunction(){ if( !document.getElementsByTagName || !document.getElementsByTagName( 'p' ) ) return; /* code that uses document.getElementsByTagName() and requires the presence of a P element */ ...}



Look for identified elements

74

function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return; // code that requires the presence of #content ...}



Look for objects

75

function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ...}



Look for object versions

76

function someFunction(){ if( typeof( Prototype ) == 'undefined' || parseFloat( Prototype.Version ) < 1.5 ) return; // code that uses Prototype 1.5 or higher ...}



Look before you leap

77

window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); }};



PE with JavaScript

78

! Start with the content, then work your way out

! Get unobtrusive

! Keep some distance between your styles & your scripts

! Always wear your detective hat



How does itall come together?

80



Example 1: Tab Interface

81

Goal: to enable users to tab through content on a page, but to deliver the interface with a minimum of markup intrusion.



Traditional approach

82

Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with

friends, our Pumpkin Pie will make entertaining easy!

...

...

Overview

Ingredients

Directions

Nutrition



Traditional approach

82

Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with

friends, our Pumpkin Pie will make entertaining easy!

...

...

Overview

Ingredients

Directions

Nutrition

Overview

Ingredients

Directions

Nutrition



Static HTML with no style

83



A little typography

84



Typography and color

85




86




86

.tabbed



The actual source

87

Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with friends,

our Pumpkin Pie will make entertaining easy!

...

Ingredients

1 (9in) unbaked deep dish pie crust

! cup white sugar

1 tsp ground cinnamon

...

Directions

...



Understanding the flow

88



The code

89

function TabInterface( el, i ){

// Public Properties

this.Version = '0.3'; // version

// Private Properties

var _i = i; // incrementor

var _cabinet = el; // the "cabinet" element (container)

var _id = false; // ID of _cabinet

var _active = false; // ID of the active "folder"

var _tag = false; // tag we'll split it on

// the tab list

var _index = document.createElement( 'ul' );

// prototype elements

var _els = { li: document.createElement( 'li' ),

div: document.createElement( 'div' ) };

// methods to go here

};



The code

90


...

function initialize(){

// code to come

}

function addClassName( e, c ){

var classes = ( !e.className ) ? [] : e.className.split( ' ' );

classes.push( c );

e.className = classes.join( ' ' );

}

function removeClassName( e, c ){

var classes = e.className.split( ' ' );

for( var i=classes.length-1; i>=0; i-- ){

if( classes[i] == c ) classes.splice( i, 1 );

}


}

// start it up

initialize();

};



The code

91



// set the id

_id = el.getAttribute( 'id' ) || 'folder-' + _i;

if( !el.getAttribute( 'id' ) ) el.setAttribute( 'id', _id );

// trim whitespace

var node = _cabinet.firstChild;

while( node ){

var nextNode = node.nextSibling;

if( node.nodeType == 3 &&

!/\S/.test( node.nodeValue ) )

_cabinet.removeChild( node );

node = nextNode;

}

}

...

};

// set the id





The code

91



// set the id



// trim whitespace


while( node ){





node = nextNode;

}

}

...

};

// trim whitespace


while( node ){





node = nextNode;

}



The code

92



...

// find the first heading

var headers = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];

var hLen = headers.length;

for( var i=0; i



The code

93



...

// establish the folders

var rexp = new RegExp( '



The code

94



...

for( var k=0, aLen = arr.length; k



The code

95



...




The code

96


...

function swap( e ){

e = ( e ) ? e : event;

var tab = e.target || e.srcElement;

removeClassName( document.getElementById( _active + '-tab' ), 'active-tab' );

removeClassName( document.getElementById( _active ), 'visible' );

addClassName( tab, 'active-tab' );

addClassName( document.getElementById( tab.folder ), 'visible' );

_active = tab.folder;

}

...

};

function swap( e ){

}



Lets make it more flexible

97



...




Running it

98

// Load up TabInterface

if( document.getElementById &&

document.getElementsByTagName &&

document.createElement ){

var cabinets = Array();

addDOMLoadEvent( function(){

var collection = document.getElementsByTagName( '*' );

for( var i=0, cLen = collection.length; i



The full experience

99



Example 2: Collapsing Form

101

Goal: to create a search form with optional advanced filters. By default the optional filters should be hidden, but users should be able to show and hide them as they need to.



Collapsing Form as HTML

102



Collapsing Form with CSS

103




104




105



HTML hooks

106

form.collapsing



HTML hooks

106

fieldset.optional



Understanding the flow

107



The code

108

var Easy = {

addClassName: function( e, c ){

var classes = ( !e.className ) ? [] : e.className.split( ' ' );

classes.push( c );


},

removeClassName: function( e, c ){



if( classes[i] == c ) classes.splice( i, 1 );

}


},

hasClassName: function( e, c ){



if( classes[i] == c ) return true;

}

return false;

}

};



The code

109

var CollapsingForm = Class.create();

CollapsingForm.prototype = {

link: document.createElement( 'a' ),

linkText: [ document.createTextNode( 'More options' ),

document.createTextNode( 'Fewer options' ) ],

hidden: [],

state: false,

id: false,

};



The code

110


...

initialize: function( form, i ){

// set the id

this.id = i;

// get the fieldsets

var coll = form.getElementsByTagName( 'fieldset' );

// look for hiddens

var hide = false;

for( var i=coll.length-1; i>=0; i-- ){

if( coll[i].className.indexOf( 'hide-me' ) != -1 ){

hide = true;

Easy.addClassName( coll[i], 'hidden' );

Easy.removeClassName( coll[i], 'hide-me' );

this.hidden.push( coll[i] );

}

}

// more to come

}

};



The code

111



...


...

// stop if no hiddens

if( hide === false ) return;

this.state = 'less';

// create & append the link to the first fieldset

this.link = document.createElement( 'a' );

this.link.className = 'show-hide-link';

this.link.setAttribute( 'href', '#' );

Event.observe( this.link, 'click',

this.toggle.bindAsEventListener( this ), false );

this.link.appendChild( this.linkText[0] );

coll[0].appendChild( this.link );

Easy.addClassName( form, 'collapsible' );

Easy.removeClassName( form, 'collapsing' );

}

};



The code

112




...

},

toggle: function(){

if( this.state == 'less' ){

this.showMore();

} else {

this.showLess();

}

},

showMore: function(){

// code to come

},

showLess: function(){

// code to come

}

};



The code

113



...

showMore: function(){

for( var i=0; i



Collapsing Form with JS

114



116

Thank youfor not falling asleep.

Aaron Gustafson

Progressive Enhancement with JavaScript

and CSS

Progressive Enhancement with JavaScript and CSSe Enhancement With JavaScript and CSS

Documents

handsprogressive enhancement

cssgroup css

older browsers

cssthe peanut

latest browsers

certain level of css

chocolaty goodnesswebvisons

older devices