Rajashekaran vengalil building cross browser html5 websites

398 views
350 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
398
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
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.
  • Rajashekaran vengalil building cross browser html5 websites

    1. 1. bit.ly/avranju
    2. 2. 12.09% IE83.12% 3.04% Chrome 14 29.00% FF 7 5.41% IE9 IE6 5.56% FF3.6 IE7 7.50% 13.65% FF6 Safari 5.1 9.79% Others 10.18% 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/b5HV1x
    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

    ×