Embed Size (px)
Citation preview
Agenda
Cross-Browser Challenges
Cross-Browser DOs
Cross-Browser DON'Ts
3
Cross-Browser Challenges
New versions released frequently
Many different versions
Many different browsers
DemoCSS3 Border Radius
5
if( condition )
{
// Primary code
}
else
{
// Alternate code
}
What matters most is detection…
6
if( navigator.userAgent.indexOf('MSIE') != -1 )
{
// Code written for browser X
}
else
{
// Code written for browser Y
}
First we had version detection…
7
if( document.all )
{
// Code written for browser X
}
else
{
// Code written for browser Y
}
Then we had object detection…
8
if( window.addEventListener )
{
// Code written for browsers
// supporting addEventListener
}
else
{
// Code written for browsers that
// don't support addEventListener
}
Now we have feature detection…
9
Best Practices
• DO:
• Feature Detection
• Behavior Detection
• DON'T:
• Detect Specific Browsers
• Assume Unrelated Features
• IMPACT: Reduced Maintenance Cost
10
DO: Feature Detection
• Test for a feature before using it
• Key for newer features
• Not as critical for well-established features
• Test for standards first
• Always use standards when supported
• Avoid accidentally using legacy functionality
11
window.addEventListener("load", fn, false);
DO: Feature Detection
12
if( window.addEventListener )
{
window.addEventListener("load", fn, false);
}
DO: Feature Detection
13
if( window.addEventListener )
{
window.addEventListener("load", fn, false);
}
else if( window.attachEvent )
{
window.attachEvent("onload", fn);
}
DO: Feature Detection
DemoW3C Event APIs
15
DO: Behavior Detection
• Problem
• A browser has a bug in a feature
• Basic feature detection fails to identify the issue
• Solution
• Run a test to detect the broken behavior
• Apply a workaround when the broken behavior is detected
16
// Run a test that targets a known issue
var testPassed = runTest();
// Check if the test passed
if(!testPassed)
{
// If not, apply a workaround
}
DO: Behavior Detection
DemogetElementById
18
Code Path Comparison
= Detection Point = Alternate Code
Feature DetectionVersion Detection
19
DON'T: Detect Specific Browsers
• "But I know this feature works in that browser!"
• The feature may also work in other browsers
• New browsers may add support for the feature
• "But I know this feature has a bug in that browser!"
• The same bug may also exist in other browsers
• The bug may (or may not) be fixed in the next version
• Cost
• Risk of breaking when new browsers are released
20
// Using the User Agent String
if( navigator.userAgent.indexOf(x) != -1 )
{
// Browser-specific code
}
DON'T: Detect Specific Browsers
21
// Using Objects
if( document.all )
{
// Browser-specific code
}
DON'T: Detect Specific Browsers
22
// Using Library-based Detection
if( jQuery.browser.msie )
{
// Browser-specific code
}
DON'T: Detect Specific Browsers
23
// Using Conditional Comments
<!--[if IE]>
// Browser-specific code
<[endif]-->
DON'T: Detect Specific Browsers
24
// ... but if you must, target legacy only
<!--[if IE lte 7]>
// Legacy browser-specific code
<[endif]-->
DON'T: Detect Specific Browsers
25
DON'T: Assume Unrelated Features
• "But I know all browsers with X also have Y!"
• New browsers may have X and not Y
• Cost
• Risk of breaking when new browsers are released
26
if( window.postMessage )
{
…
window.addEventListener();
…
}
DON'T: Assume Unrelated Features
27
Why doesn't everyone do this already?
Each
solu
tion is
differ
ent
Easier to think of
browsers Single pivot
tendency
…but remember the cost
DO:Feature detection beyond script
29
.target
{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
DO: Feature Detection(in CSS)
30
<!-- Elements with fallback content -->
<video src="test.vid">
<object src="test.vid">
<a href="test.vid">
Download Video
</a>
</object>
</video>
DO: Feature Detection(in HTML)
31
<!-- Generic element handling -->
<svg width="100" height="100">
<circle fill="#090" cx="50" cy="50" r="50"/>
</svg>
DO: Feature Detection(in HTML)
DemoSVG in HTML5
33
Call to Action
Avoid Browser
Detection
Use Feature Detection
Recap
Cross-Browser Challenges
Cross-Browser DOs
Cross-Browser DON'Ts
More Info: http://api.jquery.com/jQuery.support/
Keep up on the latesthttp://blogs.msdn.com/ie
Meet the team in the Internet Explorer Lounge located in The
Commons!
Download the Internet Explorer 9 Platform preview
www.IETestDrive.com
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions,
it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
