Post on 11-Jul-2015
transcript
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