bit.ly/avranju
4.48%   3.45%   6.90%                                   IE8                        25.40%                                 ...
// If not IE then use addEventListener…
function(){     var     sheet, bool,     head = docHead || docElement,     style = document.createElement("style"),     im...
if(Modernizr.fontface){…}
http://bit.ly/polyfills
<object  type="application/x-silverlight-2" width="640" height="384">            <param name="source"       value="http://...
<video controls width="500">     <source src="video.mp4“ type="video/mp4" /></video>
Credit: Encoding.com
<video controls width="500">  <source src="video.mp4" type="video/mp4“ />  <source src="video.ogg" type="video/ogg“ />  <s...
<video controls width="500">  <source src="video.mp4" type="video/mp4“ />     <object type="application/x-silverlight-2“  ...
blogorama.nerdworks.inrajave@microsoft.com   @avranju
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Best practices for building cross browser compatible web apps
Upcoming SlideShare
Loading in …5
×

Best practices for building cross browser compatible web apps

532
-1

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
532
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
19
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Don’t do this because when IE starts supporting the standards compliant “addEventListener” this code will continue to use “attachEvent” which can potentially get deprecated.
  • Best practices for building cross browser compatible web apps

    1. 1. bit.ly/avranju
    2. 2. 4.48% 3.45% 6.90% IE8 25.40% IE97.79% Chrome 17 Others FF 1022.08% 15.17% IE6 IE7 Safari 5.1 14.73% Source: http://www.netmarketshare.com/
    3. 3. // If not IE then use addEventListener…
    4. 4. function(){ var sheet, bool, head = docHead || docElement, style = document.createElement("style"), impl = document.implementation || { hasFeature: function() { return false; } }; style.type = text/css; head.insertBefore(style, head.firstChild); sheet = style.sheet || style.styleSheet; var supportAtRule = impl.hasFeature(CSS2, ) ? function(rule) { if (!(sheet && rule)) return false; var result = false; try { sheet.insertRule(rule, 0); result = (/src/i).test(sheet.cssRules[0].cssText); sheet.deleteRule(sheet.cssRules.length - 1); } catch(e) { } return result; }: function(rule) { if (!(sheet && rule)) return false; sheet.cssText = rule; return sheet.cssText.length !== 0 && (/src/i).test(sheet.cssText) && sheet.cssText .replace(/r+|n+/g, ) .indexOf(rule.split( )[0]) === 0; }; bool = supportAtRule(@font-face { font-family: "font"; src: url(data:,); }); head.removeChild(style); return bool; };
    5. 5. if(Modernizr.fontface){…}
    6. 6. http://bit.ly/polyfills
    7. 7. <object type="application/x-silverlight-2" width="640" height="384"> <param name="source" value="http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_1 8.xap"></param> <param name="initParams" value="deferredLoad=true,duration=0,m=http://mysite.com/videos/big_buck_ bunny.mp4,autostart=true,autohide=true,showembed=true"></param> <param name="background" value="#00FFFFFF"></param> <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text- decoration: none;"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> </a> <param name="x-allowscriptaccess" value="never"></param> <param name="allowScriptAccess" value="never" /> <param name="wmode" value="opaque" /></object>
    8. 8. <video controls width="500"> <source src="video.mp4“ type="video/mp4" /></video>
    9. 9. Credit: Encoding.com
    10. 10. <video controls width="500"> <source src="video.mp4" type="video/mp4“ /> <source src="video.ogg" type="video/ogg“ /> <source src="video.webm" type="video/webm“ /></video>
    11. 11. <video controls width="500"> <source src="video.mp4" type="video/mp4“ /> <object type="application/x-silverlight-2“ width="640" height="384"> … more stuff here … </object></video>
    12. 12. blogorama.nerdworks.inrajave@microsoft.com @avranju
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×