progressive enhancement with javascript and csse enhancement with javascript and css

138
Aaron Gustafson Progressive Enhancement with JavaScript and CSS

Upload: dmaynard005

Post on 16-Sep-2015

234 views

Category:

Documents


1 download

DESCRIPTION

Progressive Enhancement with JavaScript and CSS

TRANSCRIPT

  • 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