Learning To Love IE6

869 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
869
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Learning To Love IE6

  1. 1. LEARNING TO LOVE IE6 Bruno Abrantes bruno@brunoabrantes.com Monday, March 30, 2009
  2. 2. Toda a tabela em http://www.w3schools.com/browsers/browsers_stats.asp OK, “LEARNING TO LIVE WITH IE6” Monday, March 30, 2009
  3. 3. PÚBLICO-ALVO média, lidaremos com 20% de utilizadores com IE6. • Na • Este valor pode aumentar ou diminuir consoante os casos de uso específicos. de começar a desenvolver, estudar o público-alvo! • Antes Monday, March 30, 2009
  4. 4. Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, March 30, 2009
  5. 5. PROGRESSIVE ENHANCEMENT • Origina do princípio de Graceful Degradation; entanto, segue a direcção oposta; • No • Deve ser providenciada uma experiência “normal” para browsers datados. Isto não significa que devamos comprometer a usabilidade da página; Monday, March 30, 2009
  6. 6. PROGRESSIVE ENHANCEMENT •A ideia é providenciar pequenos requintes visuais e funcionais a utilizadores com browsers actuais; • No entanto, os utilizadores de browsers datados devem poder ver e utilizar a página sem qualquer problema. Monday, March 30, 2009
  7. 7. PROGRESSIVE ENHANCEMENT • Understanding Progressive Enhancement http://www.alistapart.com/articles/understandingprogressiveenhancement • Progressive Enhancement with CSS http://www.alistapart.com/articles/progressiveenhancementwithcss • Progressive Enhancement with JavaScript http://www.alistapart.com/articles/progressiveenhancementwithjavascript Monday, March 30, 2009
  8. 8. STRICT DOCTYPES • Para minimizar os problemas com IE6, devem ser utilizados Doctypes do tipo Strict: <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/ • strict.dtdquot;> <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/ • xhtml1/DTD/xhtml1-strict.dtdquot;> assegura que o rendering seja feito em Standards- • Isto Compliant Mode ao invés do defeituoso Quirks Mode. Monday, March 30, 2009
  9. 9. Mais informação em http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx CONDITIONAL COMMENTS Monday, March 30, 2009
  10. 10. CONDITIONAL COMMENTS • Estescomentários só funcionam nas várias versões IE/ Windows, e são ignorados pelos outros browsers. • Podem ser utilizados para incluir folhas de estilo ou scripts que se destinem a corrigir bugs no IE. Monday, March 30, 2009
  11. 11. TEST EARLY, TEST OFTEN! • Nunca deixar a fase de testes com os vários browsers para a etapa final de desenvolvimento. desenvolvimento deve ser iterativo e complementado em •O cada iteração por uma fase de testes. Monday, March 30, 2009
  12. 12. IE BUGS Que nos levam à loucura. Monday, March 30, 2009
  13. 13. BOX MODEL • Um dos mais comuns bugs de IE6 e anteriores; IE6 calcula a largura da caixa como sendo 100px; •O restantes browsers calculam uma largura de 124px; • Os Monday, March 30, 2009
  14. 14. BOX MODEL •A melhor solução é garantir que o IE faz render da página em Standards-Compliant Mode; • Pode-se, contudo, evitar usar padding em blocos de layout e utilizá-lo directamente nos elementos dentro do bloco. Monday, March 30, 2009
  15. 15. DOUBLE-MARGIN BUG um elemento é floated, numa direcção o IE6 dobra o • Quando valor da margem nessa direcção. exemplo, a margem real seria 40px. • Neste Monday, March 30, 2009
  16. 16. DOUBLE-MARGIN BUG • Uma solução comum é adicionar a regra display: inline ao elemento, mas isto é pouco prático (por exemplo, não é possível definir width ou height num elemento inline); • Pode tentar-se adicionar padding ao elemento pai; • Em vez de utilizar margin-right, utilizar padding-right, se possível. Monday, March 30, 2009
  17. 17. MIN-WIDTH / MIN-HEIGHT de largura e altura mínimas simplesmente não são • Regras suportadas pelo IE6 (!); • No entanto, se um elemento tiver uma altura fixa e o conteúdo crescer para lá dessa altura, o IE estica o contentor (!!) Monday, March 30, 2009
  18. 18. MIN-WIDTH / MIN-HEIGHT • Este hack toma partido do facto de o IE6 não entender nem a regra min-height nem a instrução !important. • Estabelece uma altura mínima e uma altura automática para os restantes browsers, deixando o IE6 com uma altura estática. Monday, March 30, 2009
  19. 19. STEPDOWN • Acontece quando vários elementos são floated na mesma direcção. •O IE6 adiciona um efeito de line break após cada elemento block-level. Monday, March 30, 2009
  20. 20. STEPDOWN • Uma solução é garantir que os elementos que são floated são inline-level (display: inline força esta regra); • Outra solução é alterar o line-height do elemento pai para 0. Monday, March 30, 2009
  21. 21. HOVER STATES IE6 apenas suporta a pseudo-class :hover em elementos •O âncora (<a>), e, mesmo assim, só se estes tiverem definido o atributo href. • Existe uma solução proprietária, mas o melhor a fazer é não aplicar esta pseudo-class a elementos que não a suportam. Monday, March 30, 2009
  22. 22. SUPORTE PARA PNG TRANSPARENTES •O IE6 não suporta PNGs de 24-bits, ou seja, com fundo transparente. Monday, March 30, 2009
  23. 23. SUPORTE PARA PNG TRANSPARENTES • Existem duas boas soluções: recurso a um ficheiro .htc (Twin Helix: IE PNG Fix) • Com com recurso a Javascript (24 Ways: Superslight e • Ou PNGHack on Google Code) Monday, March 30, 2009
  24. 24. HASLAYOUT é uma regra interna do IE6 aplicada a elementos, • hasLayout que determina como estes são posicionados em relação a outros elementos. • Activar o hasLayout costuma resolver alguns problemas de posicionamento. •A solução mais comum é adicionar a regra height: 1%. Se o elemento pai não tiver altura definida, esta regra não afecta a dimensão do elemento e despoleta o hasLayout. Monday, March 30, 2009
  25. 25. FIM! Monday, March 30, 2009

×