Bruno Dulcetti



Arquivos:

Categorias:

  • Amizade:

  • Artigos

  • Links:

    O meu, o seu, o nosso espaço!

    » Conditional Comments ou Comentários Condicionais

    Falae galera, tranquilidade? Aqui tudo blz como sempre, bastante trabalho, cansado, mas faz parte naum eh verdade?

    Bom, antes de eu comentar sobre o assunto, adianto para vocês que semana que vem entra a nova versão do meu Blog/Portfólio. Modifiquei um bocado de coisa, agora ele é líquido, estou utilizando alguns recursos em ajax, atualizei algumas informações como onde estou morando, que no atual ainda mostra Niterói :D.

    Ela já esta pronta, só falta eu modificar algumas coisas no Banco de Dados e adicionar o tema aqui no Word Press.

    Falando em Word Press, atualizei ontem para o Word Press 2.0. E digo, ele é bem melhor que o 1.5, vários recursos interessantes, o Akismet jah vem instalado bastanto somente ativá-lo, entre outras vantagens.

    Chega de conversa Bruno e vamos ao assunto?

    Ok, ok, naum precisa ficar bravo 😀

    Hoje falarei sobre os Conditional Comments ou Comentários Condicionais.

    Creio que muitos que frequentam esse Blog sabem que a Microsoft está lançando i.e.7 e tem versões betas por ae. A equipe que está participando da produção da nova versão do browser comentou em seu Blog para que os desenvolvedores naum utilizassem hacks do tipo:

    • html > body
    • * html
    • head:first-child + body
    • head + body
    • body > element

    Caso seja feita a utilização de um deles, o site poderá ser mal renderizado no browser, com isso, complicando a vida pro desenvolvedor. Pra variar o ie faz isso, normal… 😀

    E no Blog, o pessoal da Microsoft aconselhou a utilização dos Conditional Comments ou Comentários Condicionais, que são comentários no código HTML que somente o i.e. reconhece e os outros browsers consideram como um comentário.

    Ah sim… Legal… Não entendi!?

    Tranquilo. Com os tipos e exemplos, você entenderá perfeitamente sobre essa técnica. Primeiro vou mostrar abaixo os diferentes tipos de Conditional Comments:

    » Este serve como como um “Se for IE faça”:

    <!--[if IE]>
    <![endif]-->

    » Este serve como como um “Se for superior ao IE 5 faça”:

    <!--[if gt IE 5]>
    <![endif]-->

    » Este serve como como um “Se for IE 5 ou superior faça”:

    <!--[if gte IE 5]>
    <![endif]-->

    » Este serve como como um “Se for anterior ao IE 5.5 faça”:

    <!--[if lt IE 5.5]>
    <![endif]-->

    » Este serve como como um “Se for IE 6 ou anterior faça”:

    <!--[if lte IE 6]>
    <![endif]-->

    A mudança de um para o outro, além das versões dos browsers, são as letras:

    • gt: greater than ou maior que o browser setado
    • gte: greater than or equal to ou maior ou igual ao browser setado
    • lt: less than ou menor que o browser setado
    • lte: less than or equal to ou menor ou igual ao browser setado

    Cole um destes exemplos no Dreamweaver por exemplo. Você verá que ele deixará cinza, como se fosse um comentário, isto por causa do início do código: <!– ; e o final do código: –>

    Para os que não conhecem (o que eu acho muito difícil), esse eh o modo de se fazer comentário dentro do HTML. Mas a Microsoft implementou essa funcionalidade em seu browser, o i.e.

    Legal Bruno, mas continuo sem entender direito =/

    Relaxa, vamos ver agora isso no HTML para que você entenda melhor a utilização. Veja abaixo o código HTML ou então verifique o exemplo online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <style type="text/css">
    body {
    margin: 10px;
    padding: 3px;
    color: #666;
    background-color: #fff;
    font: 75% Verdana;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {
    background-color: #000;
    color: #FFF;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Não utilizei muitas propriedades no CSS porque estou com preguiça de ficar explicando cada linha ok? 😀

    Vou comentar cada parte q utilizei, que convenhamos, naum tem nada de complicado ;). A única coisa diferente é o comentários condicional mesmo.

    Vocês podem perceber que no Internet Explorer 6 ou anterior, o fundo ficou preto e a fonte branca e nos restantes dos browsers o fundo ficou branco e a fonte cinza.

    No CSS eu setei para a tag <body> que ela tenha 10px d margem em todas as direções, padding de 3px em todas as direções, cor de fundo branco, cor da fonte cinza #666 e fonte verdana com 75% do tamanho padrão do Browser.

    Blz Bruno, isso eu vi, essa parte eu entendi. Mas e o resto?

    Agora comentarei sobre o comentário condicional utilizado: <!–[if lte IE 6]> que como vimos acima, quer dizer “igual ou anterior ao ie 6”.

    Com isso, o ie 7 não será afetado com as propriedades setadas dentro dessa condição. Dentro dessa condições eu coloquei a cor de fundo preta e a cor da fonte como branca. Lembrando que, como eu não modifiquei a margin, padding e font, elas continuarão como na primeira setagem, pois na anterior, todos os browsers entendem. É como na utilização dos hacks. 😉 Ele só modificará o que você deixar dentro do “setagem” no CSS.

    Podemos utilizar qualquer uma das versões que eu citei anteriormente, com a versão do browser que você necessita. Lembrando que não funciona em versões abaixo do ie 5.

    Variações na utilização

    Vocês devem estar perguntando agora pra mim “Mas Bruno, você está utilizando o CSS incorporado no html!”.

    Sim, sim, mas pode ficar calmo. Foi só um exemplo para melhor compreensão. Vocês podem colocar a tag <link> ou a <style> dentro da condição, que funcionará da mesma forma. Veja abaixo o exemplo ou confira online:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Comentários Condicionais</title>
    <link rel="stylesheet" type="text/css" href="normal.css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    </head>
    <body>
    Texto de exemplo
    </body>
    </html>

    Neste exemplo, utilizei a tag <link> dentro do <head> e dentro da condição. Dentro do <head> eu chamei o arquivo normal.css, que serve para todos os browsers e temos tb o arquivo ie.css que serve somente para o i.e. e está dentro da condição.

    Neste exemplo, ele faz a mesma coisa que o exemplo anterior, mas ao invés do CSS estar incorporado, estou chamando via <link>.

    Cuidados

    Tenha cuidado na sequência que você coloca os comentários condicionais. Eles SEMPRE deverão vir DEPOIS da chamada para todos os browsers. Isso faz com que os comentários condicionais sobrescrevam o CSS anterior. Caso eles sejam colocados ANTES, naum adiantará nada, pois a tag <link> fora do comentário condicional irá sobrescrever.

    E finalizando…

    Pra finalizar, queria dizer q os exemplos mostrados aqui são só de exemplo. Naum creio que vocês irão utilizar um site com fundo diferente para internet explorer, etc.

    Também naum pensem que vocês só podem mudar cores, bordas, etc… Podem mudar o que quiser dentro do CSS, fica por conta de vocês.

    Geralmente, os comentários condicionais são utilizados para resolver bugs no i.e. como box models, problemas de margin e padding, entre outros exemplos.

    Um beijo do magro

    Bom galera, espero ter ajudado e tirado algumas dúvidas de quem de repente tenha. Espero que tenham gostado.

    Esperem por semana que vem… Tchanaaaaaaaaam… uahuahuhahauhau

    Akele abraço.

    [ 04/ago/2006 às 15:00hrs ] [ Por Bruno Dulcetti ] Comentários 11 Comentários |

    Categorias: Artigos,CSS,Webstandards

    11 Comentários no Post "Conditional Comments ou Comentários Condicionais"

    Postar no Rec 6

    1. Atualmente utilizo os “html > body” da vida, pois o site fica mais leve e é muito mais prático do que os conditional comments…

      Mas vou ficar esperto quanto a nova versão do IE, para ver se os erros continuam ou se ele renderizará os sites de maneira correta…

    2. Bruno,
      Já utilizei esta técnica para resolver um problema de transparência de arquivos PNG, que o maldito IE não respeita.
      Aqui um modelinho:
      No HTML :

      Aqui o script:
      var arVersion = navigator.appVersion.split(“MSIE”)
      var version = parseFloat(arVersion[1])

      if ((version >= 5.5) && (document.body.filters))
      {
      for(var i=0; i”
      img.outerHTML = strNewHTML
      i = i-1
      }
      }
      }

    3. var arVersion = navigator.appVersion.split(“MSIE”)
      var version = parseFloat(arVersion[1])

      if ((version >= 5.5) && (document.body.filters))
      {
      for(var i=0; i”
      img.outerHTML = strNewHTML
      i = i-1
      }
      }
      }

    4. fala kblera, bele??

      olha só: http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

      pelo q entendi, eles recomendam não usar hacks para IE:

      Call to action: Please check your pages

      Here is a list of common CSS hacks to look out for (please also consider their variations):

      * html > body – http://css-discuss.incutio.com/?page=ChildHack
      * * html – http://css-discuss.incutio.com/?page=StarHtmlHack
      * head:first-child + body – http://centricle.com/ref/css/filters/tests/owen/
      * head + body – http://www.dithered.com/css_filters/css_only/head_adjacent_sibling_body.html
      * body > element – http://css-discuss.incutio.com/?page=ChildHack

      We ask that you please update your pages to not use these CSS hacks. If you want to target IE or bypass IE, you can use conditional comments .

    5. mas sei lá… eles mesmos caem em contradição logo a seguir… com o IF IE deles… blé.

    6. Muito bacana teu artigo.
      Parabéns!

    7. Excelente post. Parabéns! Acho que este post me fará assinar seu feed, rs 🙂
      Obrigado e grande abraço!

    8. Marcos Rondinelli | 02/abr/2008 às 16:17

      Muito bom esse seu artigo sobre comentário condicional. Claro e direto. Me ajudou bastante!

    9. […] brunodulcetti – muito bem detalhado e com bom humorquirksmode revolucao.etc – completopopnoid forum.imasters – […]

    10. […] 6- Não use hackers CSS, isso pode comprometer a validação de seu site. Procure utilizar folhas de estilos alternativas, inseridas via comentários condicionais. […]

    11. Só uma dúvida!!
      Tem como utilizar comentários condicionais para outros navegadores sem ser o IE??
      Tipo, estou criando um site e tem umas coisas que não funcionam no safary e já funcionam diferente no mozila etc…
      Ai pensei em colocar comentários condicionais diferentes para cada um, teria como fazer issso??

    Tá esperando o quê? Comenta logo.

    
    Copyright © 2005 Bruno Dulcetti | Creative Commons
    Bruno Dulcetti atuante na área de desenvolvimento web / webdesign e colaborador na área de webstandards pelo Blog BrunoDulcetti.com - blog. Atuante na área desde 2000. Atuando na cidade de Niterói/RJ - Brasil. E-mail: bruno@brunodulcetti.com