Tulsa TechFest 2011

Before The Future, The Past

There are a lot of old browsers out there.
Browsers that don't behave the same, whether in their CSS implementations or JavaScript capabilities.
So developers end up doing something like this:

        //initialization, browser, os detection
        var d, dom, nu='', brow='', ie, ie4, ie5, ie5x, ie6, ie7;
        var ns4, moz, moz_rv_sub, release_date='', moz_brow, moz_brow_nu=''
        var moz_brow_nu_sub='', rv_full=''; 
        var mac, win, old, lin, ie5mac, ie5xwin, konq, saf, op, op4, op5, op6, op7;

        d=document;
        n=navigator;
        nav=n.appVersion;
        nan=n.appName;
        nua=n.userAgent;
        old=(nav.substring(0,1)>4);
        mac=(nav.indexOf('Mac')!=-1);
        win=( ( (nav.indexOf('Win')!=-1) || (nav.indexOf('NT')!=-1) ) && !mac)?true:false;
        //it only gets worse from there

It doesn't have to be that way anymore

Browsers stink, so why would you want to sniff them?

Two big problems:

navigator.userAgent lies, sometimes even by default.
Sniffing sets you up for ever increasing maintenance and scaling headaches.

solution: detect features instead

Modernizr: Front-End Development Done Right

Project Lead: Faruk Ateş

Lead Developer: Paul Irish

Released by Faruk Ateş in July 2009
A couple of months later, Paul Irish and friends made the code smaller and faster
Hosted on Github: https://github.com/Modernizr/Modernizr
Primary site at http://modernizer.com
Being used by:

The Economist
About.com
Twitter
Google
Microsoft (included in MVC 3)

What it is:

Modernizr is an open-source JavaScript library for feature detection. It provides dynamic loading so you load only the detections you need.

What it isn't:

With the exception of incorporating Remy Sharp's HTML5 Shim script, Modernizr does not fix HTML5 deficiencies in browsers.

Installation

The development version includes all feature detections available in Modernizr. It is uncompressed and fully commented.

For production, use the Custom Modernizr Builder, selecting only the feature detections you actually need. This produces a slimmed down and minified source for you.

How it works

Tests for over 40 next-generation features in a matter of milliseconds
Creates a JavaScript object that contains the results as boolean properties
Adds classes to the html element that explain what features are and are not supported
Provides a script loader so you can pull in polyfills to backfill functionality in old browsers

Supported Browsers

IE6+
Firefox 3.5+
Opera 9.6+
Safari 2+
Chrome
Mobile Safari
Android Webkit
Opera Mobile
Firefox Mobile
Blackberry 6+ (still testing, but pretty sure)

Features detected: CSS

@font-face
background-size
border-image
border-radius
box-shadow
Flexible Box Model (flexbox)
hsla()
Multiple backgrounds (mutiplebgs)
opacity
rgba()
text-shadow
CSS Animations
CSS Columns
CSS Gradients

Features detected: CSS Continued

CSS Reflections
CSS Columns
CSS Gradients
CSS Reflections
CSS 2D Transforms
CSS 3D Transforms
CSS Transitions

Features detected: HTML5

applicationCache
Canvas
Canvas Text
Drag and Drop
hashchange Event (hashchange)
History Management (history)
HTML5 Audio (audio)
HTML5 Video (video)
IndexedDB

Features detected: HTML5 Continued

Input Attributes
- autocomplete
- autofocus
- list
- placeholder
- max
- min
- multiple
- pattern
- required
- step

Features detected: HTML5 Continued

Input Types
- search
- tel
- url
- email
- datetime
- date
- month
- week
- time
- datetime-local
- number
- range
- color

Features detected: HTML5 Continued

localStorage
Cross-window Messaging (postmessage)
sessionStorage
Web Sockets
Web SQL Database
Web Workers

Features detected: Miscellaneous

Geolocation API (geolocation)
Inline SVG
SMIL
SVG
SVG Clip Paths
Touch Events (touch)
WebGL

The HTML Element

        <!--Example: Chrome 14.0-->
        <html class="js flexbox canvas canvastext 
          webgl no-touch geolocation postmessage websqldatabase 
          indexeddb hashchange history draganddrop websockets 
          rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow 
          textshadow opacity cssanimations csscolumns cssgradients cssreflections 
          csstransforms csstransforms3d csstransitions fontface generatedcontent 
          video audio localstorage sessionstorage webworkers applicationcache svg 
          inlinesvg smil svgclippaths ready" lang="en">
          <!--snip-->
        </html>

Sample CSS

        /* From deck.js */
        .js .deck-container {
        visibility: hidden;
        }
        .ready .deck-container {
        visibility: visible;
        }
        .touch .deck-container {
        -webkit-text-size-adjust: none;
        }

The Modernizr Object

        var audio = Modernizr.audio;

        for(codec in audio){
        if( audio.hasOwnProperty(codec) ){
        console.log(codec + "support: " + audio[codec]);
        }
        }

The Undetectables

There are a variety of features and attributes that cannot be detected in a consistent manner across all browsers.

Those that have been identified are listed on the Modernizr wiki Undetectables page, along with workarounds if available.

Resources

Modernizer Documentation: http://www.modernizr.com/docs/
Annotated Modernizer source code: http://modernizr.github.com/Modernizr/annotatedsource.html

Polyfills

What are they?

A polyfill, or shim, uses JavaScript to add a missing API to non-compliant browsers.

There are polyfills available for almost all features detected by Modernizr. They are listed on the Modernizr Wiki.

Don't get carried away with them.

Polyfills

Selected Examples

storage polyfill by Remy Sharp
innerShiv by Joe Bartlett
Placeholder Enhanced by Denis Ciccale

HTML5 Boilerplate

Best Practices in a Can

First released in August 10, 2010
Version 2.0 released August 2011
Primary Contributors
- Paul Irish
- Divya Manian
- Shichuan
- Mathias Bynens
- Nicolas Gallagher

HTML5 Boilerplate

normalize.css

normalize.css was developed by Nicolas Gallagher along with Jonathan Neal for use instead of the traditional CSS Reset stylesheet.

Rather than zeroing everything out, it provides reasonable default styles based on extensive research of browser internal stylesheets.
Saves the hassle of having to define everything all over again.
Gets those annoying reset styles out of your development tools.
Saves bandwidth.

HTML5 Boilerplate

Build Script

The build script produces your production-ready site.

Ant script
Inlines any @import stylesheets
Uses yuicompressor to minify CSS, JavaScript, and HTML
Will autogenerate a cache manifest for offline mode

HTML5 Boilerplate

Prompt IE6 users to install Chrome Frame!

HTML5 Boilerplate

respond.js

respond.js provides media query support so you can do responsive web design across most browsers, including IE6-8.

Modernizr, Polyfills, and HTML5 Boilerplate

Who Am I?

Rod Knowlton

Senior Web Application Development Specialist, HCSC

Professional Expert

Before The Future, The Past

It doesn't have to be that way anymore

Browsers stink, so why would you want to sniff them?

Two big problems:

solution: detect features instead

Modernizr: Front-End Development Done Right

Project Lead: Faruk Ateş

Lead Developer: Paul Irish

What it is:

What it isn't:

Installation

How it works

Supported Browsers

Features detected: CSS

Features detected: CSS Continued

Features detected: HTML5

Features detected: HTML5 Continued

Features detected: HTML5 Continued

Features detected: HTML5 Continued

Features detected: Miscellaneous

The HTML Element

Sample CSS

The Modernizr Object

The Undetectables

Resources

Polyfills

What are they?

Polyfills

Selected Examples

HTML5 Boilerplate

Best Practices in a Can

HTML5 Boilerplate

normalize.css

HTML5 Boilerplate

Build Script

HTML5 Boilerplate

Prompt IE6 users to install Chrome Frame!

HTML5 Boilerplate

respond.js

Thanks for listening

http://j.mp/nF1gjT