:: CSS desde o início ::

Autor: Joe Gillespie
URL do original: http://www.wpdfd.com/editorial/basics/index.html
Título original: CSS from the Ground Up
Traduzido com autorização expressa do autor

Etapa número 14 - Navegadores (Browsers)

Grande. Onde estaríamos sem eles? Quantas vezes eu ouvi pessoas dizendo que gostariam que existisse apenas um tipo de navegador. Qual deles, eu penso?

Cada navegador tem sua própria folha de estilos padrão. Esta folha, será utilizada caso você não defina uma personalizada. Naturalmente, as folhas de estilos padrão dos navegadores são diferentes entre si. Elas foram definidas por diferentes fabricantes e comportam-se de maneira diversa nos variados tipos de computadores e plataformas.

É maravilhoso que elas sejam bem semelhantes, contudo as diferenças existentes não são tão insignificantes. Se você assumir que outros navegadores irão renderizar sua página Web de maneira 'similar' àquela que você vê no seu navegador, rapidamente perceberá que 'similar' não significa 'igual' e pode até significar 'bem diferente' em determinados casos - mesmo com uma folha de estilos CSS válida.

Eu não poderia entrar em uma exaustiva comparação cross-browser aqui, mas existe na Web uma grande quantidade de material a respeito. Vou citar algumas que mais me incomodam. Usualmente resumem-se a uma questão entre o navegador Explorer e os demais navegadores - mas nem sempre é isto. Uma lista dos navegadores atuais esta disponível em WPDFD News page (NT: no site do autor da matéria). A maioria dos navegadores é gratuito ou oferece um 'test-driven' sem custos.

Microsoft Internet Explorer é o navegador mais usado. Nas suas variadas formas é responsável por algo em torno de 85% dos navegadores. Lamentavelmente ele se comporta segundo suas regras próprias e não segue as normas standards, tal como os demais navegadores. Ele segue a maior parte das standards, mas os grandes problemas ocorrem exatamente onde há divergências das standards.

O Box Model

Em todas as versões do IE, a implementação do padding é diferente dos demais navegadores. O resultado disto é que se você especifica uma largura para um box em pixel e define um padding à esquerda ou à direita, o box terá uma largura total no IE diferente da dos demais navegadores - e isto poderá arruinar um layout preciso.

O box model quebrado

IE assume que o padding deve ser computado dentro do box, reduzindo desta forma a largura para o texto - o que, devo admitir me parece razoável. As standards do W3C definem que o padding deve ser adicionado fora da largura definida para o box, sendo assim toda a largura ocupada pelo texto. Qual é o conceito mais lógico é uma discussão que pode se prolongar para sempre, mas o fato é que existe esta diferença de interpretação pelos navegadores, que poderá derrubá-lo, caso você não confira sua página no IE e em outros navegadores.

Nota do tradutor: À época desta tradução o IE 6 já oferecia suporte correto para o Box Model.

O que significa 'Relative'

'Relative' no contexto das CSS é um conceito bem simples. Cada box ocupa uma posição em relação ao box imediatamente superior a ele. Atenção! Se você mover um box de seu 'fluxo natural' definindo para ele um valor para a propriedade top ou bottom, é de se supor que o box sairá do seu lugar natural, deixando vago o espaço que ali ocupava - como se um carro saísse de um estacionamento, deixando livre a vaga que ocupava. O IE (versão para Mac) "fecha' o espaço deixado vago, deslocando tudo que se encontra próximo, para cima ou para baixo.

um box deslocado do fluxo- como interpretado pela maioria dos navegadores e pelo IE para Machintosh

No desenho à esquerda o que se supõe acontecer quando você move um box, o espaço ocupado transforma-se efetivamente em um box invisível. À direita o que acontece no IE (Mac) e que poderá arruinar seu layout se você não estiver ciente disto.

A maneira como a marcação é escrita não deve influir na estilização

Agora, aqui um 'bug' que me provoca 'bug' porque definitivamente não é consequência de uma interpretação errônea das standards e sim um 'bug' mesmo. É de se admitir que os navegadores ignorem totalmente a formatação da marcação do código HTML. Não faz a menor diferença se você escreve seu código em uma linha única ou se usa espaçamento duplo entre as linhas. Acontece um bug no IE (Mac) pois quando você define float boxes na horizontal e escreve a marcação HTML correspondente em linha separadas, fica estabelecida uma confusão para o navegador. Você tem que escrever a marcação em uma linha contínua para obter os resultados esperados. Agora, resolver este 'bug' não requer grandes malabarismos, no entanto o desenvolvimento do IE (Mac) parou, ele está condenado à morte e atualmente você dispõe de outras ótimas opções para escolher. - contudo tal como abandonar velhos hábitos, a morte de velhos Mac será árdua.

  1. » Introdução - página básica
  2. » Folha de estilos
  3. » Estilizando texto
  4. » Mais texto
  5. » As listas
  6. » Os links
  7. » Boxes CSS
  8. » DIV's
  9. » Juntando tudo
  10. » DOCTYPE
  11. » Estilos externos
  12. » Estilizando tabelas
  13. » Estilizando formulários
  14. » Browsers
  15. » O futuro

Criado em: 2005-04-14

topo