Tableless - Desenvolvimento inteligente com Padrões Web

18/12/2007
Artigos

Comentários Condicionais – Não use

A utilização de comentários condicionais não é uma excelente maneira de contornar bugs. Os comentários condicionais são comentários incluídos no código HTML escritos exclusivamente para fazer uma parte do código funcionar no Internet Explorer. Normalmente o uso dos comentários condicionais …

Por

A utilização de comentários condicionais não é uma excelente maneira de contornar bugs. Os comentários condicionais são comentários incluídos no código HTML escritos exclusivamente para fazer uma parte do código funcionar no Internet Explorer.

Normalmente o uso dos comentários condicionais servem para especificar uma parte do código para a interpretação exclusiva pelo Internet Explorer. Alguns desenvolvedores criam um CSS exclusivo para o IE e utilizam os comentários condicionais para que apenas o Internet Explorer entenda este CSS. Assim é possível corrigir bugs que acontecem apenas no Internet Explorer.

Esta prática faz com que o desenvolvedor tenha duas versões do CSS para fazer manutenção, corrigir falhas, implementar novas mudanças etc, etc, etc.

A sintaxe é a seguinte:

<!--[if IE]>
<link href="estilos/estilos_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Se quiser, você pode fazer um comentário condicional para separar um código específico para cada versão do internet explorer:

<!--[if IE]>
     Para todas as versões
<![endif]-->

<!--[if IE 5]>
     Apenas para o Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
     Apenas para o Internet Explorer 5
<![endif]-->

<!--[if IE 5.5]>
     Apenas para o Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
     Apenas para o Internet Explorer 6
<![endif]-->

<!--[if gte IE 5]>
     Para o Internet Explorer 5 e versões superior
<![endif]-->

<!--[if lt IE 6]>
     Para versões anteriores ao Internet Explorer 6
<![endif]-->

<!--[if lte IE 5.5]>
     Para o Internet Explorer 5.5 e versão inferior
<![endif]-->

A idéia parece ser interessante. Mas eu não aconselho seu uso.
Antigamente, por volta de 1997, todos os sites usavam uma “splash page” com dois logos: um logo do Netscape Navigator e outro do Internet Explorer. Naquele tempo, em plena guerra dos browsers, era necessário haver uma versão do site para cada navegador por conta da compatibilidade. Os browsers lutavam por adeptos e uma maneira de conseguir isso era criando códigos proprietários que não funcionassem em nenhum outro browser. Por causa disso, o desenvolvedor tinha um dilema: ou sacrificava uma parte do seu público e se dedicava a um único browser, ou ele trabalhava em dobro para suprir as necessidades de todos os browsers da época.

Ter o dobro do trabalho foi um dos motivos pelo qual o pessoal começou a divulgar os Padrões Web com mais força.
Trabalhar com Comentários Condicionais faz com que o desenvolvimento web volte para o ano de 1997. Se você utiliza os comentários condicionais para separar um CSS exclusivo para o IE, geramos trabalho desnecessário. Vai ser preciso replicar as modificações em duas versões. É complicado, leva tempo e é muito, mas muito passível de erros.

Hoje é perfeitamente possível fazer um site sem a utilização de Comentários Condicionais ou CSS HACKS. Claro, há horas que é impossível criar soluções para contornar um bug de compatibilidade sem o usar maneiras alternativas. Mesmo assim, é preferível utilizar os CSS HACKS em vez dos Comentários Condicionais pelo simples motivo de que: 1) eles serão poucos ou quase nenhum, se você fizer um código legível e semântico. 2) se tiver que usá-los, eles estarão no mesmo CSS, não precisará manter dois códigos para duas versões de sites. Você vai resolver os erros de compatibilidade isoladamente.

As dicas são: Mantenha o código o mais simples possível. O código deve ser tratado como o seu lar. Mantenha-o organizado e limpo e você viverá bem ali.
Se você for designer, não faça layouts bizarros, com montes e montes de bordas arredondadas, formas que ficam sobrepostas, sombrinhas aqui e ali.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

← Older Comments
  • http://guezth.wordpress.com/ Diego Teixeira

    Bom… concordo e discordo…

    porque? certo, vamos lá…

    é humanamente impossivel não usar Hacks… nao sei pq o IE não pode ser normal :(

    por isso.. faço o CSS normal, e o CSSHacks separados… e uso comentarios condicionais… caso seja IE, inclui o css de hacks (não é o mesmo… só tem os hacks), acredito que com isso o trabalho não fique tão grande, e fique mais profissional(mais que isso soh sem utilizar Hacks), pois nos validadores, os hacks nem aparecem(tah bom… mas isso não tem cabimento), mas sou contra de fazer 2 css, com o mesmo conteudo, mudando somente os dados para um e outro navegador… isso sim é voltar ao passado…

    ahhhhhhhhhhhh… outra coisinha… o IE 7 aceita hacks sim… ao inves de usar “_”, usamos “*”, não lembro onde vi isso… mas funciona!!!

    []‘s

  • http://www.sadjow.com Sadjow

    Eu concordo com isso. Quanto menos trabalho melhor.
    Se meu CSS não passa no teste da validação por causa de um HACK a culpa não é minha. os browsers que obrigam o uso.

  • http://www.rodrigoghedin.com.br/ Rodrigo P. Ghedin

    Pelo teor do post, a sensação que tive é que o Diego mantém dois arquivos CSS completos no site, um para o IE, e outro para outros navegadores. Não é assim que eu utilizo este recurso…

    O CSS geral, ainda que haja outro via comentário condicional na página, continua sendo lido pelo IE. Assim, escrevo o CSS normal, e depois de tudo pronto, vejo os erros que aparecem no IE, e os corrijo no CSS do comentário condicional. Este CSS à parte, em regra, não passa de cinco linhas; ele serve para ajustes e correções, e não para ser uma cópia do principal “otimizada” para o IE.

    Escrever dois CSS iguais, apenas alterando o que é preciso no do comentário condicional é realmente burrice. Agora, utilizá-lo apenas na correção de erros, a meu ver é a melhor solução para os problemas de renderização do IE: não invalida o código, pemite-me definir a(s) versão(ões) do IE afetadas, e me dá total controle sobre o código, de forma organizada e inteligente.

    Mas, felizmente, a Microsoft parece estar fazendo o dever de casa no IE8, e se tudo correr como o esperado, a padronização chegará em breve.

    Por fim, me assusta ler um texto desses aqui no Tableless, desestimulando o uso de um recurso tão útil e amigável como os comentários condicionais. É falta de assunto? Fazia tempo que não passava por aqui, e pelo visto, não perdi muita coisa…

    []‘s!

  • Filipe Melo

    esse é o o problemas das pessoas..

    sabem mecher no photoshop e corel draw ou no flash, já se auto titulariza Design, independente se é de web ou não, vocês nem imaginam realmente o que é um DESIGN… ou quem rala e passa anos e anos estudando design e ainda nem são imagine quem nunca estudou ..

  • Guilherme Mattos

    Não seria mais produtivo fazer um post explicando o uso dos meta tags. Não sei se você já fez isso, pois comecei a acompanhar o Tableless.com.br ano passado, mas seria uma boa falar disso de novo eu pela primeira vez, não sei.

    Tem muita gente como eu que usa e nem sabe pra que serve, só que eu quero usar uma coisa sabendo o que eu estou fazendo. Já encontrei vários tutoriais falando sobre meta tags, mas nenhum é completo.

    Explicar keywords, description, language, etc, todo mundo já sabe, eu queria saber aqueles que são menos falados, que são muitos.

    Que tal escrever isso num próximo post,seria bem mais interessante, sei lá, é só uma sugestão.

  • Elias

    seus posts começara a chegar num ponto muito pessoal, esse tipo de comportamento não é digno a este nivel de website. Eu sei que este website é de sua altoria, mas a meta dele é ja é outra

    esse post está totalmente errado, pra não comentar outras coisas

  • http://tiagocolucci.8tt.org-emdesenvolvimento...hehe Tiago Colucci

    Olá a todos. Acompanho também o Tableless à algum tempo, visto que é uma grande fonte de informações. Mas como foi dito no coment acima, alguns posts tem chegado ao nível pessoal, que no caso, tem se demonstrado meio desagradável. Se vc queria falar sobre comentários condicionais, ótimo! Legal, eu mesmo não sabia sobre o assunto. Mas logo no título vc coloca: “…Não use!”, como se fosse a coisa mais horrível do mundo usar. Como ja foi dito, se ele valida, e funciona, esta dentro dos padrões, correto?! Se um hack valida, tb esta dentro dos padrões. Mas se um hack não valida, ele não esta dentro dos padrões, tb não é acessível e foge totalmente do próposito das Web Standart’s. Pessoalmente, acho que um código bem escrito não é necessário nem um nem outro. Não digo que dessa água não irei beber, mas, sempre busco uma alternativa dentro do meu próprio código.
    Se é falta de inspiração para escrever posts, vc poderia fazer o Tableless de uma maneira que segue a “2.0″, ou seja, os usuários tb possam inserir suas matérias e técnicas. Seria bem legal

    [];
    Tiago Colucci

  • Felipe Avilis

    Muito interessante o post, mas não concordo com a forma que foi finalizado.

    Sou designer, trabalho com web a 10 anos, e acho que a forma de como o designer faz um layout (com bordas arredondadas ou sobreposições) deve ser indiferente para o desenvolvedor. O layout pode ser “bizarro”, se assim preferir, e o HTML limpo, organizado. É tudo uma questão de como se escreve o código.

    Abraços! ^^

  • http://www.julianomoreira.com Juliano Moreira

    Olha, pessoal! Eu concordo com o Diego(talvez nao concorde da forma do post no imperativo). Apesar de não usar muitos as condicionais, creio que elas podem ajudar de alguma forma. Não gosto de usa-las devido ao extra work que elas proporcionam pois elas ficam no codigo HTML e não no arquivo CSS. Em um site dinamico com 50 ou mais paginas elas daum um trabalho danado. Porém, fica ao criterio do desenvolvedor.

  • http://www.luandapereira.com Lua

    Achei ótimo o artigo, mas não gostei do último parágrafo quando você falou de maneira que soou pejorativa “Se você for designer, não faça layouts bizarros, com montes e montes de bordas arredondadas, formas que ficam sobrepostas, sombrinhas aqui e ali.” …
    Designer de verdade, estuda bastante e sabe muito bem o que faz e o conceito das coisas, não é simplesmente um “layout bizarro”.

  • http://www.ralphalmeida.com Ralph Almeida

    fala diego, tudo bem?
    fiz o curso com vc de tableless =)
    criei um blog pra mim agora! citei vc no post de hj ;)
    ja to desenvolvendo bem as tecnicas de tableless.
    valeu cara
    abraços

  • Leandro Augusto Lemos

    Diego, usar comentário condicional para embutir uma folha de css logo após a principal, apenas com as correções para o ie é totalmente válido, mas isso no meu modo de ver e pensar… css hacks não validam no w3c, mesmo que este seja apenas um detalhe, em alguns clientes vc precisa fazer um trabalho que seja totalmente validado, apenas por desejo do cliente…

    Fica ai minha dica, usem comentários condicionais com moderação… apenas para tratar exceções do(s) IE(s)…

    Abraços a todos e feliz ano novo

  • Guilherme

    Muito bom o texto.

    Mas se não é aconselhavel, de que maneira devo fazer?

    Acho que a ideia é boa, mas a solução ficou muuuito vaga.

    T+.

  • Guilherme

    esse fellipe melo está muito nervosinho.. será q é pq ele passou anos estudando e nao consegue ter mais criatividade q um cara q apenas lê tutoriais?

    rsrsrsrs..

    vai estudar e seja mais humilde meu filho!

  • Eduardo

    O engraçado é que é condenável o uso de comentários condicionais por causa de um trabalho a mais que ninguém sabe qual vai ser, mesmo se esse “trabalho” durar 1 minuto pra ser feito.

    Meu Deus!!! Se seu Css for bem montado, se o html bem estruturado vc não vai perder mais de 5 minutos pra montar um Css pro iE MINHA NOSSA SENHORA!

    Meu, 8 ou 80 não funciona nesse mundo, “NUNCA DEIXE DE USAR CAMISINHA!” Se todo mundo fosse bitolado assim só teriamos bebe de proveta. Para com isso… Somos animais racionais então pensemos na melhor hora de usar…

    Pro ie6 seletores como body>div não funcionam!!! Use então KCT. Diminuirá ainda mais os problemas por ele causado…

    Invalidar um código inteiro por causa de 1 hack é a coisa mais imbecil que eu já ouvi.

  • http://teclou.blogspot.com joao

    vale mais um Comentário Condicional na mão do que dois css hacks voando

    —————–

    comentario condiocioanl é uma gambiarra

    mas css hacks é muito mais gambiarra

  • skyzo

    “Comentários Condicionais – Não use”
    heuahweuhaeh pior post que eu ja vi! fala pra não usar uma gambiarra e usar uma gambiarra ainda pior! heuaheuhae largue mão cara, todos sabem dos problemas do IE e basta ter bom senso para resolve-los usando Comentários Condicionais, é uma gambiarra ? eh sim porem uma gambiarra OFICIAL da MICROSOFT, sendo 1 milhao de vezes melhor do que usar esses hacks idiotas. Adimiro bastante esse site, mas esse post foi uma tremenda bola fora!

  • Ignorante

    Este articulo es falso!! Los comentarios condicionales son la mejor forma de solucionar los fallos de Explorer, sin ensuciar con hacks nuestra hoja de estilos.
    Lamento que se difunda esta idea, es nefasta!!

  • http://www.connectionhost.com.br Diego Couto

    Parabéns pelo excelente tutorial!

    Concordo totalmente com você, eu pelo menos nunca fui muito adepto dos comentários condicionais e nem mesmo dos CSS HACKS, que infelizmente se fazem necessários muitas vezes.

    Abraço.

  • Paulo Ricardo

    Foi dito, e muito bem:

    1) eles serão poucos ou quase nenhum, se você fizer um código legível e semântico.
    2) se tiver que usá-los, eles estarão no mesmo CSS, não precisará manter dois códigos para duas versões de sites.

    E ponto final. :)

    Existem desenvolvedores e desenvolvedores… Felizmente há os que fazem a lição de casa. ;)

    Há quem acredite em Web 2.0, Web 3.0 Turbo, Web 4.0 Flexpower, etc. Fazer o quê?

    Continuemos estudando e cada vez mais ganhando este mercado que é nosso no talento… ;)

    []‘s

  • Anderson Luiz Michels

    Não concordo.
    Você não precisa reescrever todo o código css para um navegador específico. Basta mudar a propriedade que está causando o bug. Exemplo:

    Código Padrão:
    #comentario-box
    {width:544px;
    min-height:80px;
    float:left;}

    Código Específio IE6.
    #comentario-box
    {height:80px;}

    Na minha opinião é melhor assim, pois não fica sujando sua folha de estilos principal com hacks.

  • http://www.matheusoliveira.net Matheus de Oliveira

    Concordo plenamente que devemos desenvolver nossos CSS tentando fazer com que funcione tanto no IE qto nos browsers de verdade, e concordo que o uso dos comentários condicionais deve ser evitado ao máximo.

    Mas agora, dizer para usar Hacks no lugar de comentário condicional eu já discordo. Primeiro que Hacks são bem mais complicados, pois é difícil ter certeza de onde funcionará ou não, já comentários é certeza só no IE selecionado. Segundo que não é verdade dizer que fica dificíl manter dois (ou mais) CSSs por causa dos comentários condicionais, desde que o CSS pro IE seja bem curto e arrume apenas pqnos bugs. Além do mais vc pode adicionar comentários (normais) no seu arquivo CSS e dizer q há uma alteração pro IE.

    Outro ponto que gostaria de criticar este post é no seguinte (sei da dificuldade de controlar isso): muitos novatos ficam perdidos, pois ao invés de dizer os benefícios e desvantagens de determinados assuntos, diz-se para usar isso ou aquilo, e em cada lugar há algo diferente, o que deixa os caras perdidaços. Seria mais interessante se você só criticasse o uso de comentários condicionais, mas sem aprovar o uso de Hacks, pois dá impressão (sei q não é a intenção) que quis dizer somente: “Usem CSS Hacks a vontade!”

    Filosofando: já repararam o qto menor nosso código CSS (eu costumo fazer um pra todos e sem hacks, se possível) ficaria bem menor se não fosse a preocupação com o IEca?

    No demais, parabéns pelo blog e o novo velho design…abços

  • Caio Hiperativo

    Diego,

    Sou obrigado a descordar, até porque nós não podemos ser tão radicais ao ponto de falar “Não Use”, acho que todas as técnicas tem suas vantagens de desvantagens e acho que os comentários condicionais são muito bem vindos sim porque não? Trabalho em dobro? Não pelo contrário praticidade e organização e maior controle do seu CSS.

    “Esta prática faz com que o desenvolvedor tenha duas versões do CSS para fazer manutenção, corrigir falhas, implementar novas mudanças etc, etc, etc.”

    Você não tem duas versões do CSS e sim um outro arquivo, uma outra camada, somente parar tratar as diferenças do IE.
    Com um segundo arquivo CSS, para o IE ele nao contem HACKS, somente diferenças como por exemplo, no Firefox podemos usar o min-height, já pro IE(6) temos que setar uma altura fixa.

    “Trabalhar com Comentários Condicionais faz com que o desenvolvimento web volte para o ano de 1997.”

    Porque estamos voltando para 1997?

    Abraços de quem também luta pelos padrões

  • Pingback: CSS Hacks ou comentários condicionais? « O Webmaster

  • Pingback: Comentários condicionais « Miltonweb’s Weblog

  • http://www.guiadopc.com.br/ Paulo Seikishi Higa

    E no código do Tableless…

    1
    <!--[if lt IE 7]&gt;-->

    O Tableless.com.br é um site bastante informativo, muita gente aprende com os posts daqui (e raramente discordo deles). Pena que às vezes se rende a “campanhas” toscas para tentar mudar o mundo.

    Abraços!

  • http://www.guiadopc.com.br/ Paulo Seikishi Higa

    PS: O comentário anterior não precisa ser aprovado. Foi apenas uma crítica direta aos posts do tipo “Não use”, como se fosse um pecado utilizar. ;)

    Abraços!

  • http://www.ronnysaran.com Ronny

    Agora que comecei a me preocupar com Webstandards e estou fazendo meus primeiros sites com o design todo separado no CSS.

    Tive um problema com design do IE 7 e resolvi pesquisar na internet sobre hacks e caí aqui.

    Desculpe a sinceridade, mas achei os comentários do post mais interessante do que o próprio post, rsrs…

    A verdade é o seguinte: Se não é certo usar comentários condicionais, por que este blog usa? (ctrl+u) rsrsr…
    Eu sei que foi usado para um Javascript, mas isso coloca abaixo sua tese que não devemos pensar em sites para dois browsers diferentes.

    De qualquer forma, o post levantou uma ótima discussão. Parabéns!

  • Felipe

    Diz isso p/ as agências, os caras são designers e não web designers, não sabem nd de estruturação html e css, colocam milhares de shadows, gradients e precisamos fazer funcionar em 4 browsers.

    Eu utilizo hacks e coments, agora qdo crio meu proprio design… 99,9% de compatibilidades e o visual não perde nd para esses designers…

    AgÊncias sucks!!!

  • Diego Oliveira

    so uma pergunta os comentarios são apenas para os IE ? O FF ja são perfeitos entao eu uso o comentario no FF para o IE ficar igual ao FF é isso ?

    E quem Utiliza “reset” não precisa utilizar nem comentarios, nem Hacks ?

    To começando agora e gostei desse topico e estou acopanhando! Quem puder me responda.

    obrigado ! abraço !

  • Pingback: Hacks CSS ou Comentários Condicionais? | WEB COM FARINHA

  • Christian

    Apoiado nas duas dicas finais (o texto todo, muito bom): código organizado e limpo é o princípio de boa sorte, não só no html e no css – em qualquer linguagem. E aos designers, está na hora destes profissionais fazerem um curso de html/css e descobrirem algumas impossibilidades.

  • Pingback: Diego M. Quinteiro – Webmaster » CSS Hacks ou comentários condicionais?

  • Ricardo Ricarte Monteiro

    Discordo totalmente do uso de hack como foi defendido no post. Trabalhar com css condicionais não é tão difícil e não gera muito trabalho extra. Se voce for organizado, pode trabalhar com mais de uma folha de estilo tranquilamente. Hacks sujam os códigos. Como é que vc valida um css cheio de hack?? Fica feio e confuso até pra outros entenderem os seus códigos. Muito ruim ler um código que tem hack….algumas vezes nem dá pra saber o que aquele código faz. O uso de classes condicionais pode ser uma boa alternativa pois não gera folha de estilo extra e nem faz uso de hacks.

  • kidjapa

    “O código deve ser tratado como o seu lar. Mantenha-o organizado e limpo e você viverá bem ali.”

    impressionante o.o”

  • Paulo

    Exite comentários condicionais para outros browsers?

  • Bruno

    Puuuufff…..

    Talvez seja porque eu esteja lendo isso 4 anos depois. Mas foi o pior artigo que eu já li.

    Diego, com todo respeito:

    Não use comentários condicionais -> Faça um design mais simples.
    Não sei se isso é preguiçoso ou burro. Mas denovo, estou lendo 4 anos depois. Só pode ser isso.

    O único motivo que eu vejo para não usar comentários condicionais é a comunidade de desenvolvedores se organizarem para acabar de vez com o IE. E que o IE se adapte a gente, não a gente ao IE.

    É só parar de fazer sites que funcionam nessa porcaria para as pessoas atualizarem os seus browsers, ou preferencialmente baixar browsers melhores.

  • Fernando

    Vlw cara, eu ja ia usar isso, você me encorajou a não usa-lo

  • Obscurun

    “Se você for designer, não faça layouts bizarros, com montes e montes de bordas arredondadas, formas que ficam sobrepostas, sombrinhas aqui e ali.” =  hahahahhaha aiai….

  • Obscurun

    Eu não quero desmerecer o Post do ilustre Diego, que escreveu muita coisa bem relevante. Mas preciso chamar atenção para dois detalhes, para quem não tem muita experiência e está procurando referências.

    Primeiro, se você está programando html, deve fazer o melhor para qualquer layout que aparecer (ponto). 

    Segundo, na grande maioria dos casos é melhor fazer uma pequena folha de estilos separada para o ie 7 e 8 (ie6 esquece!) para ajustes do que quebrar a cabeça na parede de tentar achar uma solução unica para navegadores modernos e navegadores antigos.

← Older Comments