CSS Hacks para IE, Firefox, Opera, Safari, Konqueror
Postado por: Pedro Rogério emPodem haver momentos no desenvolvimento web que você necessitará fazer o uso de hacks CSS devido a inconsistência que ocorre entre os browsers, pois existem browsers que insistem ainda em não seguir corretamente os padrões web(leia-se IE). Mas nessas situações vocÊ não será discriminado se fizer o uso de Hacks CSS, para os leigos, uma forma de escrever CSS para que só certos browsers entendam aquela regra definida e os outros a ignorem.
Existem Hacks CSS para todos os browsers, conheça os mais utilizados na lista abaixo:
Internet Explorer 5 e 5.5:
voice-family: "\"}\""; voice-family:inherit;
Para o IE 5 e 5.5 basta adicionar as regras acimas ao seletor desejado.
Internet Explorer 6 e anteriores:
* html {}
Internet Explorer 7:
* + html/*/ * /**/ body {}
Internet Explorer 7 e versões superiores:
*:first-child+html {}
Internet Explorer 7 e browsers modernos:
html>body
Todos os browsers modernos exceto IE7 e anteriores:
html>/**/body {}
Internet Explorer 8:
head/*/+body/**/ {}
Somente Browsers modernos excluíndo todas as versões do Internet Explorer:
html>/*/*/body {}
Para Opera 9.2x e anteriores (até a versão 7.2x):
html:first-child {}
Para Safari 2, 3 e Konqueror (CSS3 válido):
html[xmlns*=""] body:last-child {}
Para Safari 3 e outros browsers baseados em Webkit (CSS3 válido):
body:not(:root:root) {}
Para Opera 9.5, Safari 3 e Konqueror 3.5.x:
body:only-of-type {}
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.
Eu só conhecia os do IE, foram os únicos que eu precisei.
Hoje em dia uso mais detecção server-side do UA (e mando um css diferente para os IEs), ou quando isto não é possível ou é overkill uso comentários condicionais.
Você que compilou esta lista ou achou ela em algum lugar?
@Thiago,
Essa lista de hacks eu já tenho salva praticamente desde quando comecei a trabalhar com desenvolvimento web, a cada hack novo descoberto eu adiciono a minha lista, e hoje resolvi divulgá-la.
Essa lista vale ouro então, obrigado por publicar!
Otimo Trabalho!
be entertained
Putz, muito bom esse artigo. Uma vez precisei fazer hacks pro safari e sofri um pouqinho…
Muito boa a lista, mas vale a pena dar uma olhada no que o Thiago Cavalcanti falow! Eh melhor fazer com comentarios condicionais ou server-side, pois a maioria dos hacks não são autenticados pela W3C como css válido no “web standards”, mas isso é uma convenção… Eles funfam e jah usei bastante! KKK
Mt boa materia… vlw!
Poxa mto útil essa lista…
Mas me diz uma coisa…para passar na validação do W3C..existe algum hack para isso???
Valeu esse blog é referência pra mim!!!
@Fricks,
Não, basta você escrever suas regras CSS corretamente que com ceretza seu arquivo CSS será validado. Caso ocorra algum erro, é só verificar a linha indicada pelo validador e consertar o mesmo.
Putzzzzz so não vou faze uma tatuagem com essa lista pq não curto tatuagem… mas tem que se fazer backup dessa joia em varios lugares isso vale muito!!! Pedro valeu de mais meu camarada.
caras, usar hacks é coisa de amador me desculpem, basta fazer o css e o html corretamente, que nao tem galho, os navegares geram diferenças pq algum ignoram o erro enquanto outros nao ai q a coisa encrespa
@lex,
Fato: a interpretação e a consequente renderização de páginas escritas com XHTML 1.0 e CSS 2.1 válidos é (dentro de certos limites) padronizada nos seguintes navegadores recentes: FF2+, SF3+, OP7.2+, KQ3.5+, IE8 e GC.
Fato: mesmo neste seleto grupo ainda há diferenças de renderização provenientes dos estilos base padrões de cada navegador (o W3C faz recomendações nessa área, não define padrões).
Fato: é raro haver banda disponível para se utilizar de um CSS reset somente para contornar as diferenças entre os estilos base.
Fato: muitos usuários ainda usam navegadores como o IE6 e o 7 que falham em renderizar código válido da forma correta. O IE6, por exemplo, é sofrível nesta área e o IE7 é mais ou menos (o IE8 está quase lá).
Fato: num ambiente de produção, nem sempre há tempo para desenvolver código 100% válido e, as vezes, existem fatores externos que impedem esta meta de ser alcançada.
Fato: sabendo-se dos fatos anteriores e sendo _realmente_ um profissional, chega-se rapidamente a conclusão de que esta lista do Pedro Rogério é realmente muito útil, especialmente quando não for possível utilizar os métodos alternativos que eu sugeri no primeiro comentário deste post.
Fato: antes de chamar profissionais de amadores você deveria estudar o assunto (umas aulas de gramática e ortografia também viriam a calhar).
Olá,
Preciso de uma ajuda urgente.
Não consigo fazer um site funcionar corretamente ao mesmo tempo no Internet Explorer, Firefox e Opera.
Acessem esta página em cada navegador e comprovem: http://www.empresasvalesinos.com/provisorio.htm
Vejam principalmente o final da página. No Internet Explorer tudo bem. Mas o Firefox e o Opera mudam a aparência da página. Utilizei apenas CSS para estilizar a página.
Além disso, no Explorer e no Firefox a página fica centralizada, que é como quero, mas no Opera ela fica à esquerda.
O que fazer para que a página apareça no Firexox e Opera assim como aparece no Explorer? O problema é do código CSS ou do navegador?
Muito obrigado.
Recentemente encontrei uma nova falha que sua origem infelizmente para mim ate então é desconhecida pois em um caso que aconteceu eram dois codigos iquals mas que acabavam interpretando de forma diferente.
Referene ao que Davi disse, tente aplicar text-align center no body e partir de um div que abraça todo conteúdo aplique text-align a esquerda.
Site ficara centralizado. bom, esta é a solução para IE deve funcionar no Opera.
Pedro, parabéns pelo artigo. Nota 10!
Dica: Para melhorar ainda mais esse post, você poderia fazer outro post exemplificando o uso dos harcks.
Abraços.
Boa tarde, muito bom essas informações para aqueles que não sabem ainda, eu mesmo ja sofri muito com CSS ^^ graças que hoje eu mudei de design pra programador não preciso perder meus cabelos tentando fazer o site ser navegavem em todos os navegadores.
So precisamos realçar duas coisas para a galera.
1º Como os navegadores Safari e Chrome usam a mesma engine ou pelo menos a google tentou copiar o safari hehe.. sendo assim se vc usar um hack para arrumar um erro de layout do Chrome, automaticamente o Safari também vai mudar, e pior eles não mudam de forma identica uma vez que ambos navegadores apesar da mesma engine eles eles interpreta o codigo “diferente”.
2º Opera.. tal do navegador lazarento eu comparo ele com IE6 na boa.. dizem que é o navegador muito rápido.. até pode ser uma vez que ele armazena tudo em cache (até hj não consigo limpar cache do opera) e le apartir do cache.. exemplo do que quero dizer. Um dia tive a seguinte situação, eu alterava o css do nav. opera e nada de mudar o layout então resolvi fazer teste.. apaguei o arq. css do site e atualizei a pagina.. adivinha o que aconteceu? nada… ele tava usando o arquivo CSS em cache.. então tomem cuidado, se vc alterar e não ver diferença não é problema no seu hack e sim no navegador.
Apesar que usar hacks eu não sou muito a favor, acho errado. conheço duas soluções na qual eu uso nos meus desenvolvimentos.
1º vc criar uma função php que identifica o navegador e retorna um CSS especifico para aquele navegador. (Sim isso da trabalho, pois vc tera varios arquivos CSS, mas isso é nada mais nada menos que um ctrl+c e ctrl+v e mudar so o q precisa)
2º vc criar um CSS Global, e através da mesma função que eu uso para identificar o navegador e incluir o arquivo css, eu faço da mesma forma so que neste arquivo vai existir somente as correções para cada navegador, isso faz com que vc consiga fixar somente o que precisa, gerando assim arquivos menores = menas banda = custo menor
=)
bom é isso ae galera!
Parabéns, Pedro Rogério.
legal, mas como eu aplico isso no site? haeuiaheuih
Ñ entendi uma coisa :S
Tipo, esses hacks servem praq? Sei q os hacks servem pra fazer algo q ñ funciona no navegador… Por exemplo, centralizar imagem verticalmente…
E esses postados servem praq? RS
Abraços
Anderson, server para fixar erros em navegadores.
Você mesmo respondeu sua propria pergunta hehe..
Mas so para tentar ajudar.
Graças a deus hoje em dia esta historia esta mudando, mesmo que devagar, os navegadores estão adotando um padrão, com isso esta ficando um pouco mais facil nossa vida de CSS.
Mas ate que este dia chegue, os navegadores atuais interpretam seu codigo do jeito que eles querem, por isso você precisa usar os hacks para deixar apresentavel em todos os navegadores.
Exemplo figurativo:
Você tem um link, e quer substituir este link por uma imagem, você vai no CSS e faz tudo certinho, abre o firefox e la esta um link representado por uma imagem.. ai você abre o IE e começa chorar, porque ..beleza, a imagem ta aqui, mas porque o nome desse texto não sumiu.. Agora temos uma diferença, e é preciso passar uma nova instrução para IE, dizendo, cara tira este texto daqui. Você pega sua versão do IE, ve no post inicial qual codigo é o hack para sua versão, e coloca no seu CSS! Vuala! Fico bonitinho denovo ^^
Basicamente é isso =)
Então, sobre essa parte de usar o hack pra concerta um erro eu entendi. Oq ñ entendi foi: O hack do IE 7 é este:
“* + html/*/ * /**/ body {}”
Qr dizer q se eu usar somente este hack, da pra concertar vários erros do IE?
Pq antes eu achava q éra um hack pra cada erro, mas qr dizer q é um só hack pra inúmeros erros, certo?
Quem implementa certo não precisa de hacks.
Falo tudo.
Nossa,esse site tem me tirado de apuros.Estou começando agora e de vez em quando surge o desespero…Obrigada
Favoritado!
Todos os comentários estão de parabens. São todos muito bem explicados e de uma boa experiencia em web. Tem pouco tempo de estudo da mateira, e já estou passando por esses problemas de incompatibilidade entre os navegadores. Espero que um dia este sofrimento acabe para todos.
sou leigo em programação web, mas pelo que entendi, esse negócio de programação para sites me parece bem complicado . Pelo que já vi de sites que não abrem direito nesse ou naquele navegador não tá no gibi. pode fazer a experiência, quero ver qum consegue abrir a “conectividade social” da caixa econômica fora do IE 6. Não tem como e nem eles dão o suporte direito. Sites em flash são os únicos que abrem mais corretos, mas também não funcionam no iMac por que eu já testei.
esse link é bem legal:
http://rguilemond.wordpress.com/2011/02/09/qual-o-seu-navegador-preferido/
mostra bem a dificuldade dos programadores web. esse papo de que “quem faz direito” a coisa funciona, nem mecânico de avião que dizer que conserta carro direito. fala sério. me diz onde está a regra que funciona???
Desculpe a ignorancia, mais aproveitando para aprender, vc poderia me explicar pra q serve os hacks e quando e como usalos?
Obrigado
Olá,
Sou nova no mundo de desenvolvimento de sites, e estou com dificuldades para meu site funcionar em IE e Safari.
Os CSS Hacks apresentados acima, onde eu coloco exatamente? na página do HTML ou junto com o CSS??
Valeu!
Luana, coloque tudo dentro do seu arquivo CSS.
Boa tarde pessoal alguem poderia me ajudar estou fazendo uma página estou encontrando problemas com IE esta dando bugs nos links tipo no “a:link” eu defino a propriedade cor com um valor e no IE onde eu coloco um link inclusive nas imagens ou botoes elas ficam circuladas pela cor q defini o certo seria pegar cor somente para as letras. se alguem poder ajudar fico grato.
Nem sei como agradecer
Vai salvar a vida de muitas pessoas, assim como salvou a minha
alguem tem algum hack para Opera que naum altere o Firefox
testei estes mas alteraram !
mandem no meu email POR FAVOOOORRR
verdadeirojhoy@yahoo.com.br
Oiiii!!
Ando enfrentando diversos problemas com essa distonia entre navegaores…
Encopntrei uma forma muito mais interessante de resolver o problema, da uma olhada:
http://forum.pplware.com/showthread.php?tid=5394
Meu professor passou um trabalho sobre a diferença entre browsers e hacks,será que alguem poderia me ajudar?!
Cara, seguinte, estou tendo um pequeno problema..
Tô querendo dá um Float:left; em uma
… porém só consigo que ele fique no IE. nos outros não consigo.. Como uso esse Hack para todos os outros navegadores?
tô usando Position absolute… pois quero colocar meu menu em cima de uma imagem.
vlw.
Amigo, estou com um problema em um modelo de site que baixei na internet, na hora de visualizar no IE8 e Crome, fica todo doido. li sobre esses hacks e gostaria de saber em qual arquivo colocar e em qual linha de comando dos códigos, minha pagina usa: jquery, css e Javascript. Posso ate pagar para quem resolver e mim ensinar a resolver meu problema
Na minha opinião a micrsoft ja devia ter desabilitado as versões anterios a 8, pois são umas verdadeiras buchas de canhão.
Olá a todos. Recentemente venho tendo problemas com a visualização de um site no IE7, IE8, IE9. No site que fiz as imagens que constam em alguns conteúdos aparecem com bordas laranjadas, mas não existem estas bordas. No Firefox 7 e no Google Chrome, o site está OK! Portanto, gostaria de pedir ajuda a galera deste site, que por sinal achei mto interessante, COMO FAÇO PARA CONTORNAR ESTA SITUAÇÃO?
Desde já agradeço pela ajuda!!!
Nosso site: http://www.laab.ufpa.br
Pessoal, vocês sabem se existe algum hack somente para o IE8?