Blog Web Standards

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

Ferramenta

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:

Pensando em deixar o desenvolvimento de códigos mais prático, publicamos nosso Repositório de Snippets, lugar onde colocaremos trechos de código modulares que usamos comumente em nossos projetos.

Obviamente deixamos aberto a todos e, por isso, deixamos espaço aberto a sugestões, tanto para melhoria dos códigos, como outros snippets a serem implementados.

Além disso, disponibilizamos o download dos snippets em formato de Clips para o editor Coda (Mac OS), assim os códigos podem ser utilizados de maneira mais prática!

Última modificação: 31 maio 2011

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

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

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.