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

IEBlog Português

Blog da equipe de engenharia do Windows Internet Explorer

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

  • Comments 0

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 DXAlternativa 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

  • Loading...