Você não precisa de uma coleção de css hacks pra todos os browsers

Em quase todo blog tem uma coleção de hacks css, para todos as versões de todos os navegadores, opera, safari, ie6, ie7, firefox 2, firefox 3 etc etc… mas aqui você não vai encontrar, porque? Porquê você não precisa de hacks pra fazer um layout!

O jeito correto de escrever css é encontrar uma estrutura que funcione em todos os navegadores. Não faça o site pensando apenas no seu navegador favorito para depois encher de hacks para os demais e meter a culpa neles.

copyNavegadores são atualizados sempre, isso quando não surgem novos. A 6 meses atrás não existia o Google Chrome, Firefox 3 e pouco era utilizado internet em celulares no Brasil. Se o layout de um site foi construído errado e “consertado” com hacks, provavelmente o mesmo site está quebrando o layout nesses novos navegadores, por isso não vale a pena. Antes de criar uma hack, pense 10 minutos a mais resolver seu problema de outra forma. Tudo bem, tem hacks que realmente precisamos colocar por falta de suporte do ie6. min-height e max-height, o suporte a imagens alpha ( pgn24 ) tão usado pelos designers hoje em dia e os pseudo seletores :first-child e :last-child. Essas 3 opções, somente essas 3 não tem jeito mesmo, é colocar expression no seu css e filter pro png, mas de resto, nenhuma hack é necessária.

Outras técnicas que não recomendo são: display table, uso excessivo de float, margin com valores negativos, tudo isso não passa de gambearra para fazer o layout ficar no lugar onde está dando erro.

Dicas para ter menos problemas ao construir um css :

Utilize o CSS Global Reset para diminuir as diferenças entre os browsers. Cada browser, coloca por sua conta, qual vai ser o tamanho dos títulos, dos paragráfos, a margin entre elementos, a fonte padrão, o padding da página, etc… Com esse código, essas diferenças caem quase que por completo.

Para elementos fixos (que não tem variedade de tamanho) dentro de um container, tipo botões ou input / label de formulário, pense em utilizar position absolute, é uma técnica muito simples de se trabalhar quando se tem um xhtml válido, pois todos os navegadores interpretam da mesma forma a posição do elemento, ao contrário de float e margin que dão muitos problemas. O site americano Position Is Everything recomenda a técnica e explica melhor como utilizar.

Aqui no TidBits também nós disponibilizamos uma apostila e material de estudo sobre padrões web em português

7 thoughts on “Você não precisa de uma coleção de css hacks pra todos os browsers

  1. Com certeza, hoje em dia dá para se desenvolver sem utilizar hacks, mas isso demanda muito treino em CSS, você tem que entender profundamente como funcionam os browsers, essas coisas. Vai falar para um Noobie estudar o erro que acontece no site dele, ele não vai querer aprender e já vai lá utilizando um underscore na frente da declaração, não preciso nem dizer para qual browser é isso né?

    A se o IE (a versão 7 já suporta) suportasse coisas desse tipo:

    E + F
    E ~ F

    Com certeza a nossa vida seria bem melhor. Mas é aquela coisa, não adianta só ficar falando, tem que estudar, estudar, estudar…

  2. boa mestre DAN, to com 6 navegadores abertos aqui, ai fui ver o meu ieca.css, fiz umas alteracoes ai ficou 1 linha por causa da altura da caixa principal ..maldito min-height.. mas falta pouco pra deletar o IE6.

    abração guri, cambio desligo.

  3. “Navegadores são atualizados sempre”

    O artigo tá legal, mas essa afirmação? Diga isso aí pro nosso “amigo” IEca…

  4. Boa Danilão! Queria ter essa sua criatividade para postar…rsrs. Mas nesse artigo só concordo com o título.

    min-height o iE6 tem, é só definir um height pra ele, ele cresce conforme o conteúdo aumenta naturalmente.

    Max-height, confesso que nunca usei, nem sei quando se usa isso. De qualquer forma, se deseja usar Max-height, last-child e first-child eu aconselho a utilizar Javascript para isso. Usar expression é extremamente condenável a meu ver, já que é puro Javascript sendo executado a partir de um arquivo Css. Se o javascript estiver desabilitado o expression não funciona, qual a diferença de usar javascript então? Acaba com o conceito de desenvolvimento em camadas….

    No caso de filtros eu concordo plenamente nos comentários condicionais. Tanto para png´s quanto para uma simples transparência.

    Muitas vezes, o problema no desenvolvimento é no ie6 e em layout, quando o display:inline resolve a maioria dos problemas de diferença no posicionamento. Quando não, existe um simples seletor válido que o iE6 não enxerga:

    body div#box {height:100px; min-height:100px }
    body > div#box { height:auto; }

    Acho que posições absolutas e relativas devem ser examinadas caso a caso, para mim, a priore deve-se utilizar posição relativa, e só em alguns casos deve-se utilizar posição absoluta.

    E em códigos, em geral, deve-se usar sempre semântica, quando não for para utilizar margem negativa, não use, quando for use. Não há nada errado em números negativos, errado é utilizá-los em horas desnecessárias. O posicionamento funciona em eixo x e y, eixo cartesiano, simples onde x e y são números inteiros.

    O único motivo pelo qual os navegadores utilizam o centro do eixo no canto superior esquerdo do navegador é pelo fato de usar as barras de rolagens no padrão de leitura dos ocidentais, da esquerda para a direita, de cima para baixo. A partir do eixo, tende ao infinito. -1, -3, -20… são inteiros comuns…não precisa ter medo rsrsrs.

    Grande abraço velho o/

  5. Fala Edu, fico feliz com o comentário. Mas descordo de algumas coisas.

    A vantagem de se desenvolver expressions ao invés de javascript puro, é não deixar a o css ser carregado de uma forma e depois alterar a apresentação via javascript. Não dá aquele efeito errôneo.

    E quanto a numeros negativos, para posicionamento absoluto, é claro que é necessário, mas margin negativa, dá problema e não tem motivo pra usar. Se você colocar margin negativa em um elemento, o próximo elemento tem que ser “recompensado”

    Já a dica do min-height é bem legal, gostei.

    []s

  6. Oi Danilo,
    Li seu texto e mesmo assim fiquei com uma dúvida, estou tentando “colar” o site no topo do navegador sem deixar margem em cima, porém, mesmo dando um “margin: 0px auto” no elemento, ele não fica sem margem superior, usando margem negativa ele funciona, teria outra solução, sem ser usar uma margem negativa para este problema?

    O site é: artedavida.net

    Obrigado.

  7. @Evandro Nunes

    Pelo que vi o seu problema é na margem do #wrap, ele tem 15px no topo, o que causa esse problema.

    Se você retirar a margem do topo do #wrap o espaço do topo já some.

Leave a Reply

Your email address will not be published. Required fields are marked *