33
bit.ly/avranju

Rajashekaran vengalil building cross browser html5 websites

Embed Size (px)

Citation preview

Page 2: Rajashekaran vengalil building cross browser html5 websites
Page 3: Rajashekaran vengalil building cross browser html5 websites
Page 4: Rajashekaran vengalil building cross browser html5 websites

29.00%

13.65%

10.18%

9.79%

7.50%

5.56%

5.41%

3.12%3.04%

12.09%

IE8

Chrome 14

FF 7

IE9

IE6

FF3.6

IE7

FF6

Safari 5.1

Others

Source: http://www.netmarketshare.com/

Page 5: Rajashekaran vengalil building cross browser html5 websites
Page 6: Rajashekaran vengalil building cross browser html5 websites
Page 7: Rajashekaran vengalil building cross browser html5 websites
Page 8: Rajashekaran vengalil building cross browser html5 websites
Page 9: Rajashekaran vengalil building cross browser html5 websites

// If not IE then use addEventListener…

Page 10: Rajashekaran vengalil building cross browser html5 websites
Page 11: Rajashekaran vengalil building cross browser html5 websites
Page 12: Rajashekaran vengalil building cross browser html5 websites
Page 13: Rajashekaran vengalil building cross browser html5 websites

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;

};

Page 14: Rajashekaran vengalil building cross browser html5 websites
Page 15: Rajashekaran vengalil building cross browser html5 websites
Page 16: Rajashekaran vengalil building cross browser html5 websites

if(Modernizr.fontface){…}

Page 17: Rajashekaran vengalil building cross browser html5 websites
Page 18: Rajashekaran vengalil building cross browser html5 websites
Page 19: Rajashekaran vengalil building cross browser html5 websites
Page 20: Rajashekaran vengalil building cross browser html5 websites
Page 21: Rajashekaran vengalil building cross browser html5 websites
Page 22: Rajashekaran vengalil building cross browser html5 websites

http://bit.ly/b5HV1x

Page 23: Rajashekaran vengalil building cross browser html5 websites
Page 24: Rajashekaran vengalil building cross browser html5 websites
Page 25: Rajashekaran vengalil building cross browser html5 websites

<object type="application/x-silverlight-2" width="640" height="384"><param name="source"

value="http://channel9.msdn.com/App_Themes/default/VideoPlayer10_01_18.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>

Page 26: Rajashekaran vengalil building cross browser html5 websites

<video controls width="500"><source src="video.mp4“ type="video/mp4" />

</video>

Page 27: Rajashekaran vengalil building cross browser html5 websites

Credit: Encoding.com

Page 28: Rajashekaran vengalil building cross browser html5 websites

<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>

Page 29: Rajashekaran vengalil building cross browser html5 websites
Page 30: Rajashekaran vengalil building cross browser html5 websites

<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>

Page 31: Rajashekaran vengalil building cross browser html5 websites
Page 33: Rajashekaran vengalil building cross browser html5 websites