learning to love ie6

25
LEARNING TO LOVE IE6 Bruno Abrantes [email protected] Monday, March 30, 2009

Upload: bruno-abrantes

Post on 02-Nov-2014

1.543 views

Category:

Design


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Learning To Love IE6

LEARNING TO LOVE IE6

Bruno [email protected]

Monday, March 30, 2009

Page 2: Learning To Love IE6

OK, “LEARNING TO LIVE WITH IE6”

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

Monday, March 30, 2009

Page 3: Learning To Love IE6

PÚBLICO-ALVO

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

• Este valor pode aumentar ou diminuir consoante os casos de uso específicos.

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

Monday, March 30, 2009

Page 4: Learning To Love IE6

PROGRESSIVE ENHANCEMENT

Imagem retirada de http://alistapart.com

Monday, March 30, 2009

Page 5: Learning To Love IE6

PROGRESSIVE ENHANCEMENT

• Origina do princípio de Graceful Degradation;

• No entanto, segue a direcção oposta;

• 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

Page 6: Learning To Love IE6

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

Page 8: Learning To Love IE6

STRICT DOCTYPES

• Para minimizar os problemas com IE6, devem ser utilizados Doctypes do tipo Strict:

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• Isto assegura que o rendering seja feito em Standards-Compliant Mode ao invés do defeituoso Quirks Mode.

Monday, March 30, 2009

Page 9: Learning To Love IE6

CONDITIONAL COMMENTS

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

Monday, March 30, 2009

Page 10: Learning To Love IE6

CONDITIONAL COMMENTS

• Estes comentá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

Page 11: Learning To Love IE6

TEST EARLY, TEST OFTEN!

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

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

Monday, March 30, 2009

Page 12: Learning To Love IE6

IE BUGSQue nos levam à loucura.

Monday, March 30, 2009

Page 13: Learning To Love IE6

BOX MODEL

• Um dos mais comuns bugs de IE6 e anteriores;

• O IE6 calcula a largura da caixa como sendo 100px;

• Os restantes browsers calculam uma largura de 124px;

Monday, March 30, 2009

Page 14: Learning To Love IE6

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

Page 15: Learning To Love IE6

DOUBLE-MARGIN BUG

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

• Neste exemplo, a margem real seria 40px.

Monday, March 30, 2009

Page 16: Learning To Love IE6

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

Page 17: Learning To Love IE6

MIN-WIDTH / MIN-HEIGHT

• Regras de largura e altura mínimas simplesmente não são 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

Page 18: Learning To Love IE6

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

Page 19: Learning To Love IE6

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

Page 20: Learning To Love IE6

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

Page 21: Learning To Love IE6

HOVER STATES

• O IE6 apenas suporta a pseudo-class :hover em elementos â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

Page 22: Learning To Love IE6

SUPORTE PARA PNG TRANSPARENTES

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

Monday, March 30, 2009

Page 23: Learning To Love IE6

SUPORTE PARA PNG TRANSPARENTES

• Existem duas boas soluções:

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

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

Monday, March 30, 2009

Page 24: Learning To Love IE6

HASLAYOUT

• hasLayout é uma regra interna do IE6 aplicada a elementos, 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

Page 25: Learning To Love IE6

FIM!

Monday, March 30, 2009