Embed Size (px)
DESCRIPTION
Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring existing and future browsers render your web pages as expected? This is where feature detection, Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to code with HTML5 and CSS3 features that won’t break for the existing and future browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. Also, a real-life case study will be used to demonstrate step by step how to build Cross-Browser Plug-in-Free experiences. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in the future. Expect a lot of demos and code in the session.
Citation preview
Doris Chen PhD
Developer Evangelist
Microsoft
dorischenmicrosoftcom
httpblogsmsdncomdorischen
doristchen
Practical HTML5
Using It Today
twitter doristchen Blog httpblogsmsdncomdorischen
Who am I Developer Evangelist at Microsoft based in Silicon
Valley CA
Blog httpblogsmsdncombdorischen
Twitter doristchen
Email dorischenmicrosoftcom
over 15 years of experience in the software industry focusing on web technologies
Spoke and published widely at JavaOne OReilly Silicon Valley Code Camp SD West SD Forum and worldwide User Groups meetings
Doris received her PhD from the University of California at Los Angeles (UCLA)
PAGE 2
twitter doristchen Blog httpblogsmsdncomdorischen
Agenda
PAGE 3
Browser Fragmentation
Feature Detection
Polyfills and Shims Examples
Summary and Resources
Polyfills and Shims
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Non-Modern Browsers
Most non-modern browsers have trouble
Non-modern Browsers (ref caniusecom)
IE 6 - 8
Firefox 36 and below
Safari 40 and below
Chrome 7
Opera 10x and below
Even modern browsers have issues
Varying levels of feature support across all major browsers
PAGE 5
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Who am I Developer Evangelist at Microsoft based in Silicon
Valley CA
Blog httpblogsmsdncombdorischen
Twitter doristchen
Email dorischenmicrosoftcom
over 15 years of experience in the software industry focusing on web technologies
Spoke and published widely at JavaOne OReilly Silicon Valley Code Camp SD West SD Forum and worldwide User Groups meetings
Doris received her PhD from the University of California at Los Angeles (UCLA)
PAGE 2
twitter doristchen Blog httpblogsmsdncomdorischen
Agenda
PAGE 3
Browser Fragmentation
Feature Detection
Polyfills and Shims Examples
Summary and Resources
Polyfills and Shims
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Non-Modern Browsers
Most non-modern browsers have trouble
Non-modern Browsers (ref caniusecom)
IE 6 - 8
Firefox 36 and below
Safari 40 and below
Chrome 7
Opera 10x and below
Even modern browsers have issues
Varying levels of feature support across all major browsers
PAGE 5
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Agenda
PAGE 3
Browser Fragmentation
Feature Detection
Polyfills and Shims Examples
Summary and Resources
Polyfills and Shims
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Non-Modern Browsers
Most non-modern browsers have trouble
Non-modern Browsers (ref caniusecom)
IE 6 - 8
Firefox 36 and below
Safari 40 and below
Chrome 7
Opera 10x and below
Even modern browsers have issues
Varying levels of feature support across all major browsers
PAGE 5
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Non-Modern Browsers
Most non-modern browsers have trouble
Non-modern Browsers (ref caniusecom)
IE 6 - 8
Firefox 36 and below
Safari 40 and below
Chrome 7
Opera 10x and below
Even modern browsers have issues
Varying levels of feature support across all major browsers
PAGE 5
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Non-Modern Browsers
Most non-modern browsers have trouble
Non-modern Browsers (ref caniusecom)
IE 6 - 8
Firefox 36 and below
Safari 40 and below
Chrome 7
Opera 10x and below
Even modern browsers have issues
Varying levels of feature support across all major browsers
PAGE 5
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Browser Fragmentation
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Fragmentation
Varying Levels of Support
Across browsers
Across browser versions
New versions released
constantly
Browser detection doesnrsquot
work
Fixes based on assumptions
Full-time job tracking
changes
PAGE 7
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Feature Detection
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection Based on what browsers support not their versions
Check for the feature you want to use
Object Method Property Behavior
Detect for standards-based features first
Browsers often support both standards and legacy
Standards are your most stable ground to build upon
Dynamically load custom code to mimic missing features
PAGE 9
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
If not IE then use addEventListenerhellip
if (navigatoruserAgentindexOf(MSIE) == -1)
windowaddEventListener( ldquoloadrdquo popMessage false )
else if (windowattachEvent)
windowattachEvent( ldquoonloadrdquo popMessage)
Bad
PAGE 10
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Why not Check for a Browser
if (windowaddEventListener) windowaddEventListener( ldquoloadrdquo popMessage false ) else if (windowattachEvent) windowattachEvent( ldquoonloadrdquo popMessage)
Good
PAGE 11
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
What Happens When Feature Detection Looks Like Thishellip
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Yuck Even the monkey is freaked
PAGE 12
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Best option in my opinion for thishellip
httpwwwmodernizrcom
PAGE 13
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Best feature detection Support
Detects
All major HTML5 features
All major CSS3 features
Includes HTML5Shim for semantic tag support
Widespread adoption
Twitter National Football League Burger King and many morehellip
Constantly updated
Shipping with ASPNET MVC 3 Tools update
PAGE 14
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Get Custom Build
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
function()
var
sheet bool
head = docHead || docElement
style = documentcreateElement(style)
impl = documentimplementation || hasFeature function() return false
styletype = textcss
headinsertBefore(style headfirstChild)
sheet = stylesheet || stylestyleSheet
var supportAtRule = implhasFeature(CSS2 )
function(rule)
if ((sheet ampamp rule)) return false
var result = false
try
sheetinsertRule(rule 0)
result = (srci)test(sheetcssRules[0]cssText)
sheetdeleteRule(sheetcssRuleslength - 1)
catch(e)
return result
function(rule)
if ((sheet ampamp rule)) return false
sheetcssText = rule
return sheetcssTextlength == 0 ampamp (srci)test(sheetcssText) ampamp
sheetcssText
replace(r+|n+g )
indexOf(rulesplit( )[0]) === 0
bool = supportAtRule(font-face font-family font src url(data) )
headremoveChild(style)
return bool
Test for font-face You can do this
PAGE 16
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Test for font-face Or hellip
if (Modernizrfontface)
hellip
PAGE 17
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Demo
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Polyfills and Shims
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
What are they
Typically JavaScript HTML amp CSS code
What do they do
Provides the technology that you the developer expect the browser to provide natively
Provides support for missing features
When do you use them
Use them to fallback gracefully or mimic functionality
PAGE 20
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
21
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Whatrsquos the Difference
Polyfill
Replicates the real standard feature API
You can develop for the future
Shims
Provides own API to a missing feature
Doesnrsquot adhere to a specification but fills the gap
Generally provides more features
PAGE 22
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Polyfills amp Shims
Big List of Polyfills httpbitlyb5HV1x
Some are good some not so good
Some frequently used Polyfills amp Shims
Polyfill
HTML5Shim - Semantic tag support
Storage Polyfill - HTML5 localStorage
H5F ndash Simulates new HTML5 form types
Shims
Amplify Store ndash persistent client-side storage using localStorage globalStorage sessionStorage amp userData
easyXDM ndash Cross-domain messaging
PAGE 23
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Consider This You need to vet the code
Does it work as expected
Cross-browser
You may need to support it in the future
Developer abandons work
Do you have the skills to maintain it
API Consistency
Will you need to rewrite your code later
PAGE 24
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV SPAN and other elements with class and ID attributes
New elements include header nav article section aside and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
PAGE 26
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 Semantic Tags
ltbodygt ltheadergt lthgroupgt lth1gtDoris Chen Dancinglth1gt lth2gtFunky Townlth2gt lthgroupgt ltheadergt ltnavgt ltulgtNavigation linksltulgt ltnavgt
ltsectiongt ltarticlegt ltheadergt lth1gtCan you believe itlth1gt ltheadergt ltsectiongt
ltmarkgtDoris dancingltmarkgt
ltsectiongt ltarticlegt
ltsectiongt ltasidegtAside items (ie links)ltasidegt ltfiguregt ltimg src= gt ltfigcaptiongtDoris dancingltfigcaptiongt ltfiguregt ltfootergtCopyright copy 2011ltfootergt
ltbodygt
Supported in Internet Explorer 9
PAGE 27
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
ltdiv id=rdquonavrdquogt
ltdiv id=rdquosidebarrdquogt ltdiv id=rdquoarticlerdquogt
ltdiv id=rdquofooterrdquogt
ltdiv id=rdquoheaderrdquogt
HTML Tags
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
New Semantic HTML Tags
ltnavgt
ltasidegt ltsectiongt
ltarticlegt
ltfootergt
ltheadergt
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Recognition amp Styling Non-modern browsers donrsquot recognize the new
tags
Internal stylesheets not updated
You canrsquot style elements not recognized
PAGE 30
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Semantic Tags
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
HTML5 Video amp Audio ltaudio ltvideo
src= src= The url to the audio or video
width= The width of the video element
height= The height of the video element
poster= The url to the thumbnail of the video
preload= preload= (none metadata auto) Start downloading
autoplay autoplay Audio or video should play immediately
loop loop Audio or video should return to start and play
controls controls Will show controls (play pause scrub bar)
gt gt
hellip hellip
ltaudiogt ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Compatibility Table HTML5 ltvideogt
vCurrent 9 6 504 10064820
4 1101
VP8
(WebM)
video
support
Yes
Yes No () Yes Yes
H264 video
format No () Yes Yes () No ()
PAGE 34
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Elements With Fall Backs
PAGE 35
Browsers wonrsquot render elements
they donrsquot understand
But they will render whatrsquos
between those elements
For example ltvideo src=ldquovideomp4rdquogt What will it render ltvideogt
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
HTML5 ltvideogt Degrading Gracefully
ltvideo id=myVideo controls=controls autoplaygt ltsource src=videosvideomp4 type=videomp4 gt ltsource src=videosvideowebm type=videowebm gt
lt-- FlashSilverlight video here --gt ltobject type=applicationx-silverlight-2 width=640 height=384gt ltparam name=source value=resourcesVideoPlayer10_01_18xapgtltparamgt ltparam name=initParams value=m=httpmysitecomvideomp4autostart=trueautohide=truegtltparamgt ltparam name=background value=00FFFFFFgtltparamgt ltparam name=x-allowscriptaccess value=nevergtltparamgt ltparam name=allowScriptAccess value=never gt ltparam name=wmode value=opaque gt ltobjectgt
ltvideogt
Multiple video sources to support multiple browsers
PAGE 36
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Video fall back
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Use Respondjs for Media Queries Respondjs
Enable responsive web designs in browsers
A fast polyfill for CSS3 Media Queries
Lightweight 3kb minified 1kb gzipped
for Internet Explorer 6-8 and more
httpsgithubcomscottjehlRespond
ltheadgt ltmeta charset=utf-8 gt ltlink href=testcss rel=stylesheetgt ltscript src=respondminjsgtltscriptgt
ltheadgt
PAGE 39
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Use Respond for Media Queries
Realife httpbostonglobecom
Demo
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Polyfills amp Shims Examples
Semantic Tags
Video Tags
Media Queries
Conditional Resource Loader
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 42
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 43
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Asynchronous conditional resource loader for JavaScript and CSS
Integrated into Modernizr only 16kb
Load only the scripts that your users need
Fully decouples preloading from execution
full control of when your resource is executed
change that order on the fly
httpyepnopejscom
PAGE 44
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Yepnope and Modernizr
ltscript type=textjavascript
src=yepnope102-minjsgtltscriptgt
ltscript type=textjavascriptgt
yepnope(
test Modernizrgeolocation
yep normaljs
nope [polyfilljs wrapperjs]
)
ltscriptgt
PAGE 45
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
MSNBC site
Building Cross Browser Plugin-free Experiences
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Building Cross Browser Plugin-free Experiences
ldquoPlug-inrdquo refers broadly to browser extensions that run native client code using low-level browser interfaces Adobe Flash ActiveX controls and Browser Helper Objects Some of Webkitrsquos Approach
More browsers start to adopt plug-in-free approach Lots of Web browsing simply donrsquot support plug-ins
IE 10 Metro
Browsers that do support plugins offer many ways to run plugin free YouTube httpwwwyoutubecomhtml5
MSNBC plugin-free experience for rich media Styles and Scripts
PAGE 47
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Need Plugin on Old MSNBC Site
PAGE 48
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Step 1 Declare Standards Mode and Valid Markup for Modern Browsers
Ensure that you are operating in standards mode
Use valid markup include the HTML5 doctype at the top of your document
ltDOCTYPE htmlgt
PAGE 49
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Step 2 Update CSS3 vendor prefixes
The CSS3 language is constantly in a state of change New features suggested updated and standardized
For learning browser vendors offer experimental implementations via prefixed
Ensure that prefixes from each vendor are included in your site
PAGE 50
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Ensure all CSS3 prefixes included
background -webkit-gradient(
linear
left top
left bottom
color-stop(1 rgba(1921921926))
color-stop(05 rgba(0006))
)
background -webkit-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -moz-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -ms-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background -o-linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
background linear-gradient(
top rgba( 0 0 0 00 ) 0 rgba( 0 0 0 06 ) 50 )
PAGE 51
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Step 3 Get rid of browser Sniffing methods
Methods to determine what the userrsquos browser and device are capable of
if ( navigatoruserAgentindexOf(iPad) gt -1 )
Load HTML5 Experience
else
Load Flash Experience
if ( testsIE )
j = msie(dd+)i
k = navigatoruserAgentmatch(j)[1]
The user agent string is not immutable easily changed by plugins or even the user
Most modern browsers include the ability to easily change this value from their development tools
PAGE 52
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Sniffing Methods
PAGE 53
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Feature Detection
Remove the browser sniffing code and replace it with feature detection code
if ( Modernizrvideo ) Load HTML5 Video
Or
if ( documentcreateElement(ldquovideordquo)canPlayType ) Load HTML5 Video else Load Flash Video
PAGE 54
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Use Fiddler (no direct access) httpfiddler2com Modify remote files as though they were on
my local machine
A great way for testing changes without the risk of breaking your live site
if ((navigatoruserAgenttoLowerCase()indexOf(ipad)gt-1))
Flash Experience
Replace with
if ( documentcreateElement(video)canPlayType )
Flash Experience
PAGE 55
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
Fiddle Setup AutoResponder
PAGE 56
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
MSNBC Cross Browser Plugin-free
Demo
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
Take Away
Avoid browser detection
Browsers change
Varying levels of feature support across all major browsers
Use feature detection
Check for the feature you want to use
Detect for standards first
Use Modernizr ndash httpmodernizrcom
Cleaner code amp theyrsquove done the work for you
Polyfills and Shims
mimics a standard API to avoid a rewrite
Use Yepnope
For conditional resource loader work with Modernizr
PAGE 58
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
twitter doristchen Blog httpblogsmsdncomdorischen
RESOURCES
PAGE 59
bull HTML5 Cheat Sheets
httpbitlyhtml5cheatsheets
bull Free HTML5 Video Training
httpbitlyHTML5WebCampVideoTraining
bull Feature-specific demos bull httpiemicrosoftcomtestdrive
bull Real-world demos bull httpwwwbeautyofthewebcom
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://img.pdfslide.us/doc/110x75/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
