Com as últimas versões dos navegadores Firefox 3.0.7 e Internet Explorer 8 já dá para criar folhas de estilo que sejam compatíveis, sem ser necessário aplicar os “truques” que foram necessários durante tanto tempo para compensar os erros existentes no Internet Explorer 7 e especialmente no Internet Explorer 6 e anteriores.
Na página de quirksmode.org (http://www.quirksmode.org/css/contents.html) dá para ver a lista de compatibilidades de diferentes banvegadores e versões para o CSS 2.1. Acho que dados os resultados, podemos esquecer o CSS 3 durante uma boa temporada!
Para saber que estilos podemos usar de forma segura e quais devemos compensar com os referidos “truqes”, é preciso também saber a percentagem aproximada de cada navegador e versão usada pelos internautas. Estatísticas gerais podem ser obtidas em http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2.
Estava a tentar criar um bloco que “flutuasse” por cima e posicionado relativamente a um determinado bloco. Nunca dei muita importância a este assunto até o momento em que precisei.
As opções para posicionar são: relative, static, fixed, absolute, inherit.
- static: Posicionado seguindo o fluxo normal.
- relative: Posicionado seguindo o fluxo normal, com a opção de deslocar o bloco usando os atributos top, bottom, left e right. O resto do fluxo é afectado como se o bloco estivesse na sua posição normal.
- absolute: Posicionado com os atributos top, left, bottom e right relativamente ao bloco que o contém. Não afecta o fluxo dos blocos restantes.
- fixed: Tal como ‘absolute’, mas posicionado em relação à janela.
Parece simples, mas é errado (ou, melhor dito, falta informação crucial: afinal, meias verdades são tão más ou piores que mentiras). A peça de informação que falta aqui é a definição de bloco contentor para o posicionamento ‘absolute’.
Seria razoável pensar que no seguinte código …
… se “bloco” estivesse definido como ‘absolute’, com top=10px e left=20px, este seria mostrado 10 píxeis abaixo e 20 píxeis à direita da origem superior esquerda do bloco “bloco1”. Mas o resultado é que será posicionado como se tivesse definido como ‘fixed’, isto é, em relação à janela.
O motivo é que a definição de bloco contentor é a do bloco anterior com o posicionamento ‘fixed’, ‘absolute’ ou ‘relative’, mas não ‘static’, que é o valor por defeito quando o atributo position não é definido. Absurdo, mas é assim que está feito. Esta informação vital falta em muitos manuais e ajudas disponíveis na Web.
Portanto, cuidado com deixar ficar valores por defeito!
O seguinte link contem informação que me ajudou a resolver este “mistério”: http://www.brainjar.com/css/positioning/default.asp.
Categories: Tecnologia Tags: absolute, bottom, css, fixed, float, left, offset, overlay, position, relative, right, static, top
Uma referência para cábulas (cheatsheets) sobre HTML, CSS, Javascript, ASP, PHP, etc. disponível em http://www.addedbytes.com/.
Vale a pena baixar as imagens das cábulas: são simples, bem organizadas e especialmente úteis quando temos que saltar duma matéria a outra e não queremos ter que consultar constantemente os manuais de ajuda online e livros.
Os parabéns vão para Dave Child, autor dessas cábulas.
