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:
<!--[if IE 6]> <link rel="stylesheet" href="main_ie.css" mce_href="main_ie.css" type="text/css" media="all" /> <![endif]-->
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:
<!--[if lt IE 7]> <body class="ie6"> <![endif]--> <!--[if IE 7]> <body class="ie7"> <![endif]--> <!--[if IE 8]> <body class="ie8"> <![endif]--> <!--[if !IE]>--> <!--<![endif]-->
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.
