quinta-feira, dezembro 15, 2005

CSS Hacks

Um grande problema enfrentado por desenvolvedores de interfaces Web é a diferença muitas vezes sutil de interpretação de comandos CSS por parte dos navegadores. Um exemplo simples é a questão do tamanho de um div e de sua borda: um navegador (nunca lembro qual) considera que a borda deve ser considerada dentro do tamanho do DIV, utilizando o espaço interno (portanto, se for estipulado que um div tem tamanho 10px, ele terá 10px não importa o tamanho da borda..) e o outro considera que a borda deve ser adicionada externamente, preservando o espaço interno do DIV (portanto, se o div tiver 10px e a borda 2px, o tamanho total do componente será de 14px...). Esses detalhes podem ser uma grande fonte de problemas em layouts muito detalhistas. Mas a algum tempo atrás, enfrentando problemas deste tipo, descobri um pequeno hack em CSS muito útil. Este hack se utiliza do fato que o IE, ao contrário do Firefox, é mais flexível na hora de interpretar a folha de estilo. Assim, é possível definir uma folha de estilo que se adeque aos dois navegadores, sem problemas. Como funciona ? Simples ! Imagine a seguinte folha de estilo: .titlediv{ width: 10px; _width: 12px; } O Firefox irá ler o parâmetro width, considerar válido, e definirá a largura do meu div em 10 pixels. Depois lerá _width, não irá reconhecer o parâmetro, e terminará o processamento. O IE também irá ler o parâmetro width, definindo a largura em 10px. Porém, ele irá considerar _width como válido também, apesar do _, e irá sobreescrever o valor. Pronto. Nossa folha de estilo se adaptou ao navegador. Isso vale para qualquer parâmetro de um CSS..desde que o parâmetro hackeado se encontre logo depois do parâmetro correto.

0 Comments:

Postar um comentário

Links to this post:

Criar um link

<< Home