blogs.msdn.com/jpclementitwitter.com/jpclementi

blogs.msdn.com/danielsftwitter.com/Eng_DanielSF

2

Desafios de

Cross-Browser

Cross-Browser o

que fazer

Cross-Browser o

que não fazer

3

Novas versões lançadas frequentemente

Muitas versões diferentes

Muitos browsers diferentes

if( condition )

{

// Código primário

}

else

{

// Código alternativo

}5

6

if( navigator.userAgent.indexOf('MSIE') != -1 )

{

// Código escrito para browser X

}

else

{

// Código escrito para browser Y

}

if( document.all )

{

// Código escrito para browser X

}

else

{

// Código escrito para browser Y

}7

if( window.addEventListener )

{

// Código escrito para browsers

// que suportam addEventListener

}

else

{

// Código escrito para browsers

// que não suportam addEventListener

}8

9

10

window.addEventListener("load", fn, false);

11

if( window.addEventListener )

{

window.addEventListener("load", fn, false);

}

12

if( window.addEventListener )

{

window.addEventListener("load", fn, false);

}

else if( window.attachEvent )

{

window.attachEvent("onload", fn);

}

13

15

// Executar um teste que direciona paraum problema conhecido

var testPassed = runTest();

// Checar se o teste passou

if(!testPassed)

{

// Se não, aplicar um workaround

}

16

= Ponto de deteção = Código alternativo

Detecção de funcionalidadeDetecção de versão

19

// Using the User Agent String

if( navigator.userAgent.indexOf(x) != -1 )

{

// Browser-specific code

}20

// Using Objects

if( document.all )

{

// Browser-specific code

}

// Using Library-based Detection

if( jQuery.browser.msie )

{

// Browser-specific code

}

// Using Conditional Comments

<!--[if IE]>

// Browser-specific code

<[endif]-->

// ... but if you must, target legacy only

<!--[if IE lte 7]>

// Legacy browser-specific code

<[endif]-->

if( window.postMessage )

{

window.addEventListener();

}

Fácil de

pensar em

browsers

.target

{

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

28

<!-- Elements with fallback content -->

<video src="test.vid">

<object src="test.vid">

<a href="test.vid">

Download Video

</a>

</object>

</video>

29

<!-- Generic element handling -->

<svg width="100" height="100">

<circle fill="#090" cx="50" cy="50"r="50"/>

</svg>

30

Evite detecção

de browser

Use detecção de

funcionalidade

33

Desafios de

Cross-Browser

Cross-Browser o

que fazer

Cross-Browser o

que não fazer

Mais: http://api.jquery.com/jQuery.support/

34

Visite o blog to time

http://blogs.msdn.com/ie

Baixe o Internet Explorer 9 Platform

preview

www.IETestDrive.com