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!
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