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” Monday, March 30, 2009

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 Monday, March 30, 2009

Imagem retirada de http://alistapart.com PROGRESSIVE ENHANCEMENT Monday, March 30, 2009

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; Monday, March 30, 2009

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

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

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\"> assegura que o rendering seja feito em Standards- • Isto Compliant Mode ao invés do defeituoso Quirks Mode. Monday, March 30, 2009

Mais informação em http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx CONDITIONAL COMMENTS Monday, March 30, 2009

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

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. Monday, March 30, 2009

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 sendo 100px; •O restantes browsers calculam uma largura de 124px; • Os Monday, March 30, 2009

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

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 Monday, March 30, 2009

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. Monday, March 30, 2009

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 (!!) Monday, March 30, 2009

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

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. Monday, March 30, 2009

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. Monday, March 30, 2009

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. Monday, March 30, 2009

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

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) Monday, March 30, 2009

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. Monday, March 30, 2009

FIM! Monday, March 30, 2009

Learning To Love IE6

0 comments

Notes on slide 1

Favorites, Groups & Events