Learning To Love IE6

LEARNING TO LOVE IE6

Bruno Abrantes
bruno@brunoabrantes.com
Monday, March 30, 2009

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

OK, “LEARNING TO LIVE WITH IE6”


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íﬁcos.

de começar a desenvolver, estudar o público-alvo!
• Antes


Imagem retirada de http://alistapart.com

PROGRESSIVE ENHANCEMENT


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 signiﬁca que devamos
comprometer a usabilidade da página;


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.


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


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.


Mais informação em http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

CONDITIONAL COMMENTS


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.


TEST EARLY, TEST OFTEN!

• Nunca deixar a fase de testes com os vários browsers para a
etapa ﬁnal de desenvolvimento.

desenvolvimento deve ser iterativo e complementado em
•O
cada iteração por uma fase de testes.


IE BUGS
Que nos levam à loucura.


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


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.


DOUBLE-MARGIN BUG

um elemento é ﬂoated, numa direcção o IE6 dobra o
• Quando
valor da margem nessa direcção.

exemplo, a margem real seria 40px.
• Neste


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 deﬁnir 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.


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 ﬁxa e o
conteúdo crescer para lá dessa altura, o IE estica o contentor
(!!)


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.


STEPDOWN

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

•O IE6 adiciona um efeito de line break após cada elemento
block-level.


STEPDOWN

• Uma solução é garantir que os elementos que são ﬂoated são
inline-level (display: inline força esta regra);

• Outra solução é alterar o line-height do elemento pai para 0.


HOVER STATES

IE6 apenas suporta a pseudo-class :hover em elementos
•O
âncora (<a>), e, mesmo assim, só se estes tiverem deﬁnido 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.


SUPORTE PARA PNG
TRANSPARENTES

•O IE6 não suporta PNGs de 24-bits, ou seja, com fundo
transparente.


SUPORTE PARA PNG
TRANSPARENTES

• Existem duas boas soluções:

recurso a um ﬁcheiro .htc (Twin Helix: IE PNG Fix)
• Com

com recurso a Javascript (24 Ways: Superslight e
• Ou
PNGHack on Google Code)


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 deﬁnida, esta regra não afecta a
dimensão do elemento e despoleta o hasLayout.


Learning To Love IE6

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (8)

Semelhante a Learning To Love IE6

Semelhante a Learning To Love IE6 (20)

Mais de Bruno Abrantes

Mais de Bruno Abrantes (6)

Último

Último (9)

Learning To Love IE6