CSS Conditional comments
Postado por: Pedro Rogério emUma das operações mais comuns desenvolvidas pelos programadores em uma página web é detectar o tipo de navegador utilizado e versão para que o conteúdo seja entregue de forma conveniente ao usuário. Para isso podem ser utilizadas várias técnicas tanto do lado servidor como do lado cliente. Nesse tutorial você terá uma introdução aos conditional comments, uma forma simples de diferenciar folhas de estilo entre as diversas versões o Internet Explorer.
Benefícios de utilização
Os principais benefícios de utilização são:
- Menor impacto do lado cliente
- Quando o navegador encontra um comentário condicional que não diz respeito a ele, ele o considera como um simples comentário HTML e o conteúdo não é analisado, baixado, economizando recursos da máquina cliente.
- Não é necessário o uso de Scripts
- Conditional comments são utilizam nenhum tipo de Script ou DHTML, durante o carregamento da página ele é analisado e direcionado somente para o browser necessário.
- Separa o código da lógica
- Utilizando Conditional comments você separa seu código em pequenos segmentos, tornando mais fácil o entendimento e a manutenção.
- Cross-browser
- A utilização de Conditional comments não é restrita somente ao Internet Explorer, eles podem ser utilizados nos browsers que suportam comentários condicionais para personalizar o conteúdo e aqueles que também não suportam.
Terminologia
Termos que serão utilizados no artigo:
| Termo | Descrição |
|---|---|
| expression | Uma conbinação de operadores, funcionalidades, e/ou valores usados para formar uma declaração condicional. |
| downlevel browser | Qualquer browser exceto Internet Explorer 5 e versões posteriores. Para efeitos do presente artigo, downlevel refere-se especificamente a qualquer browser ou a versão do navegador que não suporte condicional comentários. |
| uplevel browser | Internet Explorer 5 e versões posteriores, que suporte conditional comments. |
| Um bloco de comentários condicionais que é ignorado por browsers downlevel. Internet Explorer 5 e versões posteriores renderizam o HTML se a expressão é avaliada como verdadeira. | |
| downlevel-revealed | Um bloco de comentários condicionais que é analisado por browsers downlevel. Internet Explorer 5 e versões posteriores também renderizam o HTML se a expressão é avaliada como verdadeira. |
Sintaxe dos Conditional comments
A sintaxe básica dos comentários condicionais é mostrada na tabela a seguir:
| Tipo de comentário | Sintaxe ou valor possível |
|---|---|
| Comentário HTML padrão | <!– Conteúdo do Comentário –> |
| downlevel-hidden | <!–[if expression]> HTML <![endif]–> |
| downlevel-revealed | <![if expression]> HTML <![endif]> |
O HTML mostrado dentro de cada bloco de comentário condicional denota qualquer bloco de conteúdo HTML, incluindo scripts. Ambos os tipos de comentários condicionais utilizam uma expressão condicional para indicar se o conteúdo dentro do bloco deve ser analisado ou ignorado. A expressão condicional é formada a partir de uma combinação de funcionalidade, operador, e/ou valor, como mostrado na tabela a seguir:
| Item | Exemplo | Descrição |
|---|---|---|
| IE | [if IE] | A única característica suportada atualmente a string “IE”, correspondente ao Internet Explorer. |
| value | [if IE 7] | Um número inteiro ou ponto flutuante correspondente a versão do navegador. Retorna um valor Booleano se verdadeiro onde o número da versão corresponde à versão do navegador. |
| ! | [if !IE] | O operador NOT. Este é colocado imediatamente na frente do recurso, operador, ou subexpressão para inverter o sentido da expressão booleana. |
| lt | [if lt IE 5.5] | Operador menor-do que. Retorna true se o primeiro argumento é menor que o segundo argumento. |
| lte | [if lte IE 6] | Operador menor que ou igual. Retorna true se o primeiro argumento é menor ou igual ao segundo argumento. |
| gt | [if gt IE 5] | Operador maior que. Retorna true se o primeiro argumento é maior do que o segundo argumento. |
| gte | [if gte IE 7] | Operador maior que ou igual . Retorna true se o primeiro argumento for superior ou igual ao segundo argumento. |
| ( ) | [if !(IE 7)] | Operadores de Subexpressão. Utilizado em conjunto com os operadores booleanos para criar expressões mais complexas. |
| & | [if (gt IE 5)&(lt IE 7)] | Operador E. Retorna true se todas as subexpressões avaliadas forem verdadeiras |
| | | [if (IE 6)|(IE 7)] | Operador OU. Retorna true se algumas das subexpressões avaliadas forem verdadeiras. |
| true | [if true] | Avalia se verdadeiro. |
| false | [if false] | Avalia se falso. |
Exemplos de utilização
<!–[if IE]><p>Você está usando o Internet Explorer.</p><![endif]–>
<![if !IE]><p>Você não está usando o Internet Explorer.</p><![endif]>
<!–[if IE 7]><p>Bem vindo ao Internet Explorer 7!</p><![endif]–>
<!–[if !(IE 7)]><p>Você não está usando a versão 7.</p><![endif]–>
<!–[if gte IE 7]><p>Você está usando a versão 7 do IE ou superior.</p><![endif]–>
<!–[if (IE 5)]><p>Você está usando o IE5 (qualquer versão).</p><![endif]–>
<!–[if (gte IE 5.5)&(lt IE 7)]><p>Você está usando o IE 5.5 ou IE 6.</p><![endif]–>
<!–[if lt IE 5.5]><p>Por favor atualize a versão do seu Internet Explorer.</p><![endif]–>
<!–[if true]>Você está usando uma versão <em>uplevel</em> do browser.<![endif]–>
<![if false]>Você está usando uma versão <em>downlevel</em> do browser.<![endif]>
<!–[if true]><![if IE 7]><p>Esse comentário é mostrado aninhado no IE7.</p><![endif]><![endif]–>
Conditional comments não precisam ser utilizados especificamente para HTML, podem ser também utilizados para filtrar CSS para cada navegador(forma mais utilizada), e também para a utilização de Scripts. Vejam como se comporta o exemplo acima no browser.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Uso bastante essa solução, principalmente pela limpeza e porque gera código validado. Sobre isso vale lembrar que o formato NÃO valida e, portanto, não é uma boa técnica.
No quadrinho “Sintaxe dos Conditional comments” estão faltando “-” depois dos “”.
Abração!
E ai Pedro tudo tranquilo?
ou muito interessante o post, e o importante não é saber e sim saber onde encontrar como eu sempre falo, e pra isso basta entra aqui hehehe…
um abraço t+.
Pedro, o Elia comentou que não valida!
Ela estava dizendo do W3C?
Pq até onde eu sei, ele valida normalmente!
Pode responder essa por favor?
Abs…e nem preciso dizer que eu uso isso sempre né? Estou diminuindo pq os meus WebStandards estão cada vez mais crossbrowsers!
Abs
para bens pelo site otimo artigo!
[...] irá adicionar a class=”over” a cada item da lista. É aconselhável você utilizar comentários condicionais para que o código seja somente lido pelo Internet Explorer 6 e anteriores. Não podemos esquecer [...]
[...] CSS no Lanche – Explicação completa de como funcionam e quais são os condiontal comments. [...]
[...] No exemplo foi utilizado um elemento container com a classe box e o código para o IE será descrito aqui através de comentarios condicionais: [...]
[...] você planeja utilizá-lo em um site ativo, você pode utilizar conditional comments ao invés do kack estrela. Mas para este exemplo isso será [...]