Blog Web Standards » internet explorer 7 http://www.webstandards.blog.br Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS em seu dia-a-dia Tue, 20 Dec 2011 19:14:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Chrome Frame http://www.webstandards.blog.br/ferramenta/google-chrome-frame/ http://www.webstandards.blog.br/ferramenta/google-chrome-frame/#comments Fri, 07 Oct 2011 14:38:44 +0000 g3 http://www.webstandards.blog.br/?p=404 Artigos relacionados:
  1. Hack para Safari e Google Chrome Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Documento base para HTML5 Aqueles que acompanham o Blog Web Standards, sabem que já...
  3. Como testar o site no IE6, IE7 e IE8? Quer saber alguma maneira de testar seu site no Internet...
]]> 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.

Mais sobre Chrome Frame:

Artigos relacionados:
  1. Hack para Safari e Google Chrome Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Documento base para HTML5 Aqueles que acompanham o Blog Web Standards, sabem que já...
  3. Como testar o site no IE6, IE7 e IE8? Quer saber alguma maneira de testar seu site no Internet...
]]> http://www.webstandards.blog.br/ferramenta/google-chrome-frame/feed/ 8 Cantos arredondados no Internet Explorer (sem imagens) http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/ http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/#comments Tue, 09 Feb 2010 00:19:05 +0000 Carlitos http://www.webstandards.blog.br/?p=201 Artigos relacionados:
  1. Conditional comments para Internet Explorer Uma boa maneira de fugirmos dos hacks é usar os...
  2. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
  3. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> 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).

Explicação

Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
</head>
...

Agora para colocarmos canto arredondado em algum elemento siga o exemplo.

Coloque dentro da tag body uma div:

...
<body>
  <div>Meu exemplo de canto arredondado</div>
</body>
...

Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
  <script type="text/javascript">
    DD_roundies.addRule('div', '10px', true);
  </script>

  <style type="text/css">
    div { border: 1px solid red; }
  </style>
</head>
...

Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:

...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...

ou assim, com cantos diferentes:

...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...

Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.

Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!

O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.

O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.

Artigos relacionados:
  1. Conditional comments para Internet Explorer Uma boa maneira de fugirmos dos hacks é usar os...
  2. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
  3. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/feed/ 34 Como testar o site no IE6, IE7 e IE8? http://www.webstandards.blog.br/web-standards/como-testar-o-site-no-ie6-ie7-e-ie8/ http://www.webstandards.blog.br/web-standards/como-testar-o-site-no-ie6-ie7-e-ie8/#comments Thu, 19 Mar 2009 18:13:29 +0000 Carlitos http://www.webstandards.blog.br/?p=121 Artigos relacionados:
  1. Cantos arredondados no Internet Explorer (sem imagens) Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Quebra de layout no email marketing IE6 e IE7 Como corrigir problemas de quebra de linha de layout em...
  3. Como inserir vídeos do YouTube em seu site com XHTML válido Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> 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.

Artigos relacionados:
  1. Cantos arredondados no Internet Explorer (sem imagens) Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Quebra de layout no email marketing IE6 e IE7 Como corrigir problemas de quebra de linha de layout em...
  3. Como inserir vídeos do YouTube em seu site com XHTML válido Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> http://www.webstandards.blog.br/web-standards/como-testar-o-site-no-ie6-ie7-e-ie8/feed/ 15 Conditional comments para Internet Explorer http://www.webstandards.blog.br/hacks/conditional-comments-para-internet-explorer/ http://www.webstandards.blog.br/hacks/conditional-comments-para-internet-explorer/#comments Tue, 17 Feb 2009 13:31:26 +0000 Carlitos http://www.webstandards.blog.br/?p=72 Artigos relacionados:
  1. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Cantos arredondados no Internet Explorer (sem imagens) Em desuso. Esse código está ultrapassado em nosso padrão, então...
  3. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
]]> 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]-->
Artigos relacionados:
  1. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
  2. Cantos arredondados no Internet Explorer (sem imagens) Em desuso. Esse código está ultrapassado em nosso padrão, então...
  3. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
]]> http://www.webstandards.blog.br/hacks/conditional-comments-para-internet-explorer/feed/ 3