LEARNING TO LOVE IE6




                                              Bruno Abrantes
                                    ...
Toda a tabela em http://www.w3schools.com/browsers/browsers_stats.asp




    OK, “LEARNING TO LIVE WITH IE6”

Monday, Mar...
PÚBLICO-ALVO


                 média, lidaremos com 20% de utilizadores com IE6.
    • Na

    • Este valor pode aumentar...
Imagem retirada de http://alistapart.com




            PROGRESSIVE ENHANCEMENT

Monday, March 30, 2009
PROGRESSIVE
                              ENHANCEMENT

    • Origina            do princípio de Graceful Degradation;

   ...
PROGRESSIVE
                         ENHANCEMENT


    •A   ideia é providenciar pequenos requintes visuais e funcionais
 ...
PROGRESSIVE
                                          ENHANCEMENT

    • Understanding                            Progress...
STRICT DOCTYPES

    • Para  minimizar os problemas com IE6, devem ser utilizados
       Doctypes do tipo Strict:
        ...
Mais informação em http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx




         CONDITIONAL COMMENTS

Monday,...
CONDITIONAL COMMENTS


    • Estescomentários só funcionam nas várias versões IE/
       Windows, e são ignorados pelos ou...
TEST EARLY, TEST OFTEN!


    • Nunca   deixar a fase de testes com os vários browsers para a
       etapa final de desenvo...
IE BUGS
                         Que nos levam à loucura.

Monday, March 30, 2009
BOX MODEL


    • Um          dos mais comuns bugs de IE6 e anteriores;

              IE6 calcula a largura da caixa como...
BOX MODEL


    •A   melhor solução é garantir que o IE faz render da página em
       Standards-Compliant Mode;

    • Po...
DOUBLE-MARGIN BUG



                um elemento é floated, numa direcção o IE6 dobra o
    • Quando
       valor da margem...
DOUBLE-MARGIN BUG


    • Uma    solução comum é adicionar a regra display: inline ao
       elemento, mas isto é pouco pr...
MIN-WIDTH / MIN-HEIGHT


             de largura e altura mínimas simplesmente não são
    • Regras
       suportadas pelo...
MIN-WIDTH / MIN-HEIGHT


    • Este  hack toma partido do facto de o IE6 não entender nem a
       regra min-height nem a ...
STEPDOWN


    • Acontece           quando vários elementos são floated na mesma
       direcção.

    •O    IE6 adiciona u...
STEPDOWN



    • Uma     solução é garantir que os elementos que são floated são
       inline-level (display: inline forç...
HOVER STATES


          IE6 apenas suporta a pseudo-class :hover em elementos
    •O
       âncora (<a>), e, mesmo assim,...
SUPORTE PARA PNG
                          TRANSPARENTES



    •O    IE6 não suporta PNGs de 24-bits, ou seja, com fundo
...
SUPORTE PARA PNG
                             TRANSPARENTES

    • Existem              duas boas soluções:

             ...
HASLAYOUT

                 é uma regra interna do IE6 aplicada a elementos,
    • hasLayout
       que determina como est...
FIM!

Monday, March 30, 2009
Upcoming SlideShare
Loading in...5
×

Learning To Love IE6

693

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
693
On Slideshare
0
From Embeds
0
Number of Embeds
1
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×