Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

07 2011 outubro

Google Chrome Frame

Autor: g3 em Ferramenta

Última modificação: 13 junho 2012

Chrome Frame

O Google Chrome Frame possui uma proposta de simplesmente “substituir” o motor de renderização do Internet Explorer, habilitando praticamente todos os recursos que estariam disponíveis no navegador Google Chrome.

É como um Plugin que pode ser instalado mesmo por usuários que não possuam permissões de Administrador no Sistema Operacional, funcionando de forma oculta sem mudar a forma de navegar que o usuário já esta acostumado.

Disponível somente para Internet Explorer a partir da versão 6 em Windows a partir da versão XP.

Implementando Chrome Frame

Para ativar o Chrome Frame ao renderizar uma página basta incluir a meta abaixo dentro da tag head.

  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />

Além do código para ativar o Chrome Frame incluímos a informação para forçar o Internet Explorer a renderizar com a sua última versão (IE=Edge).

Incluíndo aviso de instalação

Coloque o código abaixo antes de fechar a tag body.

<!--[if lt IE 8]>
  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
  <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->

Definimos com conditional comments que ao carregar a página, será apresentado o aviso de instalação apenas aos usuários de Internet Explorer 7 e versões anteriores.

Veja nosso Documento base para HTML, nele utilizamos esse recurso. Devido a mensagem default de instalação do Chrome Frame ser muito invasiva, fizemos uma versão customizada. Faça download do Framework padrão e teste o código em versão inferior ao Internet Explorer 7 para visualizar a nossa customizacao.

Mais sobre Chrome Frame:

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.

O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).
Continuar lendo…

Quer saber alguma maneira de testar seu site no Internet Explorer 6, 7 e 8?

A melhor opção que encontramos atualmente é o IETester, aplicativo que já utilizamos há algum tempo. Seu maior trunfo é a opção de abrir todas estas versões do IE, cada uma em uma aba distinta, deixando seu trabalho de revisão muito mais fácil. O único porém é que você precisa do IE7 original para que funcione corretamente no programa.

Além desta opção temos o Multiple IE, que oferece um instalador para cada versão do Internet Explorer, ferramenta que também já foi muito utilizada em nossa equipe.

Além dessas opções, há alguns sites que geram imagens da sua página, uma para cada browser. O melhor exemplo é o Browsershots, mas é uma opção que não se compara aos softwares citados anteriormente.

Para finalizar, outra opção promissora é o Xenocode Browser Sandbox, que permite visualizar o site em diversos browsers, não se prendendo somente ao IE. Na teoria é algo muito bonito, mas na prática se mostrou bem lento… Talvez com o tempo o serviço melhore e mostre mais viável para o trabalho do dia-a-dia.

17 2009 fevereiro

Hack para Internet Explorer 6

Autor: Carlitos em CSS, Hacks

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Já que estamos entrando no mundo “obscuro” dos hacks, iremos comentar sobre o caso específico do IE6, o qual temos que passar tantas vezes!

Ao adicionar esta linha em seu CSS, ela será interpretada somente pelo IE6:

* html { propriedade: valor; }

Particularmente preferimos adotar essa prática ao invés de um conditional comment para o IE6, para evitar de termos diversos CSS específicos para cada navegador. Portanto só usamos o CSS para IE7 caso seja extremamente necessário.

Além do mais, este hack é válido ao contrário de outras opções que encontramos em outros exemplos.

* Update: Classe no html. Como usamos html5, colocamos na tag html por conditional comments uma classe relativa ao navegador Internet Explorer.

Última modificação: 31 maio 2011

Uma boa maneira de fugirmos dos hacks é usar os conditional comments.

Por padrão, utilizamos este para o Internet Explorer 7, para evitarmos utilizar hack específico para este navegador:

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->

Se quisermos fazer um CSS específico para o IE6, basta trocar o conditional comment:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/estilo_ie7.css" media="screen" /><![endif]-->

Caso queira algum outro tipo específico, segue abaixo uma listagem de várias possibilidades:

<!--[if IE]>
De acordo com o conditional comment, este código é para  Internet Explorer
<![endif]-->
<!--[if IE 5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
De acordo com o conditional comment, este código é para  Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
De acordo com o conditional comment, este código é para  Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
De acordo com o conditional comment, este código é para  Internet Explorer 5 e mais novos
<![endif]-->
<!--[if lt IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer mais antigo que 6
<![endif]-->
<!--[if lte IE 5.5]>
De acordo com o conditional comment, este código é para  Internet Explorer mais antigo ou igual a 5.5
<![endif]-->
<!--[if gt IE 6]>
De acordo com o conditional comment, este código é para  Internet Explorer mais novo que 6
<![endif]-->

Uma das diversas limitações apresentadas pelo IE6 está relacionada ao uso de pseudo-classes. Uma delas é a “:hover” que só pode ser usada em links.

Porém, em alguns casos, precisamos dela para fazer determinados efeitos ou funcionalidades do site, como menus dropdown.

Para poder aplicar a pseudo-classe “:hover”, “:active” ou “:focus” em qualquer elemento no IE6, você deve:

– Baixar o arquivo .htc neste link;
– Inserir o código abaixo em seu CSS, utilizando o caminho do arquivo .htc relativo ao HTML:

body { behavior: url(css/csshover2.htc); } /* inclui efeito :hover, :active e :focus para Internet Explorer 6 */

29 2009 janeiro

Max e min width no IE 6

Autor: Carlitos em CSS, Hacks

Última modificação: 18 fevereiro 2009

Sabemos que o Internet Explorer 6 tem limitações em diversas propriedades do CSS 2.
Supondo que a largura mínima seja 333px, use a regra abaixo:

* html elemento { width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); } /* seta a min-width para o IE */

Agora, se a largura máxima seja 777px, use:

* html elemento { width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); }/* seta a max-width para o IE */

Última modificação: 25 agosto 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Procurando alguma boa solução para aplicação de transparência alpha do PNG no Internet Explorer 6?

Diversas soluções já foram apresentadas, desde um script que necessitava de um GIF transparente de 1×1 pixel e era aplicável somente às imagens em tags <img>, além de utilizar a propriedade filter direto no CSS, o que costumamos utilizar, pois temos total controle sobre a aplicação da funcionalidade no IE 6.

Porém, tanto esse script como a aplicação direta no CSS usavam o mesmo recurso (AlphaImageLoader Filter) para simular a transparência no Internet Explorer. Então ambos os casos apresentavam as mesmas limitações.

No caso de elementos que necessitavam de um background com o PNG, não poderíamos usar background-position, background-repeat, etc.; recursos fundamentais para aplicação de fundos via CSS, pois neste caso não se trata de um fundo propriamente dito, pois o IE não o interpreta dessa forma.

Então apresentamos a vocês o DD_belatedPNG, a solução definitiva para uso de PNG 24 bits no Internet Explorer 6!

Para utilizá-lo é bastante simples: basta baixar o script (procure mantê-lo atualizado) e usar a classe “.png_bg” (ou qualquer nome que você definir em seu código) nos elementos nos quais o PNG deve ser utilizado.

O ponto mais interessante é que, além da fácil aplicação dessa solução, o script usa outro método para simular a transparência alpha, ao contrário de tudo o que vinha sendo visto até hoje. Desta forma, poderemos utilizar background-position, background-repeat, cliques em links, elementos de formulário, etc., algo impossível de ser feito no Internet Explorer 6 até então.

Exemplo de aplicação

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* Nomeando a classe que definirá quais elementos terão a correção para PNG */
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Como vocês podem ver a aplicação é bem simples, mas caso haja alguma dúvida é só comentar 🙂

Update: Download atualizado para a versão 0.8a do script.