learning to love ie6
Post on 02-Nov-2014
1.543 Views
Preview:
DESCRIPTION
TRANSCRIPT
LEARNING TO LOVE IE6
Bruno Abrantesbruno@brunoabrantes.com
Monday, March 30, 2009
OK, “LEARNING TO LIVE WITH IE6”
Toda a tabela em http://www.w3schools.com/browsers/browsers_stats.asp
Monday, March 30, 2009
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
PROGRESSIVE ENHANCEMENT
Imagem retirada de http://alistapart.com
Monday, March 30, 2009
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
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 CSShttp://www.alistapart.com/articles/progressiveenhancementwithcss
• Progressive Enhancement with JavaScripthttp://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">
• Isto assegura que o rendering seja feito em Standards-Compliant Mode ao invés do defeituoso Quirks Mode.
Monday, March 30, 2009
CONDITIONAL COMMENTS
Mais informação em http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
Monday, March 30, 2009
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
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
IE BUGSQue nos levam à loucura.
Monday, March 30, 2009
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
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
• 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
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
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
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 floated 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 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
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
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:
• 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
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
FIM!
Monday, March 30, 2009
top related