Your SlideShare is downloading. ×
Best practices for building cross browser compatible web apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Best practices for building cross browser compatible web apps

402

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. bit.ly/avranju
    • 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. // If not IE then use addEventListener…
    • 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. if(Modernizr.fontface){…}
    • 6. http://bit.ly/polyfills
    • 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. <video controls width="500"> <source src="video.mp4“ type="video/mp4" /></video>
    • 9. Credit: Encoding.com
    • 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. <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. blogorama.nerdworks.inrajave@microsoft.com @avranju

    ×