Este documento discute melhores práticas para desenvolvimento cross-browser em HTML5, enfatizando a detecção de funcionalidades em vez de navegadores específicos. Também recomenda testar funcionalidades antes de usá-las e aplicar workarounds quando comportamentos quebrados são detectados.

1. HTML 5: Melhorespráticas Cross-Browser João Paulo Clementi Development Specialist blogs.msdn.com/jpclementi twitter.com/jpclementi 06/05/2010 Daniel Ferreira Development Specialist blogs.msdn.com/danielsf twitter.com/Eng_DanielSF

2. Agenda 2

3. Desafios de ser Cross-browser 3

4. demo

5. O quemaisimportanadetecção… if( condition ) { // Códigoprimário } else { // Códigoalternativo } 5

6. Primeironóstínhamosdetecção de versão 6 if( navigator.userAgent.indexOf('MSIE') != -1 ) { // Códigoescritopara browser X } else { // Códigoescritopara browser Y }

7. Depoistínhamosdetecção de objetos if( document.all ) { // Códigoescritopara browser X } else { // Códigoescritopara browser Y } 7

8. Agora temosdetecção de funcionalidades if( window.addEventListener ) { // Códigoescritopara browsers // quesuportamaddEventListener } else { // Códigoescritopara browsers // quenãosuportamaddEventListener } 8

9. Melhorespráticas Fazer Detecção de funcionalidade Detecção de comportamento NãoFazer Detectar browsers específicos Assumirfuncionalidadesnãorelacionadas IMPACTO: Custo de manutençãoreduzido 9

10. Fazer: Detecção de funcionalidade Testar a funcionalidade antes de usá-la Principalmenteparafuncionalidadesnovas Nãotãocríticoparafuncionalidadesbemestabelecidas Testarospadrões antes Sempreusarpadrõesquandosuportados Evitarutilizaracidentalmentefuncionalidadeslegadas 10

11. window.addEventListener("load", fn, false); Fazer: Detecção de funcionalidade 11

12. Fazer: Detecção de funcionalidade if( window.addEventListener ) { window.addEventListener("load", fn, false); } 12

13. Fazer: Detecção de funcionalidade if( window.addEventListener ) { window.addEventListener("load", fn, false); } elseif( window.attachEvent ) { window.attachEvent("onload", fn); } 13

14. demo

15. Fazer: detecção de comportamento Problema Um browser tem um bug emumafuncionalidade Uma deteçãobásica de funcionalidadefalhaaoidentificar o problema Solução Executar um testeparaidentificar o comportamentoquebrado Aplicar um workaround quandoele é detectado 15

16. Fazer: detecção de comportamento // Executar um testequedirecionapara um problemaconhecido vartestPassed = runTest(); // Checar se o testepassou if(!testPassed) { // Se não, aplicar um workaround } 16

17. demo

18. Comparação do path do código Detecção de funcionalidade Detecção de versão = Códigoalternativo = Ponto de deteção

19. Nãofazer: detectar browsers específicos Mas euseiqueestafuncionalidadefuncionaneste browser Estafuncionalidadedevefuncionarem outros browsers O novo browser deveadicionarsuporteparaestafuncionalidade Mas euseiqueestafuncionalidade tem um bug neste browser O mesmo bug podeexistirem outros browsers O bug podeserounãoconsertadoemumapróximaversão 19

20. // Using the User Agent String if( navigator.userAgent.indexOf(x) != -1 ) { // Browser-specific code } Nãofazer: detectar browsers específicos 20

21. Nãofazer: detectar browsers específicos // Using Objects if( document.all ) { // Browser-specific code }

22. Nãofazer: detectar browsers específicos // Using Library-based Detection if( jQuery.browser.msie ) { // Browser-specific code }

23. Nãofazer: detectar browsers específicos // Using Conditional Comments <!--[if IE]> // Browser-specific code <[endif]-->

24. Nãofazer: detectar browsers específicos // ... but if you must, target legacy only <!--[if IE lte 7]> // Legacy browser-specific code <[endif]-->

25. Nãofazer: assumirfuncionalidadenãorelacionadas Mas euseique o browser com X tem também Y Novos browsers podemter X e não Y Custo Risco de rupturaquandonovos browsers sãolançados

26. if( window.postMessage ) { … window.addEventListener(); … } Nãofazer: assumirfuncionalidadenãorelacionadas

27. Porqueninguémjánãofazisso? … mas lembre do custo

28. .target { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; } Fazer: detecção de funcionalidade no CSS 28

29. Fazer: detecção de funcionalidade no HTML <!-- Elements with fallback content --> <videosrc="test.vid"> <objectsrc="test.vid"> <ahref="test.vid"> Download Video </a> </object> </video> 29

30. Fazer: detecção de funcionalidade no HTML <!-- Generic element handling --> <svgwidth="100"height="100"> <circlefill="#090"cx="50"cy="50"r="50"/> </svg> 30

31. demo

32. Call to action

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

34. Próximospassos 34 Baixe o Internet Explorer 9 Platform preview www.IETestDrive.com Visite o blog to time http://blogs.msdn.com/ie

35. © 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.