Elementos do HTML5 funcionando no IE (6, 7, 8)

Aproveitando o tempo entre uma demana e outra comecei a estudar mais HTML 5 e a fazer uns testes de código, afinal ler não basta – pra ser ninja tem que aprender fazendo.

Um problema do uso das novas tags no Internet Explorer: como as tags "não existem" para o IE ele não permite que você estilize elas, o que impossibilitaria o uso correto de alguns elementos semânticos do HTML, afinal colocar um <article> e ter que usar uma <div> dentro para estilizar não faz sentido nenhum e suja o código sem necessidade.

Este seria um impedimento para passar a utilizar HTML 5 nos site se não fosse um work-arround que "força" o Internet Explorer a reconhecer estes novos elementos, assim eles passam a ser estilizados por qualquer CSS que você tenha atribuído a eles.

A gambiarra para que tudo fique ok é utilizar o javascript para criar estes elementos no seu documento, uma vez que eles tenham sido criados pelo javascript eles existem no seu DOM – e passam a ser estilizados.

Estilizando HTML 5 no Internet Explorer

Insira o código abaixo no <head> da sua página e toda a estilização dos elementos da lista abaixo deverá funcionar:

<!--[if IE]>
<script type="text/javascript">
document.createElement("article");
document.createElement("nav");
document.createElement("section");
document.createElement("header");
document.createElement("aside");
document.createElement("figure");
document.createElement("legend");
document.createElement("footer");
</script>
<![endif] -->

 

Pronto, agora você já pode adaptar seus htmls utilizando as novas tags do html5 sem nenhum "prejuízo" para o tempo de desenvolvimento, melhorando a semântica do seu código.

Com o HTML alterado é só mudar o CSS e começar para aplicar as classes e estilos nos novos elementos. Recomendo que você leia sobre CSS Orientado a Objetos – apesar do nome polêmico a apresentação de slides mostra uma metodologia bacana que ajuda a economizar código e facilita bastante alterações no CSS.

Acredito que em breve isso será importante para os buscadores, que possivelmente irão "ler" melhor o conteúdo da internet devido a esta segmentação e descrição mais detalhada de cada parte do conteúdo.

Dúvidas, críticas e sugestões nos comentários! 🙂

Position absolute e conteúdo dinâmico (Ajax)

Esses dias tava com dando problema de posicionamento em um HTML no trabalho.

Uma div estava com posicionamento errado no Internet Explorer (6 e 7) e curiosamente isto só acontecia em uma das páginas, nas outras com html semelhante (e esta mesma div) o erro não acontecia.

O @tivasconcelos me alertou que aquele elemento tinha o position setado como absolute, estudando um pouco o html e js vi que o problema acontecia quando alguns elementos da página eram redimensionados devido ao carregamento de html com ajax.

O problema

No Internet Explorer o posicição quando é absoluta é calculada logo depois que a página é carregada e não é mais atualizada automaticamente.

Se algum elemento tiver as dimensões alteradas (normal quando o conteúdo é carregado dinamicamente por ajax) o elemento com posição absoluta vai ficar lá, estático.

A solução

Sabendo do que causa o problema a solução é simples: atualizar a posição do elemento.

Não é necessário calcular, basta setar novamente a posição como absoluta cada vez que as dimensões de algum elemento da página (que pode influenciar no posicionamento do elemento em questão) for alterado.

Segue o código em jQuery para a solução:

$(".posicao-absoluta").css({position:"absolute"});

 

No meu caso no success do carregamento em ajax eu adicionei esta linha, forçando o reposicionamento no IE.

Dúvidas, angústias, críticas e sugestões nos comentários. 😀

Internet Explorer 8 – beta 2

E foi lançado o beta 2 do Internet Explorer 8 (faça aqui o download).

Além de estar bem mais bonito e fácil de usar, a grande diferença para quem trabalha com web é o suporte dado pelo browser aos padrões web (webstandards) – a Microsoft já tinha feito um bom avanço no IE7, quando comparado ao IE8; mas parece que agora essa preocupação ficou mais forte (será que  apelo da comunidade ajudou nisso?). Inclusive muitas coisas da especificação 3 do CSS estão sendo implementadas (veja aqui a lista de novidades em termos de CSS no IE8).
Okey, muitas coisas desse IE8 não são novidades para quem usa Firefox ou Opera, por exemplo, como um DOM Inspector ou melhor debugger de javascript (coisa que o Firebug faz no FF), a opção de desativar o CSS ou, ainda, um campo para buscar em diferentes serviços (Live Search, Google, Yahoo, etc…) e suporte a microformats (IE´s Web Slices).

 

A cara nova do IE8:


Campo de sugestão de busca


Seleção de compatibilidade (onde você pode ver as páginas rendereizadas em versões antigas do IE)


Bookmarks

 

Vale a pena falar que há uma mudança grande na parte de privacidade: existe uma funcionalidade nova, chamada de private browsing, onde o usuário pode incapacitar o browser de acessar dados (como o histórico, dados de formulário, arquivos temporários, etc…). Com um clique apenas, você pode definir que um site específico não deve ter seus dados gravados, evitando qualquer referência a ele no seu histórico.

Sugiro esse post aqui, bem completinho, sobre as funcionalidades do IE8.

[update]Nesse post aqui no Webinsider, fala-se sobre o impacto do private browsing em termos de métricas[/update]

Como rodar versões diferentes do IE – para Windows, Mac e Linux

Uma das maiores dificuldades para quem desenvolve interfaces – ou seja, escreve html/CSS e programa com javascript – é conseguir testar tudo em diferentes browsers. Todos sabemos que seguir os padrões não é suficiente; se preocupar em seguir o DOM não isentará o projeto de erros (e muito mais).
E uma dos maiores complicadores é quando você quer testar algo em versões diferentes do Internet Explorer, que é ainda o browser mais usado (como falei nesse post). Nativamente, não é possível rodar versões diferentes no IE no Windows. Quanto menos rodar algum IE no Mac ou num Linux.
Mas, existem algumas formas de se fazer isso, ajudando nosso trabalho:

 

IE3, IE4, IE5, IE5.5, IE6 no Windows (MultipleIEs)

Permite você instalar todas as versões da 3 até a 6, e rodar ao mesmo tempo. Baixe aqui.
Você pode baixar aqui a versão 7 para usar com o MUltipleIEs.

 

IE5, IE5.5, IE6 no Mac – ies4osx

A maneira mais produtiva seria instalando o Parallel ou uma VMWare, mas esses são aplicativos pagos. De graça, o ies4osx permite você instalar todas as versões da 3 até a 6, e rodar ao mesmo tempo. Veja aqui como fazer download, instalar e configurar

 

IE5, IE5.5, IE6 no Linux – ies4linux

Semelhante ao ies4osx, aqui você pode baixar um instalador das versões 5, 5.5 e 6 do IE para o Linux e ver como configurar.

Para o Linux, existe ainda a possiblidade de você usar uma VMWare e instalar versões do Windows. Uma VMWare te dá, resumidamente, a possibilidade de rodar instâncias de outros sistemas operacionais numa máquina virtual dentro de outro SO. Atualmente, eu tenho usado essa aqui, rodando o Windows XO dentro do Ubuntu 8.04, e funciona que é uma beleza.

Como instalar o IE6 e o IE7 no mesmo computador

Em tempos de Firefox 3 saindo, Internet Explorer 8 em testes e navegadores pipocando em diversos usuários não tem saída: nós, desenvolvedores, precisamos de meia dúzia de browsers instalados na nossa máquina.

Quando eu estava testando o Windows Vista tentei sem sucesso instalar o IE6 e IE7 juntos nele. Migrei novamente para o XP e resolvi instalar o IE7 para facilitar o teste de alguns projetos, mas queria manter o I6 também para testar. Googleando por aí econtrei esse artigo na Web Livre, então vamos a solução.

Para instalar o IE6 e IE7 na mesma máquina é simples: o MultipleIE é um software que permite a instalação de diversas versões do IE no mesmo computador.

Vamos aos passos

1- Instale o IE7

2- Faça o download do MultipleIE (clique aqui para baixar) e instale-o no seu computador.

3- Selecione as versões do Internet Explorer que deseja instalar

Testei apenas o IE6 e IE7 no Windows XP e funcionou que é uma beleza. Agora é IE6, IE7 e FF aberto, testando cada alteração de CSS. Ontem baixei e instalei também o Safari, então estou trabalhando agora com 4 navegadores para testar cada alteração, para completar a coleção dos navegadores mais usados será bom o Opera…

Espero ter ajudado, por aqui esse programinha foi uma ajuda enorme, já que antes eu tinha que testar em outra máquina e isso atrasava muito o desenvolvimento, deixava para depois e aí quando ia testar tinha uma dezena de "fixes" para fazer nos CSS… 😉