Migrando para gráficos da Web baseados em padrões no IE10

Ao visitar qualquer site na Internet usando qualquer navegador, os usuários esperam obter experiências de qualidade semelhantes. Primeiro discutimos o compromisso do Internet Explorer de atingir a meta de se obter consistência com o princípio de "mesma marcação, mesmos resultados" em todos os navegadores em uma postagem em 16 de março de 2010, anunciando o lançamento do primeiro Platform Preview do IE9. O IE9 nos impulsionou a percorrer um grande caminho em direção a essa meta e os modos Quirks e os padrões baseados em HTML5 do IE10 completam esse trabalho em grande medida. A postagem HTML5 Parsing in IE10 relacionou alguns dos recursos herdados que foram removidos dos modos Quirks e dos padrões baseados em HTML5 do IE10.

Esta postagem expande a lista de recursos herdados removidos, incluindo mais dois: Linguagem VML e os filtros e transições baseados no DirectX. Esses dois recursos foram preteridos na documentação do MSDN a partir do IE9 (veja, por exemplo, a primeira frase de Filters and Transitions (Filtros e transições): “This topic documents a feature of Visual Filters and Transitions, which is deprecated as of Windows Internet Explorer 9” (Este tópico documenta um recurso de filtros e transições visuais, que passou a ser preterido a partir do Windows Internet Explorer 9)) e agora foram eliminados a partir dos modos Quirks e dos padrões com base em HTML5 do IE10.

Os usos comuns dos filtros VML e DX agora têm alternativas baseadas em padrões implementadas no IE10 e versões atuais de outros navegadores. Esses recursos do IE herdados do IE permanecem disponíveis no IE10 em modos de documentos, 5, 7, 8 e 9, embora seu desempenho seja inferior aos substitutos baseados em padrões e com desempenho de hardware acelerado. Incentivamos os desenvolvedores da Web a migrar seus sites para tecnologias baseadas em padrões em vez de depender em modos de documentos herdados.

Use a SVG, não a VML

A Microsoft e outras empresas apresentaram a linguagem VML para o W3C em 1998. O IE5 foi o primeiro a implementá-la. O W3C mesclou a VML com uma proposta concorrente, o que resultou na SVG. (Consulte Vector Markup Language para ler um breve histórico.)

A SVG, implementada no IE9, oferece a funcionalidade necessária para substituir a VML nos sites e aplicativos que a utilizam. O VML to SVG Migration Guide (Guia de migração da VML para SVG), publicado no Centro de Download da Microsoft oferece orientação para a migração da VML para a SVG.

A Raphaël JavaScript Library (biblioteca de JavaScript Raphaël) é uma API gráfica leve e fácil de usar que utiliza a SVG quando disponível e a VML quando não disponível. A Raphaël é uma boa opção para a criação de soluções de gráficos vetoriais que funcionam no IE8 e em navegadores novos.

Use CSS3, não os filtros DX

O Internet Explorer 4 apresentou um conjunto de transições e filtros visuais para permitir que desenvolvedores da Web apliquem efeitos estilo multimídia a suas páginas da Web. O nome filtros DX vem da implementação subjacente, DirectX e sua sintaxe longa, por exemplo, “filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50).” Os filtros DX não são iguais aos efeitos de filtros SVG, embora os dois usem o nome da propriedade CSS filter.

O mais popular desses efeitos, desde então, é o CSS3 Working Drafts ou Candidate Recommendations, incluindo opacidade, gradientes e sombras. Com o suporte do IE10 a essas especificações CSS3, os filtros herdados específicos do IE não são mais necessários. Um filtro adicional, o AlphaImageLoader, já foi popular na solução de bugs com transparência PGN no IE6, mas esses bugs foram corrigidos no IE7.

A tabela a seguir lista os filtros DX mais populares e suas alternativas baseadas em padrões.

Filtro DX	Alternativa baseada em padrões
Alpha	opacity
AlphaImageLoader	<img> ou background-image e propriedades relacionadas
Gradient	background-image: linear-gradient()
DropShadow	text-shadow ou box-shadow
Matrix	transform, transform-origin

Os efeitos de filtros SVG no IE10 podem ser usados para simular alguns dos filtros menos comuns e mais ocultos no contexto da SVG.

Observação: Como o modo de documento do IE9 dá suporte aos filtros DX e às alternativas baseadas em padrões, recomendamos evitar especificar as duas propriedades no mesmo elemento. As bibliotecas como a Modernizr facilitam o uso da detecção de recurso com CSS e evitam as declarações duplicadas.

Adote a mesma marcação agora

As alterações descritas acima entrarão em vigor a partir do Platform Preview 4 do IE10, disponível no Windows Developer Preview.

Mais do que qualquer outra versão anterior do IE, o IE10 funciona com a mesma marcação e código de outros navegadores populares (uma vez que todo prefixo específico de fornecedor da CSS é atualizado para incluir “-ms-”). Por outro lado, com a remoção desses dois recursos herdados, o conteúdo desenvolvido para o IE10 também deverá funcionar em outros navegadores.

Os usuários são beneficiados quando todos os navegadores podem funcionar com o mesmo conteúdo baseado em padrões.

—Ted Johnson, gerente de programas geral, gráficos do Internet Explorer