msdn webcast - melhores práticas cross browser
TRANSCRIPT
![Page 1: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/1.jpg)
blogs.msdn.com/jpclementitwitter.com/jpclementi
blogs.msdn.com/danielsftwitter.com/Eng_DanielSF
![Page 2: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/2.jpg)
2
Desafios de
Cross-Browser
Cross-Browser o
que fazer
Cross-Browser o
que não fazer
![Page 3: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/3.jpg)
3
Novas versões lançadas frequentemente
Muitas versões diferentes
Muitos browsers diferentes
![Page 4: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/4.jpg)
![Page 5: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/5.jpg)
if( condition )
{
// Código primário
}
else
{
// Código alternativo
}5
![Page 6: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/6.jpg)
6
if( navigator.userAgent.indexOf('MSIE') != -1 )
{
// Código escrito para browser X
}
else
{
// Código escrito para browser Y
}
![Page 7: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/7.jpg)
if( document.all )
{
// Código escrito para browser X
}
else
{
// Código escrito para browser Y
}7
![Page 8: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/8.jpg)
if( window.addEventListener )
{
// Código escrito para browsers
// que suportam addEventListener
}
else
{
// Código escrito para browsers
// que não suportam addEventListener
}8
![Page 9: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/9.jpg)
9
![Page 10: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/10.jpg)
10
![Page 11: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/11.jpg)
window.addEventListener("load", fn, false);
11
![Page 12: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/12.jpg)
if( window.addEventListener )
{
window.addEventListener("load", fn, false);
}
12
![Page 13: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/13.jpg)
if( window.addEventListener )
{
window.addEventListener("load", fn, false);
}
else if( window.attachEvent )
{
window.attachEvent("onload", fn);
}
13
![Page 14: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/14.jpg)
![Page 15: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/15.jpg)
15
![Page 16: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/16.jpg)
// 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
![Page 17: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/17.jpg)
![Page 18: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/18.jpg)
= Ponto de deteção = Código alternativo
Detecção de funcionalidadeDetecção de versão
![Page 19: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/19.jpg)
19
![Page 20: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/20.jpg)
// Using the User Agent String
if( navigator.userAgent.indexOf(x) != -1 )
{
// Browser-specific code
}20
![Page 21: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/21.jpg)
// Using Objects
if( document.all )
{
// Browser-specific code
}
![Page 22: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/22.jpg)
// Using Library-based Detection
if( jQuery.browser.msie )
{
// Browser-specific code
}
![Page 23: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/23.jpg)
// Using Conditional Comments
<!--[if IE]>
// Browser-specific code
<[endif]-->
![Page 24: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/24.jpg)
// ... but if you must, target legacy only
<!--[if IE lte 7]>
// Legacy browser-specific code
<[endif]-->
![Page 25: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/25.jpg)
![Page 26: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/26.jpg)
if( window.postMessage )
{
window.addEventListener();
}
![Page 27: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/27.jpg)
Fácil de
pensar em
browsers
![Page 28: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/28.jpg)
.target
{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
28
![Page 29: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/29.jpg)
<!-- Elements with fallback content -->
<video src="test.vid">
<object src="test.vid">
<a href="test.vid">
Download Video
</a>
</object>
</video>
29
![Page 30: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/30.jpg)
<!-- Generic element handling -->
<svg width="100" height="100">
<circle fill="#090" cx="50" cy="50"r="50"/>
</svg>
30
![Page 31: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/31.jpg)
![Page 32: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/32.jpg)
Evite detecção
de browser
Use detecção de
funcionalidade
![Page 33: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/33.jpg)
33
Desafios de
Cross-Browser
Cross-Browser o
que fazer
Cross-Browser o
que não fazer
Mais: http://api.jquery.com/jQuery.support/
![Page 34: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/34.jpg)
34
Visite o blog to time
http://blogs.msdn.com/ie
Baixe o Internet Explorer 9 Platform
preview
www.IETestDrive.com
![Page 35: MSDN Webcast - Melhores práticas cross browser](https://reader033.vdocuments.us/reader033/viewer/2022060205/55a0bc0f1a28ab744c8b45e7/html5/thumbnails/35.jpg)