progressive enhancement with javascript and csse enhancement with javascript and css
DESCRIPTION
Progressive Enhancement with JavaScript and CSSTRANSCRIPT
-
Aaron Gustafson
Progressive Enhancement with JavaScript
and CSS
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
What isProgressive
Enhancement?
2
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
ProgressiveEnhancement
vs.Graceful
Degradation
3
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 5
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 5
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Progressive Enhancementfocuses on contentcontent
6
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Content is why we build websites
and should beour central focus
7
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 8
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 9
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
How does it work?
10
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 11
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
12
Flavorful nugget of content(semantic goodness)
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
13
Rich, indulgent design
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
14
Sweet interactivity(keeps it from melting in your hands)
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 15
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Technologies applied as layers
16
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 17
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 18
stuffandnonsense.co.uk/archives/web_standards_trifle.html
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
19
Why a peanut m&m?
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The peanut is good for
20
! diabetics
! search engine spiders
! mobile devices
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
21
Its a basic levelof support
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
22
! some browsers only handle a certain level of CSS
! some companies turn o" JavaScript
Rich, chocolaty goodness
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
23
It can be beautiful(and progressive)
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The candy coating
24
! JavaScript can turn a website into an experience
! we can deliver our scripts a la carte
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
25
ProgressiveEnhancement
with CSS
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
26
type.csslayout.csscolor.cssmain.css
Group CSS by function
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
26
type.css
layout.css color.css
Group CSS by function
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
27
Group CSS by function
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
27
Group CSS by function
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
28
media="screen,projection" />
Easy support for NN4.x
media="screen,projection" />
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
29
Supporting alternate media
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
29
Supporting alternate media
media="screen,projection"
@import 'screen.css';@import 'screen.css' s; screen;
@import 'print.css' print;
@import 'mobile.css' handheld;
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Internet Explorer 6is the new Netscape 4
30
(the browser that wouldnt die)
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
32
Dealing with IEs CSS issues
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Keep your style sheetshack free
33
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
34
Make smart decisions
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Contact Us
Send us a message. All fields are required.
Name
Email
Message
Send It
34
Make smart decisions
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Contact Us
Send us a message. All fields are required.
Name
Email
Message
Send It
34
Make smart decisions
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Contact Us
Send us a message. All fields are required.
Name
Email
Message
Send It
34
Make smart decisions
Name
Email
Message
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
34
Make smart decisionslabel:after {
content: ":";
}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Have fun with it
35
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Have fun with it
35
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Have fun with it
35
/* inside CC linked CSS file for
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
38
ProgressiveEnhancementwith JavaScript
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Restraint& Planning
39
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Dear George Lucas, please dont sue me. Kthxbye.
A long time ago, in acubicle far, far away...
40
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
What canJavaScript do?
41
JavaScript
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
How shouldJavaScriptbe used?
41
JavaScript
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Progressive Enhancementhelps us by reminding usto focus on the content
42
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Back to basics
43
XHTML + HTTP
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Back to basics
43
solid foundation
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
All code neededto understandand use a site
should exist beforeany scripts run
44
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Period.
44
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Consider lala.com
45
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Without JavaScript
46
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Without JavaScript
46
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Without JavaScript
46
Doh!
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
And looking at the markup...
47
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
And looking at the markup...
47
Ugh!
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
What about search?
48
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
What aboutalternative devices?
48
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
EnterUnobtrusiveJavaScript
49
the cornerstone of ProgressiveEnhancement with JavaScript( )
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Dont do this
50
some text
or
some text
or
some text
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
An improvement, but still...
51
some text
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
window.onload = handleExternalLinks;
function handleExternalLinks(){ var server = document.location.hostname; var anchors = document.getElementsByTagName("a"); var i, href; for( i=0; i < anchors.length; i++ ){ href = anchors[i].href; if( href.indexOf("http://" + server) == -1 && href.indexOf("https://" + server) == -1 ){ // HREF is not a file on my server anchors[i].onclick = function(){ newWin( this.href ); }; } }}
Getting warmer...
52
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
55
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
55
JavaScriptCSS
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Remember stu" like this?
56
Foo
Obvisouly, we should be doing this instead:
a, a:link, a:visited { color: blue;}a:hover { color: red;}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Isnt this the same?
57
for( i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Small improvement
58
for( i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Separation
59
CSS:
.hidden { position: absolute; left: -999em;}
JavaScript:
for( i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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 */
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Option 2: Include by hand
62
Added to the head of your document:
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
function FindPath( filename ){ var path = false; var scripts = document.getElementsByTagName( 'script' ); for( var i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
function addCSS( styles ){ var el = document.createElement( 'style' ); el.setAttribute( 'type', 'text/css' ); if( el.styleSheet ){ el.styleSheet.cssText = styles; } else { el.appendChild( document.createTextNode( styles ) ); } document.getElementsByTagName( 'head' # )[0].appendChild( el ); }
Option 4: Scripted embed
65
based on the work of Nicholas Zakas
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
var WickedCool = { _css: '.wicked { color: red; font: bold 4em/2' "Comic #Sans"; } ' + '.cool { color: blue; font: bold 4em/2' "Comic #Sans"; }', initialize: function(){ // add the CSS addCSS( this._css ); // do the rest of the wicked cool stuff } };
Option 4: Scripted embed
66
based on the work of Nicholas Zakas
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
But keep in mind
67
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
67
you need toavoid applying
script-related styles
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
67
until you knowyour script can run
and it hasinitialized properly
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
How do we do that?
68
! make your style rules specific:
.TabInterface-folder {
...
}
or
#TabInterface .tab {
...
}
#TabInterface .tab.active {
...
}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
How do we do that?
69
! turn on script-related rules at run-time:
becomes
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
WEBVISONS - 22 MAY 2008 70
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Look for methods
71
function someFunction(){ if( !document.getElementsByTagName ) return; // code that uses document.getElementsByTagName() ...}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Look for methods
72
function someFunction(){ if( !document.getElementsByTagName || !document.getElementById ) return; /* code that uses document.getElementsByTagName() and document.getElementById() */}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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 */ ...}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Look for identified elements
74
function someFunction(){ if( !document.getElementById || !document.getElementById( 'content' ) ) return; // code that requires the presence of #content ...}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Look for objects
75
function someFunction(){ if( typeof( Prototype ) == 'undefined' ) return; // code that uses Prototype ...}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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 ...}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Look before you leap
77
window.onload = function(){ if( document.getElementsByTagName && document.getElementById ){ someFunction(); }};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
How does itall come together?
80
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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.
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Static HTML with no style
83
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
A little typography
84
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Typography and color
85
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Static HTML with no style
86
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Static HTML with no style
86
.tabbed
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
...
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Understanding the flow
88
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
90
function TabInterface( el, i ){
...
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 );
}
e.className = classes.join( ' ' );
}
// start it up
initialize();
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
91
function TabInterface( el, i ){
function initialize(){
// 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
_id = el.getAttribute( 'id' ) || 'folder-' + _i;
if( !el.getAttribute( 'id' ) ) el.setAttribute( 'id', _id );
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
91
function TabInterface( el, i ){
function initialize(){
// 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;
}
}
...
};
// 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;
}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
92
function TabInterface( el, i ){
function initialize(){
...
// find the first heading
var headers = [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ];
var hLen = headers.length;
for( var i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
93
function TabInterface( el, i ){
function initialize(){
...
// establish the folders
var rexp = new RegExp( '
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
94
function TabInterface( el, i ){
function initialize(){
...
for( var k=0, aLen = arr.length; k
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
95
function TabInterface( el, i ){
function initialize(){
...
for( var k=0, aLen = arr.length; k
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
96
function TabInterface( el, i ){
...
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 ){
}
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Lets make it more flexible
97
function TabInterface( el, i ){
function initialize(){
...
for( var k=0, aLen = arr.length; k
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The full experience
99
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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.
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Collapsing Form as HTML
102
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Collapsing Form with CSS
103
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Collapsing Form with CSS
104
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Collapsing Form with CSS
105
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
HTML hooks
106
form.collapsing
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
HTML hooks
106
fieldset.optional
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Understanding the flow
107
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
108
var Easy = {
addClassName: function( e, c ){
var classes = ( !e.className ) ? [] : e.className.split( ' ' );
classes.push( c );
e.className = classes.join( ' ' );
},
removeClassName: function( e, c ){
var classes = e.className.split( ' ' );
for( var i=classes.length-1; i>=0; i-- ){
if( classes[i] == c ) classes.splice( i, 1 );
}
e.className = classes.join( ' ' );
},
hasClassName: function( e, c ){
var classes = e.className.split( ' ' );
for( var i=classes.length-1; i>=0; i-- ){
if( classes[i] == c ) return true;
}
return false;
}
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
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,
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
110
CollapsingForm.prototype = {
...
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
}
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
111
var CollapsingForm = Class.create();
CollapsingForm.prototype = {
...
initialize: function( form, i ){
...
// 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' );
}
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
112
var CollapsingForm = Class.create();
CollapsingForm.prototype = {
initialize: function( form, i ){
...
},
toggle: function(){
if( this.state == 'less' ){
this.showMore();
} else {
this.showLess();
}
},
showMore: function(){
// code to come
},
showLess: function(){
// code to come
}
};
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
The code
113
var CollapsingForm = Class.create();
CollapsingForm.prototype = {
...
showMore: function(){
for( var i=0; i
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
Collapsing Form with JS
114
-
WEBVISONS - 22 MAY 2008
PROGRESSIVE ENHANCEMENT WITH JAVASCRIPT AND CSS
116
Thank youfor not falling asleep.
-
Aaron Gustafson
Progressive Enhancement with JavaScript
and CSS