TiloWR » Hack

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Tilo — Thu, 03 Sep 2009 01:01:41 +0000

Que o IE6 é um lixo, todo mundo sabe, agora, o que você faz quando os browsers que você confia te deixam na mão? Pois é, na ultima semana descobrimos que FF 3.5, Safari 4 e Chrome 3 estão renderizando de forma diferente, ai o que fazer? Bem, minha sugestão era ir ao banheiro, e chorar por 2 minutos sozinho no escuro, porem hoje o Alister chegou com a solução milagrosa um JS muito simples que faz uma coisa bem bacana.

A idéia é colocar uma classe na tag com o nome do navegador utilizado, o JS dá suporte aos seguintes Browsers:

.ie – Internet Explorer (All versions)
.ie8 – Internet Explorer 8.x
.ie7 – Internet Explorer 7.x
.ie6 – Internet Explorer 6.x
.ie5 – Internet Explorer 5.x
.gecko – Mozilla, Firefox (all versions), Camino
.ff2 – Firefox 2
.ff3 – Firefox 3
.opera – Opera (All versions)
.opera8 – Opera 8.x
.opera9 – Opera 9.x
.konqueror – Konqueror
.webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome – Google Chrome

Imagina que agora na herança você tem uma classe com o nome do browser, basta agora você colocar uma classe antes do seletor que você deseja fazer o hack.

Exemplo:

 .ie  .example {
  background-color:  yellow;
  }
  .ie7  .example {
  background-color:  Orange;
  }
  .gecko  .example {
  background-color:  Gray;                              
  }
  .win.gecko  .example {
  background-color:  Red;
  }
  .linux.gecko  .example {
  background-color:  Pink;
  }
  .opera  .example {
  background-color:  Green;
  }
  .konqueror  .example {
  background-color:  Blue;
  }
  .safari  .example {
  background-color:  Black;
  }
  .chrome  .example {
  background-color:  Cyan;
  }
  .example  {
  width:  100px;
  height:  100px;
  border:  1px solid black;
}

Teste

Uma forma simples de fazer, e que evita o uso de hack’s que poluem o código, e atrapalham na validação.

Para baixar o JS
Para ver um exemplo funcionando
Para seguir o Alister no Twitter

min-height para IE6

Tilo — Thu, 14 May 2009 19:41:56 +0000

Todo Desenvolvedor Front-End já precisou de uma div com uma altura minima (min-height) mais não funcionava no lixo do IE6, pois é agente teve problema com um site de cliente que se naum tivese um minimo ele ficava muito estranho, depois de bater a cabeça na parede e tentar se jogar da janela do prédio sem sucesso , pois estavam todas trancadas depois da crise de 29 (não entendeu a piada? Ouve esse podcast!), fui obrigado a procurar uma solução, e cheguei a essa:


.alturaminima100 {
min-height: 100px;
height:auto !important;
height:100px;
}

o segredo é colocar o min-height para o Firefox e todos os outros Browsers e pro IE6 colocar as duas linhas da sequência:

height:auto !important;
height:100px;

o IE 6 vai desenhar o tamanho minimo e almentar quando receber conteudo, lembrando que sempre a melhor opção é Matar o IE6!

Hack’s, lá e de volta outra vez.

Tilo — Sat, 07 Mar 2009 18:02:51 +0000

quem desenvolve web concerteza já passou por um momento como esse ilustrado pelo nerdson, a questão é que não adianta em quanto a microsoft nào fezer com o IE o mesmo que ela faz com o MSN, a atualização Obrigatoria, nos vamos continuar a fazer Hacks pro IE6.

porem qual o hack certo para ser usado?

eu conheço algumas formas de fazer hack, e hoje vou tentar explicar como usa-los;

HTML tag:

Todas as Versões do IE

IE7 e Superior

IE7 e Anterior

esses Hack são principalmete para um conteudo que não está sendo renderisado no IE, você pode colocar uma marcação adicional para ele.

CSS Selector:

IE 7

*:first-child+html body seletor { propriedade: valor; }

IE 6

* html body seletor { propriedade: valor; }

Chrome e Safari

body:nth-of-type(1) seletor { propriedade: valor; }

Opera 9 e anteriores

html:first-child seletor { propriedade: valor; }

use essa forma apenas quando você precisa que uma determinada classe seja vista apenas pelo navegador em questão, isso ajuda muito quando você criou um hack no HTML e precisa tratar esse elemento.

TiloWR » Hack

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Leia Também:

min-height para IE6

Leia Também:

Hack’s, lá e de volta outra vez.

Leia Também: