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.
84 Comentários
Helinton 18/12/2007 às 12:04
Diego este post é ótimo. É duro ter de trabalhar em dois css ao mesmo tempo um para o firefox e outro para o ie. Gostararía de desenvolver sem me preocupar com compatibilidade entre browsers. Tenho certeza de que este não é um sonho só meu.
Um abraço
Marcus VBP 18/12/2007 às 12:08
Diego, não concordo totalmente com você.
Você está certo, se seu código estiver certinho, você usará muito pouco CSS Hacks. Mas ainda assim, usar comentários condicionais é muito mais prático para mim.
Você falou motivos para usar CSS Hacks, mas qual o real motivo para não usar comentários condicionais? Eles atrapalham na versão mobile do Internet Explorer, é isso?
Gustavo 18/12/2007 às 12:16
Concordo com o que você falou. No meu caso específico, não tive muitos problemas com isso pois sempre que precisei, fiz uso dos CSS Hacks e não dos comentários condicionais, muitas vezes inspirado por tutoriais que li aqui mesmo, no Tableless. Você pode agora, aproveitando seu gancho dos CSS Hacks, mostrar exemplos de problemas e suas soluções usando ora um, ora outro e porque. Acho um assunto interessante para um artigo.
Daniel Ribeiro 18/12/2007 às 12:18
Diego, não sou expert mas desde o ie7 foi dito que ele não aceita hacks pelo fato de a maior parte dos problemas terem sido resolvidos, mas e os que não foram?! não uso hacks, e crio uma pagina só com as excessões ou talvez até um pedaço de código na própria página sendo englobado pelo comentário condicional.
E penso que assim será bem mais fácil quando o os browsers entrarem no eixo e precisar fazer reparos, claro que isso depende da complexidade do layout e da interatividade aplicada, mas no momento não vejo outra forma melhor!
no hacks!
Abraços.
Alexandre 18/12/2007 às 12:50
Comentários condicionais tendem para o problema de versões separadas. CSS Hacks tendem para o problema de instabilidade e imprevisibilidade do código. Não sei qual deles é pior.
Eu particularmente prefiro os comentários condicionais. Dessa forma posso concentrar tudo que dá problema em uma versão específica do IE em apenas uma folha de estilo, ao invés de ter que ficar caçando código pelas outras folhas atrás de bugs.
Com comentários condicionais eu posso, por exemplo, usar o filtro alpha que simula opacidade no IE, aplicar behaviors para o pseudo-seletor :hover em todos os elementos da página, usar css expressions para simular min-height e min-width. Tudo isso validando e sem medo de problemas de compatibilidade. Eu sinceramente prefiro isso do que adicionar divs e spans sem necessidade pra alimentar hacks famintos.
Marcus VBP 18/12/2007 às 12:57
Exatamente Alexandre.
Roberto Longhi 18/12/2007 às 13:06
Se eu vou ter que usar Hacks, prefiro fazer isso em um arquivo separado e interpretado somente pelo IE. Assim se der algum problema eu simplismente altero o arquivo css com os Hacks.
Eu também não entendi o porque não utilizar o conditional …
[]‘s
Rochester 18/12/2007 às 13:20
Concordo com o Alexandre.
A questao agora é TOTALMENTE diferente de 1997. Naquela época eram dois sites MESMO, aqui se vc fizer bem feito será um arquivo com 10 linhas, apenas para efeitos e coisas que o IE ignora.
Marcelo 18/12/2007 às 13:48
Também não vejo problema algum em comentários condicionais!
Não existe duas versões de layout neste caso.. mas sim duas folhas de estilo separadas! pq no css principal, vc tem o layout todo, no outro apenas as gambiarras para arrumar o IE. Se alterar um, vai ter que alterar o outro de qualquer maneira. Isso acontece para o CSS Hacks Tb, Se vc alterar alguma coisa, vai ter que alterar o Hack tb… A diferênça é que o Hack está na linha de baixo, e não em outro arquivo! só isso!
Caio 18/12/2007 às 13:59
Diego, nesse caso eu não concordo com você.
Em um site bem feito, o uso de css exclusivo para o ie6 ou o ie7 é mínimo, e que no meu ponto de vista, deixa o código mais organizado e limpo.
Se o css exclusivo para o ie6 já tem mais de 80-100 linhas, algo foi feito errado no css normal!
Guido 18/12/2007 às 14:01
Concordo com o Alexandre, é bem mais fácil usar os comentários condicionais do que colocar hacks no css principal.
Diego Eis 18/12/2007 às 14:12
Para que ter um arquivo com 10 linhas? Só para causar problemas por causa dessas 10 linhas?
A idéia é não manter mais de um código diferente. É você fazer apenas uma versão do site para os browsers em vez de ficar se perdendo e fazendo uma versão para cada browser.
Esse pensamento de fazer duas versões de CSS é coisa do passado. Pensamento antigo que deixa mais complicado o trabalho.
Rubens Cavalheiro 18/12/2007 às 14:13
Tudo isso, porque ainda existe IE 6.0 que concentra 50% (ou mais) do tempo de desenvolvimento de qualquer aplicação web cross-browser, em pensar que no Google Analytics mostra usuários com IE 4.01 (quem usa isso ainda – esse é Guerreiro).
Eu uso Comentários Condicionais, fica tudo num lugar, simples prático com o IE merece… heeheh
@Alexandre: compartilho da mesma idéia.
VitorGGA 18/12/2007 às 14:38
O complicado disso tudo é fazer um código válido. Tow começando a achar q essa parada de código válido pelo W3C é coisa pra mestres jedi.
Joaquim Oliveira 18/12/2007 às 14:50
Diêgo, sou assinante do feed e estou sempre por aqui, achei o tópico bastante interessante, mas discordo da afirmação: “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.”.
Sou adepto dos Web Standarts eles são o presente e o futuro do desenvolvimento web. Existem N vantagens em se trabalhar com os mesmos, mas não concordo com o fato de pensarmos que o futuro é uma intenet feia, quadrada. Admiro bastante o design clean, bons layouts com apenas uma boa combinação de cores e formas quadradas, ângulos retos, inclusive tento implementar bastante dessa forma.
No entanto, existem diversas situação em que se faz necessário o uso da extravagância, abuso de cores e formas, sombras, degrades, e não vejo pq não se implementar isso com as CSS. Não acho que tenhamos estudado tanto, aprendido tanto, evoluído tanto para chegarmos a uma internet quadrada.
Uma grande referencia no desenvolvimento baseado nos Web Wtandarts o Maujor nos diz o seguinte “Uma tecnologia nova (como CSS) deve permitir a criação de algo melhor, sem perda da qualidade de design das construções antigas baseadas em tabelas e imagens.”.
Abraços
Nil Tojal 18/12/2007 às 16:06
Eu vou com o Joaquim Oliveira, o que mais me trouxe para o uso de Tableless é que é possível fazer um site bacana com um visual inovador e ao mesmo tempo limpo e usual para todos, eu não sou um WebDesign que ja chegou a ponto de fazer layout maravilhosos mas estou estudando e batalhando para isso sei que chegarei la ainda, e não quero pensar que não possa fazer qualquer layout usando css e fazer dela usal e atual….
Agora sobre o fato de vc apoiar de não usar o comentarios condicionais tb sou a favor, pq usar eles é dar ainda razões para que o pessoal que desenvolve o IE mantem nessa linha de projeto por muito tempo, o que temos mesmo é valorizar os browsers webstandart (firefox e outros )e fazer css mais voltados para ele, e uma campanha para que o usuarios passem a usar esses browsers colocando anuncios nos proprios sites pode ser uma idea (Ex vc não esta vendo este site direito? então é melhor mudar de Browser) …
droga me empolguei de novo….
ate mais..
Nil Tojal 18/12/2007 às 16:08
Ah Diego uma coisa vc podia colocar aqui um Feed para os comentarios ou quem sabe uma maneira de sermos avisados que mais alguem comentou este post para que essa discussão não morra aqui….
Ate mais
Carlos Eduardo 18/12/2007 às 16:17
Concordo com o ponto de vista do post.
Só que acabo por utilizar comentários condicionais para o IE7 e, no caso do IE6, utilizo os “hacks”.
Rafael Oliveira 18/12/2007 às 16:30
Eu também partilho da visão do Alexandre. É muito mais fácil você saber onde estão os problemas, tê-los em um canto separado para que você possa atualizá-los conforme a sua necessidade, do que ter que vasculhar seu CSS atrás de hacks e mais hacks.
Não vejo como manter seus problemas focados seja um pensamento do passado. Aliás, tenho a visão oposta.
Mas, isto é uma visão pessoal, cada um finaliza seus layouts da maneira que acha melhor.
Rafael 18/12/2007 às 18:08
“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.”
Resumindo, vc sugere que se limite a criatividade do layout para manter o código limpo… rs….
Lamentável…
Rafael Marin 18/12/2007 às 19:25
Depende bastante Diego.
Os arquivos CSS que uso nos conditional comments dificilmente tem mais de 10 linhas. Nem todo o CSS precisa ser reescrito pra que os bugs sejam corrigidos. Nos CSS’s dos conditional comments eu corrijo apenas o que for necessário, colocando !important no fim de cada propriedade pra que ela tenha efeito no IE e no IE7.
Claro, nem sempre são necessários, mas quando são, não é preciso reescrever todo o CSS.
;D
Diego Bittencourt Muniz 18/12/2007 às 19:50
Olha, nesse ponto eu concordo com Diego Eis. Não aparecem problemas de compatibilidade no IE com taaaaanta freqüência assim, a ponto de ter outro CSS, e sempre consigo contornar os erros, as vezes até modificando uma parte. Sim, eu penso em outro modo de fazê-lo ao invés de tentar gambiarras no IE, e acho que até certo ponto é bom você primeiro pensar em outras idéias.
Jader Rubini 18/12/2007 às 20:09
O pior é quando não é você quem cria os layouts, e o desgner cisma de fazer layout com o máximo de firulas possíveis (e impossíveis também), como esse layout.
Mas mesmo layouts desse tipo (acredite, eu já codifiquei piores) eu consigo fazer praticamente sem usar hacks.
Felipe Elia 18/12/2007 às 21:08
Discordo do post.
O uso de comentários condicionais é indispensável, por exemplo, para o uso de PNG no IE 6.
E ainda: a idéia de que vc vai ter que fazer a mesma alteração no CSS duas vezes não é real, afinal a segunda é apenas um complemento da primeira e não uma cópia completa.
Mesmo assim acho que devemos expor nossos pontos de vista e assim aprendermos cada vez mais!
Abs!
KveRa 18/12/2007 às 21:16
É Diego, esse esquentou……
Sou um desenvolvedor, e me considero até pouco esperiente (em DESIGN WEB), porém, já que resolvi aprender optei por aprender do jeito certo. Já tem um bom tempo que acompanhos os posts do Tableless, no site ou via RSS e eu concordo com o Diego, até certo ponto.
Um código bem escrito, limpo e simples (não precisa ser quadrado pra ser “simples”…) gera poucos problemas de compatibilidade, e
acho que realmente o uso dos Condicionais é
um certo regresso, porém, não sou fã dos HACKS, afinal, onde estão os WEB Standards..?
Mais não vejo tanto problema assim no uso de 2 arquivos CSS, afinal, na web também pode se aplicar os conceitos de modularização, ou não ?
E afinal estamos falando de “Cascading” Style Sheets…
Rodrigo 18/12/2007 às 22:29
Olá Diego, no meu caso, inventei um solução diferente! peguei a idéia do CSS Browser Selector do Rafael Lima que é feito em javascript, o que na minha opinião não é bom porque se a pessoa desabilitar o Javascript nao adianta de nada! Então fiz uma versão em PHP que coloca uma classe na tag body de acordo com o navegador da pessoa.
body {
background:#fff;
}
body.ie {
background:#000;
}
no caso, o código acima eu usaria se quisesse background preto em qualquer versão do ie e nos outros navegadores background branco!
Rubens Ayres 19/12/2007 às 09:21
Faço o contrário: geralmente desenvolvo pensando no IE (já que é – e será por ainda muito tempo – o browser da MAIORIA dos usuários) e no Firefox. Ou então – raramente – utilizo algum script pra detecção de browser.
O que acontecer no resto dos browsers é lucro.
Jonathan 19/12/2007 às 09:57
Não gosto de comentarios condicionais também, mas eles tem seus usos, exemplo daquele bug -tosco- do IE 6 com os comentarios, http://www.positioniseverything.net/explorer/dup-characters.html
.
Acho que a critica aqui foi mesmo a pratica de separa duas folhas de estilo com os comentarios condicionais…
essa semana no PositionisEverything saiu um artigo sobre como usar comentaros condicionais sem usar dois csses.
Izac 19/12/2007 às 10:02
Tento usar o mínimo possível os hacks de CSS, mas, às vezes, é necessário, talvez por causa de prazos ou por não achar uma solução. Comentários condicionais não uso jamais.
Agora hacks de Javascript sempre uso não tem como.
Henrique Zap Pimentel 19/12/2007 às 10:02
Ah o velho dilema …
eu peguei um bocado dessa fase de splash screens, seletores manuais, seletores com JS e uma infinidade de bugigangas para contornar as questões de compatibilidade.
Normalmente um layout mais simples e bem estruturado realmente dispensa o uso desses trique-triques, mas sempre tem uma coisinha ali ou aqui que precisa de um ajuste mais fino.
Eu ate uso os hacks mas eu já optei por uma solução interessante:
Faço um CSS genérico que contemple a grande parte do layout e depois uso um css condicional para apenas as partes específicas do IE.
A manutenção não fica muito complexa, mas o ideal seria mesmo não precisar de nada.
oh grandes fabricantes de browsers, padronizem seus produtos, peloamordedeusetodasasentidadescabalisticaseonipresentesdouniverso.
:O
Alexandre 19/12/2007 às 10:50
O Felipe Elia solucionou o problema com a filosofia natural do CSS:
Folhas de estilo são aplicadas em camadas que se sobrepõe (o famosíssimo efeito cascata). Uma folha de estilos só para o IE não é versão, é apenas uma camada extra.
O correto é separar a camada de apresentação (CSS Puro) da camada de tratamento de erros (hacks para IE). Mesclar dois objetivos distintos em apenas uma parte da aplicação é teoricamente errado.
Daniel Luz 19/12/2007 às 13:39
Concordando com Felipe Elia e Alexandre, por que usar condicionais implica em duas versões? O fim é o mesmo, apenas trocando gambiarras que podem quebrar completamente com lançamentos futuros do IE (lembre-se do lançamento do IE7, quando foi necessário procurar novos hacks… o que significa possivelmente ter de correr atrás de todos os seus estilos, identificando os hacks e os substituindo) por um arquivo adicional.
Maurivan Luiz 19/12/2007 às 14:17
Galera, bora parar de utilizar o desen para publicar links de comentários ? (:
Não é nada bacana ficar navegando em links para ler comentários, sendo que estamos a menos de 10 metros (: – Além do mais ao invés de responder o e-mail com o link, porque não responder com o ponto de vista de cada?. Mais interessante!
[]‘s
Maurivan Luiz
Rodrigo Souza 19/12/2007 às 15:29
É, realmente é um saco ter que fazer folhas de estilos diferentes por causa dos browsers, eu não faço, é mais trabalhoso mas no final fica mais bem mais fácil de fazer manutenção.
Abraços
Marcio Toledo 19/12/2007 às 21:36
Diego, leio o Tableless e diversos outros sites a um bom tempo.. acredito que quase 3 anos.
E acho que é a primeira vez que discordo de um artigo.
Bom na minha opinião e forma de trabalho (entenda-se por forma de codificar) a separação é muito importante, estruturo e codifico o site todo e ele funciona perfeitamente em firefox, safari e quase perfeitamente no IE7, já no IE6 alguns probleminhas de sempre e o principal que é a utilização de PNG, para isso uma linha no html e mais umas 3 no css e um .htc resolvem o meu problema.
Se eu tivesse que colocar um hackzinho dentro de um css de 150 linhas, por mais que tivesse comentado, isso sim seria sujo.
De qualquer forma estamos tendo que criar solucões por incapacidade das empresas e organizações seguirem padrões então a melhor opção é facilitar nossa vida.
Já pensei em dar um basta para o IE6, só que tive a infelicidade de chegar no cliente para apresentar o projeto e adivinha o que ele tinha?
Fica minha opinião registrada.
Para ilustrar, fica um link de um projeto bem pequeno que desenvolvi recentemente:
http://www.ativainternacional.com.br/
Atenciosamente,
Marcio Toledo.
Breno 20/12/2007 às 09:48
Realmente os Conditional Comments dão muito trabalho. Porém também sabemos que é muuuito difícil construir um site que se comporte nos principais browsers sem ter nenhum problema. Na dúvida também acho melhor usar um ou outro css hack e mais nada….
Bruno Francisco Santos 20/12/2007 às 10:02
segundo a notícia que eu li em um blog da info, a microsoft está preparando o IE 8 para nao ter incompatilibidades com os outros navegadores:
“Wilson também falou em melhor suporte ao padrão Cascading Style Sheet (CSS) 2.1 e em mudanças no modelo de objetos para melhorar a compatibilidade com outros navegadores. A lista inclui, ainda, novas APIs para JavaScript assíncrono e XML. Outra alteração mencionada por Wilson seria os desenvolvedores de sites passarem a optar entre seguir os padrões próprios do IE ou os padrões abertos oficiais. Algum comando no código da página passaria essa informação ao navegador.”
mais informações pra quem quiser continuar lendo:
http://info.abril.com.br/blog/mauricio/20071219_listar.shtml
abraços
Mateus 20/12/2007 às 16:40
eu sou a favor de fazer um CSS pro ie, dar um display none pra tudo, e mandar o usuário baixar o FF hehehehehe…
Jorge Epuñan 20/12/2007 às 16:41
Construir um site grande totalmente compativel com todos os browsers nao eh coisa de engenheiro da NASA, sinao de tecnica, pratica e conhecimentos profundos das capacidades dos browsers. Pela minha experiencia, a receita para um ‘One True Layout’ eh:
1. um bom CSS Resetter
2. um markup HTML limpo, organizado e semantico
3. estilos css’s adequados para ese markup.
Eh certo que IE6 e IE7 sao uma bosta, mais pode-se lidar com a maioria de seus defeitos com tecnicas simples de CSS (por exemplo, o min-height, duplo margin no float-margin e height: 100% do IE6). E tudo isso sem hacks ou conditional comments. Muita pratica e estudo faz um bom profissional.
pd. Nao concordo com o post…. no ultimo caso conditional comments eh a melhor soluçao.
Erik 20/12/2007 às 20:14
Estou com saudades dos tempos em que o Tableless trazia posts mais interessantes. Hoje em dia quando leio os feeds me vem uma sensação de déjà-vú.
Fora isso o layout da home ficou muito bonito. Parabéns!
Marcos Watanabe 21/12/2007 às 22:36
Olha, só reforçando o que já disseram: Este problema só vai acabar quando a Microsoft lembrar que os padrões são do mercado, não da sua área de marketing …
Junio Vitorino 22/12/2007 às 12:02
Eu acho um pouco estranho, a algum tempo atrás vários blogs conhecidos no brasil sobre padrões, evangelizaram os desenvolvedores a utilizar o conditional comments como saida para seus projetos não quebrarem no IE7 e etc. Estranho agora esse tipo de posição. Mas tudo bem, a quem pense que hacks é melhor, a quem pense que CC é uma dádiva, fazer o que.
Thiago Breda 23/12/2007 às 13:02
Nossa… O Carlos Eduardo chutou o balde! “Utilizo comentarios condicionais para o IE7, e para o IE6 fico com hacks mesmo…”…..rsrs, de maneira simples e sem nenhum “artifício técnico” hoje é possivel desenvolver um site que rode em IE6, IE7 e FF, sem maiores complicações, basta o mínimo de estudo, não precisa ser nenhuma lenda viva para conseguir isto. Abraço a todos!
Leandro 24/12/2007 às 14:10
Eu discordo completamente do seu artigo Diego. Eu não acredito, como voce, que usar hacks dentro do css seja melhor que usar um arquivo separado para resolver problemas que apenas um navegador, ou ainda, uma versão de um navegador apresenta. Usei conditional comments no último site que fiz pq acredito que manter o código limpo, dentro de um padrão é muito mais interessante do que ter linhas com barras e asteriscos. Também discordo de dizer que a culpa é do designer. Acredito que codificar é uma parte importante do processo e que o designer pode participar, dando alguma liberdade pra quem codifica fazer adaptações e mudanças no layout. Particularmente, não vejo problema em criar um arquivo separado já que o seu código está mais limpo e correto possível. Qual o problema de criar um arquivo com 1 linha que seja??
Sinceramente, acho que um artigo que ajudasse a resolver algum problema seria mais interessante do que ficar discutindo qual das duas soluções é a melhor, pois acho que as duas atendem muito bem e é uma questão de postura de quem codifica utilizar uma ou outra.
Marcus Vinicius Bastos Leandro 26/12/2007 às 15:06
Eu discordo em partes.
Concordo que manter um código limpo, bem organizado e sem muitas firulas facilitam em 90% a compatibilidade do mesmo em vários navegadores.
Discordo com o fato de não usar os condicionais, porque eles ajudam a manter o código o bem organizado. Não vivemos num mundo onde todos os browsers implementam corretamente os padrões web e temos que encarar essa dura realidade, embora com muita revolta, sobretudo contra o IE, mas é uma verdade.
Sem contar que comentários condicionais validam código, e css hacks, na maioria das vezes não.
Bem, é isso aí!
Para finalizar gostaria de parabenizar pelo novo layout! Ficou show!
–
Abraços,
Marcus Vinicius Bastos Leandro
http://www.prosadigital.com/
Micox 27/12/2007 às 10:50
Concordo. Finalmente alguém (e vários outros nos comments) que percebe que com comentários condicionais teremos que manter 2 arquivos CSS.
Deixar as mesmas estilizaçõe no mesmo arquivo, além de ser mais lógico é mais prático.
Imagine que eu tenha que estilizar posições de uma div. Pra que deixar isto em 2 arquivos diferentes??
Parabéns cara. Tomara que esta mentalidade se espalhe.
Sobre CSS Hacks « leoguime 27/12/2007 às 13:51
[...] e realmente acredito ser a melhor maneira de se solucionar esse tipo de problema, apesar de um renomado blog brasileiro que trata de padrões web publicar um artigo recomendando a não utilização dessa solução pelos [...]
Marcelo Iepsen 28/12/2007 às 10:40
Concordo com o Alexandre e o Joaquim.
Não concordo em manter os hacks na mesma folha de estilo. Em primeiro porque me foco em validar o html, segundo que não vejo porque não separar o css que define a estrutura das exceções. Devemos escrever códigos semânticos, assim evitaremos hacks e nos casos inevitáveis, escrevemos em um estilo a parte.
Sobre o design, acredito que existam casos em que podemos limitar a criação, como em layouts de mailmarketing. Mas em geral, não devemos limitar e sim procurar a solução para resolver os problemas que podemos encontrar em um layout complexo.
Claudia Regina 31/12/2007 às 12:32
Nossa, quanta oposição hein… rs…
Acho também que em um layout bem feito é muito difícil encontrar motivos para usar hacks ou “comentários condicionais”.
Se houver muita necessidade é melhor usar um hack se for algo simples (um site com uma folha de estilos pequena)… se o site for mais complexo voto nos CCs, pela própria organização.
E quanto aos designers que fazem layouts cheios de firulas, concordo em partes… rs… sou designer e já faço o layout pensando em como aquele site vai ser cortado e “css-zado” (até porque eu faço essa parte também…).
Mas poxa, implicar com umas sombrinhas ou cantos arredondados? rs… acho super-possível fazer um site nos webstandards com criatividade quase ilimitada (quase porque ninguém faz milagre, também… rs…)
Abraços!
Jeison Frasson 31/12/2007 às 22:38
Bom eu concordo com o Diego, sem dúvidas que trabalhar com mais de um arquivo para fazer a mesma coisa é perca de tempo
Porem usar hacks acho que ainda não é a melhor solução, pois esses mesmos não são validados pelos padrões da w3c, se esses fossem eu estaria feliz da vida XD
Diego Teixeira 01/01/2008 às 21:40
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
Sadjow 02/01/2008 às 00:35
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.
Rodrigo P. Ghedin 03/01/2008 às 14:15
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 03/01/2008 às 17:39
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 05/01/2008 às 18:11
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 07/01/2008 às 16:08
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
Tiago Colucci 07/01/2008 às 17:51
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 08/01/2008 às 10:40
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! ^^
Juliano Moreira 09/01/2008 às 00:53
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.
Lua 09/01/2008 às 21:47
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”.
Ralph Almeida 10/01/2008 às 17:07
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 11/01/2008 às 10:22
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 30/01/2008 às 17:23
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 30/01/2008 às 17:44
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 01/02/2008 às 04:28
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.
joao 07/02/2008 às 14:06
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 20/02/2008 às 01:40
“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 28/02/2008 às 18:06
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!!
Diego Couto 29/02/2008 às 04:31
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 03/03/2008 às 02:47
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 15/03/2008 às 11:59
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.
Matheus de Oliveira 04/04/2008 às 18:06
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 05/06/2008 às 12:13
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
CSS Hacks ou comentários condicionais? « O Webmaster 29/06/2008 às 09:47
[...] Hacks ou comentários condicionais? Meu chará Diego Eis escreveu um interessante artigo já há alguns meses em seu famoso blog do site Tableless, o qual recomendava o não uso de [...]
Comentários condicionais « Miltonweb’s Weblog 28/08/2008 às 15:14
[...] site tableless apresenta um ponto de vista contrário ao uso dos Comentários Condicionais. Antigamente, por [...]
Paulo Seikishi Higa 10/11/2008 às 20:14
E no código do Tableless…
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!
Paulo Seikishi Higa 10/11/2008 às 20:21
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!
Ronny 20/11/2008 às 18:31
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 09/04/2009 às 14:35
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 07/05/2009 às 11:09
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 !
Hacks CSS ou Comentários Condicionais? | WEB COM FARINHA 07/06/2009 às 12:37
[...] [...]A utilização de comentários condicionais não é uma excelente maneira de contornar bugs [...] Esta prática faz com que o desenvolvedor tenha duas versões do CSS para fazer manutenção, corrigir falhas, implementar novas mudança [...]http://www.tableless.com.br/comentarios-condicionais-nao-use [...]
Christian 04/01/2010 às 08:43
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.
Diego M. Quinteiro – Webmaster » CSS Hacks ou comentários condicionais? 28/01/2010 às 21:30
[...] Hacks ou comentários condicionais? Jun 29th 08 2 comments Meu xará Diego Eis escreveu um interessante artigo já há alguns meses em seu famoso blog do site Tableless, o qual recomendava o não uso de [...]
Ricardo Ricarte Monteiro 18/06/2010 às 12:29
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.