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:
- http://jigsaw.w3.org/css-validator/
- http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
- http://paulirish.com/2009/browser-specific-css-hacks/
- http://www.quirksmode.org/css/condcom.html
Sem Posts Relacionados.
ole, td bom ?, materia INTERRESANTE , mas passando para parte pratica, pode dar outro exemplo desse metodo para melhor compreeção.
AbRAÇOS
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?
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.
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 ;)
Muito interessante.. fico agradecido pela ajuda…
Não consegui utilizar essa dica. Vc pode dar outro exemplo, por favor!
Estou precisando muito!!!!
Olá Luiz, tudo bem? Creio que pela alteração feita no layout, algumas coisas ficaram faltando, dê uma conferia, acabei de arrumar a formatação dos códigos e teste novamente.
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!
Perdoe a minha ignorancia. Que bom que o artigo foi útil :D