CSS

7 dez, 2011

HTML5 e CSS3 no Internet Explorer

Publicidade

A Microsoft tem investido no HTML5 como parte estratégica dos seus produtos. No Internet Explorer isto não poderia ser diferente – desde a versão 8, o navegador já dava suporte ao recurso, sendo largamente aprimorado no IE9. A grande promessa vem no Internet Explorer 10, que virá fortemente equipado com novas adições ao suporte ao HTML5 e CSS3.

Um dos diferenciais do Internet Explorer é deixar por conta do usuário a escolha de qual versão do browser usar, diferente dos outros navegadores, que obrigam a atualização. A atualização é sempre recomendada, mas cabe ao usuário escolher quando e se deseja fazê-la.

Veja abaixo alguns recursos suportados no IE10

  • CSS3 Media Queries e Media Query Listeners

O CSS3 Media Query, recurso adicionado no IE9, possibilita que diferentes folhas de estilo sejam carregadas de acordo com a largura, altura ou orientação do navegador, desta forma, um mesmo html pode ser exibido de diferentes formas.

Agora no IE10, foram adicionados os Media Query Listeners, que permitem a execução de scripts na medida que ocorre a mudança no media query.

Clique aqui e veja na prática como este evento ocorre.

  • The Grid System

O recurso do CSS3 Grid Align foi agora incorporado no engine do IE10. Esta funcionalidade permite a diagramação baseada em linhas de grade, alinhando os elementos horizontalmente e verticalmente, subordinados ao módulo do diagrama. Veja um exemplo aqui.

  • DOM Range & Seleção

O DOM Range permite a manipulação de uma parte selecionada do documento, ou seja, a partir de uma seleção, você consegue atribuir estilos CSS, executar scripts, etc. 

Neste exemplo criado pela Microsoft, selecione um pedaço do texto dentro do quadro e em seguida clique nas opções acima, veja como acontece.

  • Tags semânticas

Prezando pela clareza e otimização do código-fonte, o recurso das tags semânticas ajuda a determinar quais são as áreas do documento html que possuem maior relevância para os mecanismos de busca. Entenda melhor com este exemplo.

Saiba mais sobre o Internet Explorer 10

Caso queira se informar mais sobre o que há de novidade no navegador e dos recursos adicionados, seguem alguns links de projetos oficiais mantidos pela Microsoft para a comunidade desenvolvedora.

  • IE Platform Preview: Faça um test drive do Internet Explorer 10 e teste os novos recursos do IE10.
  • IEBlog: Dicas e novidades relacionadas a HTML5, CSS3 e JavaScript, com suporte 100% ao Internet Explorer.
  • IE Developer Guide: Documento em constante manutenção apresentando detalhadamente as implementações HTML5 suportadas pelo IE.
  • Build My Pinned Site: Galeria de recursos pré-prontos para serem implementados no seu site

Conheça o HTML & JavaScript Center e tire o máximo de proveito nas suas aplicações!