CSS Hacks ou CSS Condicional? A partir de agora, nenhum!

Como todo o desenvolvedor Web, sofro diariamente com as dores de cabeça causadas pelos browsers que não seguem os padrões (ok, Internet Explorer). É um tal de margem duplicada pra cá, texto misteriosos que se replicam em final de blocos, uma maravilha!

Para contornar esses problemas que nosso "querido" Internet Explorer nos causa, temos algumas práticas interessantes, dentre elas, as que eu utilizo utilizava posso destacar os CSS Hacks e os CSS Condicionais

CSS Hacks

Podemos definir como CSS Hacks as formas que encontramos de "enganar" o browser (IE, sempre IE) para que ele  renderize corretamente corretamente o CSS da página. Esses Hacks somente se aplicam aos browsers que tem essa falha, lógico.

Podemos citar alguns Hacks famosos:

/* IE 6 e anteriores */
* html #um { color: red }
/* IE 7 e anteriores */
*:first-child+html #dois { color: red }
/* IE 7 e browsers modernos */
html > body #tres { color: red }
/* Somente browsers modernos (sem IE 7) */
html > /**/body #quatro { color: red }

Apesar de parecer ser uma solução simples, os Hacks tornam o CSS não-válidos, o que na minha opinião é um problema. Sem contar o fato de que estamos enganando o browser para ele renderizar algo que ele não foi feito para suporta, ou seja, processamento extra.

CSS Condicional

Como o próprio nome já diz, é o uso de uma folha de estilos condicional, ou seja, só é carregada quando for determinado browser que estiver fazendo a requisição, e o melhor, sem javascript!

Essa prática faz uso dos conditional comments, um comentário HTML com uma sintaxe especial que é interpretado única e exclusivamente pelo Internet Explorer. Os browsers modernos os enxergam apenas como comentários comuns, sem interpretá-los.

Por exemplo, se quisermos que um estilo seja carregado somente no IE 6, fazemos o seguinte:

A lado bom de se utilizar os CSS Condicionais é que a folha de estilo é válida, pois não usa nenhum hack que possa a ver a invalidá-la. Por outro lado, temos requisições extras que vão ser feitas de acordo com o browser.  Além disso, com está no <head>, a renderização da página fica aguardando ela estar totalmente carregada.

Uma nova esperança!

Eis que lendo um artigo do Paul Irish, surgiu uma luz no horizonte, que resolve o problema das multiplas requisições de folhas de estilos e também da espera pelo carregamento.

A solução é fazer o uso de conditional comments não para alternar entre folhas de estilos a ser carregadas, e sim para aplicar ou não uma class no <body> do documento da seguinte maneira:




Isso  faz com que de acordo com o browser, seja adicionado a class (ie6, ie7 ou ie8) no corpo do documento, possibilitando corrigir as falhas de renderização direto na folha de estilo principal, facilitando até a manutenção do código.

Como exemplo, para adicionar alguma correção, fariamos o seguinte no CSS:

div#container{margin-left:10px;}
//corrigindo o famoso bug da margem dupla 
body.ie6 div#container{margin-left:5px;}

E é isso!

De agora em diante, essa é a solução que utilizarei!

Segue alguns links interessantes sobre o assunto:



Sem Posts Relacionados.

Categoria: Sem categoria
Tags: ,

15 respostas a CSS Hacks ou CSS Condicional? A partir de agora, nenhum!

  1. ole, td bom ?, materia INTERRESANTE , mas passando para parte pratica, pode dar outro exemplo desse metodo para melhor compreeção.

    AbRAÇOS

  2. Opa, tranquilo?
    http://hboaventura.com/css_conditional_body.html dá uma olhada neste link, usando IE e usando o FF. Tu irá perceber que eu atribui cores diferentes de acordo com a class que o comentário condicional adicionou ao . Simplificando, as correções de cada browser (IE no caso) vão ser aplicadas sempre começando pelo class dele.
    Exemplo:

    //estilo para todos os browsers
    body div{
    clear:both;
    float:left;
    margin-left:10px;
    }
    //fix para o box-model do ie6
    body.ie6 div{margin-left:5px;}

    Ele só vai aplicar para os usuário de ie6, não prejudicando os outros e deixando o código limpo.

    Ficou mais claro pra ti?

  3. Olá, gostaria de acrescentar ao conteúdo outro truque. É possível utilizar também comentários de duas barras (//) no CSS para aplicar modificações apenas no IE pois diferente dos outros browsers ele renderiza normalmente. Veja:
    ——-
    box1{
    margin: 10px 20x;
    //margin: 10px 10px;
    }
    ——-
    É importante escrever esses comentários sempre no final de cada bloco para que sobrescrevam as propriedades anteriores.
    Assim não precisa usar comentarios condicionais nem css condicional, mas a validade do CSS fica comprometida.

  4. Mas é justamente por isso que é interessante o uso de CSS condicional, para não comprometer a validade do CSS. Creio que boa parte dos desenvolvedores frontend já utilizaram dos CSS Hacks, mas o CSS condicional é muito mais elegante ;)

  5. Muito obrigada Henrique! Agora consegui! Muito boa a sua dica.
    Ah! Meu nome é Luz e nã Luiz! Sou garota (rs)!
    Mais uma vez obrigada! Você salvou a minha vida!

  6. Fala Henrique, brother estou com 1 problema que o FF do Linux interpreta diferente o tamanho das fontes, entao onde no site no windows fica beleza no linux fica distorcido pq as fontes ficam maiores assim quebrando mais linhas,
    teria como fazer uma condição apenas pra isso?
    obrigado

  7. Olá, pessoal, bom dia.

    Tô precisando da ajuda dos colegas.

    Então, estou fazendo um site e as fotos (coloridas) que tem nele, quando
    passamos o mouse em cima, elas ficam esbranquiçadas. Tá, até aí o efeito
    está normal…

    Testando o site offline tanto no IE como no Chrome o efeito fica normal,
    mas quando jogo o site online no Google Chrome as fotos de coloridas ficam
    pretas e brancas. Já no Internet Explorer o efeito funciona normal, as
    fotos ficam coloridas e qdo passamos o mouse dá uma leve esbranquiçada.

    Alguém sabe me dizer pq no Chrome elas ficam pb? Como faço para elas
    ficarem coloridas no Chrome tbem?

    Site feito com HTML+CSS

    Por favor, se alguém puder me dar esse help…

    Obrigada pela atenção.

  8. Henrique não consegui fazer funcionar. Coloquei da seguinte maneira:

    Na seção head:

    No CSS:

    Padrão:

    #telefone {
    float: right;
    margin-top: 18px;
    }

    Para o IE8:

    body.ie8 div#telefone {
    float: right;
    margin-top: 0px;
    }

    O que fiz de errado?

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>