Tableless - Desenvolvimento inteligente com Padrões Web

02/05/2007
Tecnologia e Tendências

CSSHack para IE7, IE 6 e browsers de verdade

Um aluno estava tendo um problema de compatibilidade: o layout funcionava em Firefox e IE6, mas quebrava em IE7. Para resolver, ele utilizou aquele hack do * (asterísco) no começo da propriedade. O problema é que este csshack do asterísco …

Por

Um aluno estava tendo um problema de compatibilidade: o layout funcionava em Firefox e IE6, mas quebrava em IE7. Para resolver, ele utilizou aquele hack do * (asterísco) no começo da propriedade. O problema é que este csshack do asterísco também funciona no IE6. Se ele arrumasse o IE7, o IE6 que quebrava por causa do hack. Isso é fácil de resolver, veja o código:

1
2
3
4
5
6
7
8
#conteudo{
float:right;
width:517px;
vertical-align: top;
margin-right:10px; /* Todo mundo entende */
*margin-right:15px; /* IE6 e IE7 entendem */
_margin-right:10px; /* IE6 entende */
}

Primeiro você usa a linha de código normal. Esta linha todos os browsers entendem.
Depois, logo abaixo, você coloca o csshack do asterísco, que funcionará em IE6 e IE7.
Para forçar o IE6 a ter o valor correto, você usa o csshack do ‘underline’ no começo da propriedade. Como essa linha está vindo logo após do hack do asterísco, o valor do IE6 vai ser sobreescrito.

Horrível né? Paciência.

Fiz uma busca rápida para ver se encontrava outra solução, mas achei este site com a mesma solução acima.

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

  • http://www.needforlumbriga.com Camilo

    Ou usar comentários condicionais né?

  • Ian Liu

    Concordo com o Camilo, os comentarios estao ai para serem usados, de maneira semantica…

  • http://futuroprofessor.com.br André

    Concordo com o Camilo… também acho que o uso de Conditional Comments deixaria mais clara e mais decente essa solução.

  • Franklin

    E ae Diego, sou eu novamentee… então cara, só uma sugestão: o anuncio do google está sobre o div amarelo q está listando o código!!!

    abraços
    Franklin Javier
    Guarujá/SP

  • http://www.tecnocracia.com.br Manoel Netto

    Quando fiz o re-align no design do Tecnocracia, baseei-me inicialmente no Firefox. Depois testei no IE6 e IE7 e o layout quebrou nos dois (muito mais no 6).

    Verifiquei item por item e fui adicionando atributos no estilo original, de forma que precisasse do mínimo de hacks possível. O resultado é que consegui com comentários condicionais, atender só ao IE6 e suas especificidades, com poucas linhas de CSS.

    Os IE tem uma característica chata. Se você definir, por exemplo, posicionamento absoluto e o valor para top (sem definir o valor de left), o layout detona, mesmo que você defina margens de acordo. O FF aceita como “inherit” o valor não definido, já o IE reclama ;-)

    Abraço

  • http://www.zhp.com.br Henrique Pimentel

    Hacks com o IF IE são realmente mais “corretos”, porem em algumas ferramentas mais fechadas não tem como se aplicar isso, pois a chamada do CSS esta dentro do sistema e algumas dificuldades extras impedem, por exemplo de chamar um novo CSS ou de colocar as coisas corretamente.
    Seria legal se existisse um seletor, como o @media: print, mas para browsers, na verdade melhor seria ainda se todos os browsers tivessem o mesmo comportamento e renderização.

  • http://www.wde.com.br/bike/passeios.htm Wlad

    horrível é pouco..

    e é necessária muita paciência…

  • Speakersk8

    Bom…tenho visto ao longo das notícias e comentários contidos aqui, que todos comentam sobre o não funcionamento do _(underline) no IE7. Queria dizer que tenho desenvolvido sites e o IE7 aceita esse hack sem problemas. Estou postando por que estou realmente surpreso ao ver os comentários, e queria saber se sou o único a conseguir o uso desse hack no IE7.
    Viva ao Firefox, viva ao Open source!!!

  • http://julioweb.wordpress.com Julio Fragoso

    concordo com o que disseram comentários condicionais…

    e realmente é preciso paciência demais

  • http://www.cristiantrentin.com.br Cristia Trentin

    Que são horriveis isso é verdade.., mas necessários…

  • http://willgm.com William Grasel Martins

    Nos post anterior falando sobre CSSHacks aqui no Tableless eu escrevi em um comentário um exemplo de “comentários condicionais” e vários links sobre o assunto! Ao que parece o Diego Eis esta ignorando ou ainda não entendeu a única coisa que a microsoft fez de util no seu browser!

    Pela ultima vez, esqueça tudo que aprendeu até hj de CSSHacks para IE e leia:

    http://www.maujor.com/tutorial/condcom.php

  • http://sapiensdc.com.br Luiz Gustavo Aleagi Nunes

    Olá à todos,

    Eu gostaria de saber o que vocês acham de usar mais de um CSS, ou seja, um para cada tipo de navegador. Algo do tipo: css.css para navegadores descentes, e todos os hacks ficariam assim: css_ie6.css e css_ie7.css.

    A seleção seria assim:

    Dentro desses CSSs alternativos iriam apenas os hacks para cada um dos navegadores.

    Dessa maneira, evita-se a utilização dos hacks direto no CSS e têm-se, sempre que possível, um CSS validado.

    A pergunta é: Qual é o melhor e “menos errado” método de se controlar isso.

    Vale à penas sujar o CSS por conta dos navegadores maravilhosos da MS?

    Abração!

  • http://sapiensdc.com.br Luiz Gustavo Aleagi Nunes

    Faltou o código que entra no header. conta do filtro HTML! Sorry!

    1
    2
    3
    4
    5
    <!--[if IE 6]&gt;-->



    <!--[if IE 7]&gt;-->
  • http://www.antenando.com.br Rael B. Riolino

    Olha a situação que o IE nos coloca: ter que fazer hack do hack…. se o IE fosse um browser descente nem precisaria de hacks

  • http://www.ferrari.eti.br Carlos André Ferrari

    é soh criar o arquivo ie_hacks.css e incluir com comentário condicional logo após o css principal

    1
    2
    3
    4
    #conteudo{
    *margin-right:15px; /* IE6 e IE7 entendem */
    _margin-right:10px; /* IE6 entende */
    }

    []‘s

  • http://www.web2ponto0.com.br Inside

    Acho que comentário condicional tira uma das vantagens do tableless:
    “Você terá um a única versão do site funcionando em qualquer navegador”

    Nunca usei, e pretendo nunca usar, mas respeito a preferência dos demais

    []‘s

  • http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

    Assim funciona só no IE7:

    *+html{}

  • Rafael Baialuna

    Dá-lhe Microsoft, que ao invés de diminuir, aumentou nossa dor de cabeça ¬¬

  • http://www.cristiantrentin.com.br Cristia Trentin

    Eu prefiro usar CSS separadas.. para os navegadores.. isso é errado???

  • http://webbemfeita.com Rochester
    1
    2
    3
    4
    5
    6
    7
    8
    #conteudo{
    _margin-right:10px; /* IE6 entende */
    }

    body &gt; #conteudo {
    margin-right:10px; /* Todo mundo entende */
    *margin-right:15px; /* só IE7 entende */
    }

    pelo menos sá uma separa a mais =D

  • http://www.patriciagil.orgfree.com Patricia Gil

    Muito, muitoo bom isso! ^^

  • http://sapiensdc.com.br Luiz Gustavo Aleagi Nunes

    Olá Cristia,

    Era essa mesmo a minha pergunta, mas parece que ninguém respondeu! @:D

    Abraços,

  • Ian Liu

    “Certo é o que funciona” – diz o meu professor de Kung Fu!

    Más as vezes existem várias maneiras que funcionam, cabe a você escolher uma…

    Eu acho que os comentários condicionais são a melhor saída, uma vez que um comentário não deveria ser interpretado pelo browser. Como o IE possui uma sintaxe que ele (e somente ele) entende, acho que é uma maneira “mais semântica” do que ficar colocando lixo no CSS…

  • Felipe Vaskoncelos

    Eu ainda prefiro usar o condional comments, pq do jeito q a microsoft eh doida…eh bem capaz q numa atualizacao eles removam esse suporte aos hacks como * e _ e kem tah usando vai ter q aderir aos conditional comments…=/

    Irresistivel…www.ie7.com

  • http://blog.ciin.com.br Daniel Accorsil

    Está virando um transtorno implementar em CSS, tá dando medo! me preocupo em resolver mais incompatibilidades do que o próprio desenvolvimento em si.

    Ninguém vê isso??? cade os padroes????

  • Matheus de Oliveira

    Gente, também tô meio encucado com isso, mas me atento a dois pontos:

    1º – E a validade do CSS pela w3c, ignora ou não?
    2º – Como já comentado acima, será que não usar CSSs para Navegadores de verdade e CSS para ieca não seria uma boa opção, pra quem usa PHP fica fácil fazer isso, é só identificar o browser…

    Enfim, acho ainda que a melhor opção é tentar fugir ao máximo de CSSHacks e Comentários Condicionais, eu pelo menos faço de tudo para não usá-los, e a única coisa que uso hoje em dia para diferenciá-los, é o também famoso, mas pelo jeito esquecido aqui, !important, que funfa em qualquer “browser de verdade”, menos no ieca (tá aí, não sei se funfa no IE7)

    vlw

  • http://jio.jspump.org Jio

    Cara o código fica horrível… E eu tenho muita mania de código organizado…
    Funcionando ou não, nunca usei hacks…

    Acredita que eu consegui fazer meu “site” rodar perfeitamente no FF e IE6 sem nenhum hack? o.o
    Imagino que no IE7 esteja ok também…

  • http://www.corporacaoweb.com Fill

    Acho que esta solução chega a ser meio obvia.

  • Paulo

    E Dalhe briguinha de browser!!
    Programador visual ou não sempre teve e sempre tará essa briga, graças a Deus eu trabalho entre outras coisas com sistemas voltados apra Web e praticamente imploro para meus clientes usarem o IE para nao ter que escrever 1000 linhas a mais de codigo só para ficar coparando IE e FF, o FF tem muitas limitações por incrivel que pareça e a maioria são com relação a JavaScript, ja melhorou bem, mas tem coisas bobas que eles esquecem, versão após versão.
    IE na cabeça e FF como opção!! Adoro os 2 mas nao tiro o IE nem a pau!!
    Quantos de vc´s leram pelo menos 20% das paginas do W3C sobre CSS e HTML? Leiam e parem de criticar tanto o IE como o FF, padrao nenhum deles segue, a prova disso são os HACKS FF -moz da vida que vivem aparecendo e SÓ FUNCIONAM NO FF.

  • Rafael Mendes

    huahuahuauhua… Esse Ieca eh brincadeira mesmo!!!

  • Marcos

    ae Galera,

    1 – Será que a intenção da MS não é essa mesmo de dificultar a vida dos desenvolvedores ?, afinal o IEK é o browser mais utilizado no mundo.

    2 – Tenho uma sugestão: colocar em todos os nossos trabalhos sempre na página inicial um aviso para os usuários, por exemplo:

    [Este site é melhor visualizado no Firefox]

    é uma das muitas formas de ganharmos mais usuários pro Firefox e também podemos trabalhar mais dentro dos PADRÕES da W3C, assim os usuários que utilizam o IEK percebendo que há algo errado no site, terão a opção de instalar o Firefox e assim talvez mudar essa triste realidade sobre o IKE.

    Entendo que simplesmente lamentarmos a SACANAGEM da MS, não nos leva a lugar algum, por isso sugiro que façamos algo mais concreto do que simplesmente reclamar.

    Abraço a todos.

  • Pingback: » O Internet Explorer é muito chato! naVeia!

  • Pingback: Tweets that mention CSSHack para IE7, IE 6 e browsers de verdade | Tableless - Desenvolvimento com Padrões Web -- Topsy.com