Skip to main content

Internet Explorer 9 - Guia para Desenvolvedores

14 de março de 2011

O Guia para Desenvolvedores do Internet Explorer 9 fornece uma visão dos recursos e melhorias no Internet Explorer 9. Ao usar este guia, os designers e desenvolvedores da Web podem se preparar para aproveitar integralmente essas melhorias. Os desenvolvedores também pode testar a plataforma em ação usando o Test Drive do Internet Explorer.

Conteúdo

Introdução

Desempenho geral do navegador

Suporte aos padrões da Web para a mesma marcação

Novos recursos gráficos exploram tudo o que é oferecido pelos PCs com Windows

Lista de novos recursos

Interoperabilidade aprimorada por meio do Suporte a Padrões

Folhas de Estilos em Cascata, Nível 3 (CSS3)

Transformações CSS3 2D

Módulo Planos de fundo e bordas de CSS3

Módulo Cor de CSS3

Módulo Fontes de CSS3

Módulo Consultas de mídia de CSS3

Módulo Namespaces de CSS3

Módulo Valores e unidades de CSS3

Seletores de CSS3

Recursos adicionais de CSS

Módulo Exibição do CSSOM

URI de dados

Melhorias do Document Object Model

Introdução ao DOM aprimorado

Análise e serialização de XML para e do DOM

Níveis 2 e 3 do DOM (Document Object Model)

Núcleo (L2 e L3) e exibições (L2) do DOM

Passagem de elemento do DOM

Eventos de L2 e L3 do DOM

HTML de L2 do DOM

Estilo de L2 do DOM

Passagem e intervalo de L2 do DOM

Tratamento de espaço em branco do DOM

ECMAScript 5

HTML5

Localização geográfica HTML5

Elementos vídeo e áudio do HTML5

Elemento tela do HTML5

Melhorias de análise do HTML

APIs de seleção do HTML5

Elementos semânticos do HTML5

Perfis de cor do ICC

Nível 2 da API de seletores

SVG (Scalable Vector Graphics)

Formas básicas

Recorte, mascaramento e composição

Unidades, transformações e sistemas coordenados

Estrutura do documento

Gradientes e padrões

Interatividade

Vinculação e exibições

Pintura e cor

Caminhos

Texto

Novas ferramentas para desenvolvedores da Web

Sites Fixos

Controle de versão da plataforma

Novo modo de documento

Cadeia de caracteres do UA (agente do usuário)

Ferramentas para Desenvolvedores

Guia Console

Guia Rede

Ferramenta de alternância do agente do usuário

Avaliação do desempenho no mundo real

Histórico de revisão

Introdução

Bem-vindo ao Windows Internet Explorer 9. Como desenvolvedor, você deseja conhecer as informações mais recentes sobre os navegadores que você e seus clientes usam. O Internet Explorer 9 é a versão mais recente do navegador da web mais popular do mundo. O Internet Explorer 9 foi projetado para ajudar a comunidade de desenvolvimento da web a criar aplicativos web avançados, interoperáveis e compatíveis com padrões através do fornecimento de plataforma, ferramentas e recursos para a futura web.

Este documento mostra a você, o desenvolvedor da Web cujos clientes dependem do Internet Explorer, como usar essas novas melhorias nos seus sites e aplicativos. Não se esqueça de verificar o site do Test Drive complementar para ver uma demonstração desses recursos em ação. Para fornecer comentários e ver mais informações sobre as novidades no novo Internet Explorer 9, consulte as Notas de Versão, assim como Novidades no Internet Explorer 9 no MSDN. Para obter as últimas novidades sobre o Internet Explorer 9, consulte o Blog da equipe do IE. E como sempre, para obter as informações mais recentes do desenvolvedor sobre o Internet Explorer, visite o Internet Explorer Developer Center no MSDN.

O Internet Explorer 9 se destina a ajudar os desenvolvedores a entenderem melhor como o Internet Explorer 9 avançou nas seguintes dimensões da plataforma:

  • Desempenho geral do navegador
  • Suporte aos padrões da Web para ajudar a permitir que a mesma marcação funcione de forma idêntica nos diferentes navegadores
  • Novos recursos gráficos que exploram tudo o que é oferecido pelos PCs com Windows

Desempenho geral do navegador

O desempenho do navegador envolve diferentes subsistemas no navegador. Sites diferentes, e atividades diferentes no mesmo site, definem diferentes cargas e demandas no navegador. Por exemplo, um aplicativo Web como o Windows Live Mail ou o Microsoft Office Web Apps usufrui dos subsistemas do navegador de maneiras completamente diferentes de um site de agregação de notícias como o Bing News ou o Digg.

Introdução ao “Chakra”, o novo mecanismo do JavaScript

O desempenho do mecanismo de script é apenas uma parte do quadro geral do desempenho do navegador. O desempenho do script no Internet Explorer 8 melhorou exponencialmente em relação ao Internet Explorer 7, e o "Chakra", o novo mecanismo do JavaScript, realizou esse feito novamente no Internet Explorer 9. O mecanismo Chakra interpreta, compila e executa códigos ao mesmo tempo e aproveita os vários núcleos de CPU, quando disponíveis. Para obter mais detalhes, consulte " O novo mecanismo do JavaScript no Internet Explorer 9" no Blog da equipe do IE.

Obviamente, a equipe do Internet Explorer está focada nas características de desempenho dos subsistemas de todos os navegadores, uma vez que eles são usados pelos sites do mundo real. A meta é proporcionar melhor desempenho de maneira uniforme a todos os sites do mundo real, e não apenas aos de referência.

Suporte aos padrões da Web para a mesma marcação

O Internet Explorer fornece recursos sofisticados e interoperáveis aos desenvolvedores da Web. A equipe do Internet Explorer sabe que você não deseja reescrever e testar novamente seus sites repetidamente; a adoção de padrões pelos fornecedores de navegador é uma boa maneira de atingir esse objetivo.

Com o Internet Explorer 8, a equipe do Internet Explorer forneceu uma implementação do CSS 2.1 altamente interoperável e, ao mesmo tempo, contribuiu com um pacote de testes com mais de 7.200 testes para o W3C (World Wide Web Consortium). Isso é importante. Sem os testes de validação, os padrões apresentam mais desafios para uma implementação consistente, o que dificulta a confiança neles por parte dos desenvolvedores de site.

Internet Explorer 9 faz investimentos significativos no suporte aos padrões e na interoperabilidade. Por exemplo, novo suporte ao HTML5, melhor suporte para vários recursos de CSS3 e, pela primeira vez no Internet Explorer, suporte interno ao SVG fazem parte do Internet Explorer 9.

Novos recursos gráficos que exploram tudo o que é oferecido pelos PCs com Windows

O ecossistema do Windows fornece inovações de hardware incríveis. Agora, com o Internet Explorer 9, os desenvolvedores da Web podem aproveitar essa inovação com a renderização de gráficos e texto orientada ao hardware.

O Internet Explorer 9 usa a família DirectX das APIs (interfaces de programação de aplicativo) do Windows para oferecer vários avanços aos desenvolvedores da Web. Transferimos toda a renderização de gráficos e texto da CPU para a placa gráfica usando o Direct2D e o DirectWrite. A aceleração do hardware para gráficos significa que sites sofisticados e com muitos gráficos podem renderizar com mais rapidez no Windows ao mesmo tempo em que usam menos potência da CPU. Além disso, você pode aproveitar essas alterações automaticamente enquanto cria sites com os mesmos padrões que está acostumado a usar.

Lista de novos recursos

Para sua conveniência, esta lista contém todos os novos recursos de desenvolvedor no Internet Explorer 9. Para obter informações sobre alterações de builds de pré-lançamento do Internet Explorer 9, consulte Histórico de revisão.

  • Suporte aprimorado a CSS3
    • Cantos arredondados por meio da propriedade border-radius
    • Recursos de plano de fundo e borda de CSS3
    • A propriedade opacity
    • Modelos de cor RGBA, HSL e HSLA
    • Propriedades de fontes de CSS3 e novos formatos de fonte da Web
    • Consultas de mídia de CSS3
    • Namespaces de CSS3
    • Valores e unidades de CSS3
    • Seletores de CSS3
  • Suporte aprimorado a URI de dados
  • Melhorias do DOM (Document Object Model)
    • Recursos aprimorados do DOM
    • Análise e serialização de XML para e do DOM
    • Novo suporte ao Nível 2 (L2) e Nível 3 (L3) do DOM e comportamentos atualizados
      • Núcleo (L2, L3) e exibições (L2) do DOM
      • Passagem de elemento do DOM
      • Eventos do DOM (L2, L3)
      • HTML de L2 do DOM
      • Estilo de L2 do DOM
      • Passagem e intervalo de L2 do DOM
    • Novo comportamento de tratamento de espaço em branco
  • Melhorias do recurso ECMAScript
  • Adição de suporte ao HTML5
    • Localização geográfica
    • Os elementos vídeo e áudio
    • O elemento tela
    • A interface Seleção
    • Análise aprimorada de elementos HTML
    • APIs da seleção de texto
  • Suporte ao perfil de cor v2 e v4 do ICC em imagens
  • Novo suporte ao Nível 2 da API de seletores para o método msMatchesSelector
  • Recursos SVG
    • Formas básicas: retângulos, círculos, elipses, linhas, polilinhas e polígonos
    • Recorte, mascaramento e composição
    • Unidades, transformações e sistemas coordenados
    • Funcionalidade de estrutura de documento, metadados e flexibilidade
    • Gradientes e padrões
    • Interatividade
    • Vinculação e exibições
    • Pintura e cor
    • Caminhos, incluindo recursos completos do elemento caminho e atributo d
    • Texto
  • Recursos adicionais de controle de versão da plataforma
    • Sites fixos
    • Novo modo de documento
    • Nova cadeia de caracteres do UA (agente do usuário)
  • Adições das Ferramentas para Desenvolvedores
    • Melhorias de desempenho
    • Guia Console
    • Guia Rede
    • Ferramenta de alternância do UA
    • Avaliação de desempenho do mundo real

Interoperabilidade aprimorada por meio do Suporte a Padrões

Importante   O novo suporte aos padrões no Internet Explorer 9 requer que o navegador esteja no Modo de Padrões do Internet Explorer ("Modo do IE9"). A melhor maneira de fazer isso é usar uma diretiva !DOCTYPE de padrões e nenhuma marca meta compatível com X-UA ou cabeçalho HTTP. Este é o !DOCTYPE para invocar o modo IE9:

<!DOCTYPE html>

Evidentemente, é possível usar o !DOCTYPE e a marca meta compatível com X-UA ou o cabeçalho HTTP para alterar o padrão de acordo com a necessidade.

Para determinar o modo de documento atual, pressione F12 para abrir as Ferramentas para Desenvolvedores do Internet Explorer e observe o lado direito da barra de menus. Para ignorar o modo de documento, no menu Modo de Documento, clique em Padrões do Internet Explorer 9.

Consulte a seção Controle de versão da plataforma deste guia para obter atualizações sobre os comportamentos do modo de documento no Internet Explorer 9.

Folhas de Estilos em Cascata, Nível 3 (CSS3)

O Internet Explorer 9 apresenta mais suporte para CSS (folhas de estilos em cascata) do que qualquer navegador anterior da Microsoft. Continuando o trabalho que foi feito no Internet Explorer 8, versão na qual o Internet Explorer tornou-se totalmente compatível com a especificação CSS2.1, o Internet Explorer 9 adiciona suporte para muitos componentes de CSS3.

Observação  É importante lembrar que muitos módulos de CSS3 ainda estão nos estágios Rascunho ou Última Chamada. Até que eles atinjam o estágio Recomendação para Aplicação, eles poderão sofrer alterações significativas. Para obter mais informações, consulte os módulos de rascunho mais recentes de CSS3.

Transformações CSS3 2D

O Internet Explorer 9 adiciona suporte a Transformações CSS3 2D. As Transformações CSS 2D habilitam elementos que são renderizados por CSS para que sejam transformados em espaço bidimensional.

O Internet Explorer 9 oferece suporte às seguintes propriedades das Transformações 2D:

  • A propriedade -ms-transform aplica uma ou mais funções de transformação bidimensional a um elemento.
  • A propriedade -ms-transform-origin estabelece a origem da transformação de um elemento. Essa propriedade é útil quando você deseja alterar a origem padrão (o centro).

Observação   Como o módulo Transformações CSS 2D ainda não recebeu o status Recomendação para Aplicação do W3C, tanto a propriedade transform como a transform-origin devem ser usadas com o prefixo -ms- para ser reconhecida pelo Internet Explorer 9. Para obter mais informações sobre prefixos específicos de fornecedor, consulte “ IE9, prefixos de fornecedor e desenvolvedores” no blog da equipe do IE.

O Internet Explorer 9 oferece suporte às seguintes funções de transformação para uso com a propriedade -ms-transform:

  • A função matrix(a,b,c,d,e,f) especifica uma transformação 2D na forma de uma matriz de transformação de seis valores (a até f). 
  • A função translate(tx,ty) especifica uma conversão 2D pelo vetor [tx,ty], onde tx é o primeiro parâmetro do valor de conversão e ty é o segundo parâmetro (opcional) do valor de conversão. Se ty não estiver especificado, seu valor será zero. (Os parâmetros do valor de conversão podem ser percentuais ou comprimentos.)
  • A função translateX(tx) especifica uma conversão pelo valor dado na direção x.
  • A função translateY(ty) especifica uma conversão pelo valor dado na direção y.
  • A função scale(sx,sy) especifica uma operação de escala 2D pelo vetor de escala [sx,sy] descrito pelos dois parâmetros. Se o segundo parâmetro não for fornecido, ele receberá um valor igual ao primeiro.
  • A função scaleX(sx) especifica uma operação de escala pelo uso do vetor de colocação em escala [sx,1], onde sx é dado como o parâmetro.
  • A função scaleY(sy) especifica uma operação de escala pelo uso do vetor de colocação em escala [1,sy], onde sy é dado como o parâmetro.
  • A função rotate(angle) especifica uma rotação 2D pelo ângulo especificado no parâmetro sobre a origem do elemento, conforme definido pela propriedade transform-origin.
  • A função skewX(ax) especifica uma transformação de distorção no eixo x pelo ângulo dado.
  • A função skewY(ay) especifica uma transformação de distorção no eixo y pelo ângulo dado.
  • A função skew(ax,ay) especifica uma transformação de distorção nos eixos x e y. O primeiro parâmetro do ângulo especifica a distorção no eixo x. O primeiro parâmetro do ângulo especifica a distorção no eixo y. Se o segundo parâmetro não for dado, o valor zero será usado pelo ângulo y (ou seja, nenhuma distorção no eixo y).

A propriedade -ms-transform-origin aceita um ou dois valores. Cada valor pode ser uma palavra-chave, um comprimento ou um percentual. Se a propriedade -ms-transform-origin não estiver definida, a transformação será iniciada no centro (igual a um valor -ms-transform-origin de 50% 50%).

  • O primeiro valor indica a posição horizontal (a posição no eixo x) e pode ser negativo. Esse valor pode ser um comprimento (em qualquer unidade de comprimento aceita), um percentual (do comprimento total da caixa) ou uma das três seguintes palavras-chave: left (igual a 0% ou a um comprimento zero), center (igual a 50% ou à metade do comprimento da caixa) ou right (igual a 100% ou ao comprimento total da caixa).
  • O segundo valor indica a posição vertical (a posição no eixo y) e pode ser negativo. Esse valor pode ser um comprimento (em qualquer unidade de comprimento aceita), um percentual (da altura total da caixa) ou uma das três seguintes palavras-chave: top (igual a 0% ou a uma altura zero), center (igual a 50% ou à metade da altura da caixa) ou bottom (igual a 100% ou à altura total da caixa).

Se houver apenas um valor especificado, o segundo valor será tido como centro

Considere a marcação a seguir.

div {
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
}

O Internet Explorer 9, a definição da propriedade -ms-transform-origin como 60% 100% estabelece o ponto de origem da transformação em 60% do comprimento e em 100% da altura do elemento a ser transformado. A propriedade -ms-transform primeiro move o elemento 200 pixels na direção x e 100 pixels na direção y. Em seguida, ele dimensiona o elemento em 75%. Finalmente, ele gira o elemento 40 graus no sentido horário em torno do ponto de origem definido pela propriedade -ms-transform-origin.

Para obter mais informações sobre Transformações CSS3 2D, consulte o MSDN.

Módulo Planos de fundo e bordas de CSS3

O Internet Explorer 9 adiciona suporte para diversos recursos do Módulo Planos de fundo e bordas de CSS3. O novo recurso mais notável, as propriedades border-radius, também é o recurso de borda de CSS mais solicitado. O Internet Explorer 9 também apresenta suporte para as seguintes novas propriedades de CSS3:

O Internet Explorer 9 também adiciona funcionalidade às seguintes propriedades existentes de plano de fundo e borda de CSS:

As propriedades border-radius

As propriedades border-radius permitem que você curve os cantos da borda "substituindo" basicamente os cantos pontiagudos por elipses divididos em quatro partes iguais e especificando os raios de cada elipse. As propriedades são as seguintes:

Por exemplo, observe a seguinte marcação:

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

Essa configuração gerará o seguinte quando aplicada a um bloco de texto.

Módulo Cor de CSS3

O Internet Explorer 9 adiciona suporte para o módulo Cor de CSS3. Esse módulo inclui suporte para os modelos de cor RGBA, HSL e HSLA; para a propriedade opacity e para a palavra-chave currentColor . O Internet Explorer 9 também estende o suporte para a palavra-chave transparent .

Modelo de cor RGBA

O modelo de cor RGB foi estendido para incluir um canal alfa ou transparência. O formato de um valor RGBA é rgba (vermelho, verde, azul, alfa). Os componentes vermelho, verde e azul são idênticos aos do modelo de cor RGB e são expressos como inteiros ou porcentagens. O componente alfa é expresso como um valor entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Por exemplo, para definir a cor do plano de fundo como vermelho com 50% de transparência, você pode incluir uma das duas declarações de CSS a seguir na folha de estilos:

background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);

Esteja ciente de que, embora os valores RGB ofereçam suporte a notação hexadecimal, os valores RGBA, não.

Modelo de cor HSL

O Internet Explorer 9 oferece suporte aos valores de cor HSL (matiz-saturação-brilho) do módulo Cor de CSS3. No modelo de cor HSL, “matiz” é definido como o ângulo da cor indicada no disco de cores (por exemplo, vermelho é 0 ou 360, verde é 120, azul é 240). “Saturação” e “brilho” são expressos como porcentagens. Por exemplo, a seguinte declaração de CSS define um plano de fundo vermelho.

background-color: hsl(0,100%,50%);
Modelo de cor HSLA

O Internet Explorer 9 também estende o modelo de cor HSL com um canal alfa. Assim como no modelo RGBA, o canal alfa é expresso como um valor entre 0.0 e 1.0. Por exemplo, a seguinte declaração de CSS define um plano de fundo vermelho com 50% de transparência.

background-color: hsla(0,100%,50%,0.5);
A propriedade opacity

O Internet Explorer 9 adiciona a propriedade opacity do módulo Cor de CSS3, que permite controlar a transparência no nível de elemento. Semelhante ao componente alfa dos valores RGBA, o valor de opacity é um número entre 0 (totalmente transparente) e 1 (totalmente opaco). A propriedade opacity está disponível em todos os elementos.

O exemplo a seguir mostra a propriedade opacity na cor azul-marinho, com valores de opacidade em incrementos de 0,2 de 0 a 1.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0,2;"></div>
    <div style="background: navy; opacity: 0,4;"></div>
    <div style="background: navy; opacity: 0.6;"></div>
    <div style="background: navy; opacity: 0,8;"></div>
    <div style="background: navy; opacity: 1;"></div>
</div>

Este exemplo gera a saída a seguir para um div de 25×125 pixels.

Palavras-chave de cores

O módulo Cor de CSS3 faz uma lista de palavras-chave de cores para CSS idêntica àquela para o SVG 1.0. Embora o suporte ao SVG seja novo no Internet Explorer 9, essa alteração foi implementada no Internet Explorer 8.

O Internet Explorer 9 apresenta a palavra-chavecurrentColor do módulo Cor de CSS3, que indica o valor atual da propriedade color em qualquer propriedade que aceite color. Quando definida na propriedade color em si, currentColor é equivalente a color:inherit.

O Internet Explorer 9 também expande o uso da palavra-chave transparent para além das propriedades border-color e background-color. Agora, ela pode ser usada com qualquer propriedade que aceite a propriedade color.

Módulo Fontes de CSS3

O melhor controle tipográfico tem sido um recurso consistente de cada nova versão de CSS. Ao mesmo tempo, a falta de um formato de fonte da Web interoperável pode ser frustrante. O Internet Explorer 9 aprimora o suporte existente para fontes de CSS, a fim de possibilitar a conformidade com o Módulo Fontes de CSS3. Ele também adiciona suporte ao WOFF (Formato de Fonte Aberto da Web) e a fontes TrueType.

Propriedades da fonte

A propriedade font-weight foi atualizada para que o Internet Explorer 9 calcule a espessura da fonte, conforme especificado no Módulo Fontes de CSS3.

A propriedade font-size foi atualizada para que cada fator de escala da palavra-chave seja conforme definição no Módulo Fontes de CSS3. Além disso, os tamanhos do título HTML e de palavras-chave agora são mapeados conforme especificado no Módulo Fontes de CSS3.

A propriedade font-stretch é nova no Internet Explorer 9 e seleciona uma face normal, condensada ou expandida de uma família de fontes. Essa propriedade também está disponível como um descritor da regra @font-face.

A regra @font-face

A regra @font-face permite a vinculação da fonte. Isto é, uma folha de estilos pode fazer referência a um arquivo de fontes específico para que o navegador baixe e use. Por exemplo, considere a marcação a seguir.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {font-family: MyFont, serif;
}

Nesse exemplo, a regra @font-face instrui o navegador a ir para a URL especificada no descritor src para baixar o arquivo de fontes que contém a fonte especificada. No Internet Explorer 8 e anteriores, o descritor src era incorretamente ignorado se contivesse uma cadeia de caracteres de formato opcional, como a mostrada no exemplo anterior. No Internet Explorer 9, o descritor src é analisado conforme esperado.

O Internet Explorer 9 também adiciona suporte para o descritor unicode-range, que permite especificar o intervalo de caracteres Unicode com suporte de uma determinada fonte. Por exemplo, o exemplo de código a seguir especifica o intervalo de caracteres ASCII básicos.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
Formatos de fonte da Web

A Microsoft criou o Internet Explorer 9 para maximizar a opção de fontes da Web. Com esse intuito, conseguimos:

  • Garantir a compatibilidade com versões anteriores, com suporte contínuo para EOT (Embedded OpenType)
  • Adicionar suporte para o WOFF (Formato de Fonte Aberto da Web), que reempacota arquivos de fontes baseadas em snft (fontes TrueType, OpenType e Formato de Fonte Aberto) compactando cada tabela individualmente usando um formato de compactação ZIP.
  • Adicionar suporte para fontes TrueType brutas instaláveis (sem bits de permissão de inserção definidos)

Para ver um exemplo de fontes da Web no Internet Explorer 9, consulte a demonstração “ Fontes da Web” ou “ Mais fontes da Web” no Test Drive do Internet Explorer

Para obter mais informações sobre fontes de CSS3 no Internet Explorer 9, consulte o MSDN.

Módulo Consultas de mídia de CSS3

O Módulo Consultas de mídia de CSS3 especifica métodos para permitir que os desenvolvedores da Web definam uma folha de estilos para um conjunto de recursos precisos de dispositivo. Por exemplo, talvez seja conveniente criar páginas de modo diferente para usuários que navegam em um dispositivo móvel (que tem uma tela muito pequena, é limitado por paleta de cores, tem baixa resolução e assim por diante) versus em um computador padrão (que tem tela grande, paleta de cores completa, alta resolução e assim por diante). A lista completa de propriedades de mídia que contam com suporte das consulta de mídia de CSS3 inclui largura, altura, largura para dispositivo, altura para dispositivo, orientação, taxa de proporção, taxa de proporção para dispositivo, cor, índice de cores, monocromático e resolução.

A declaração a seguir é uma consulta de mídia típica que usa a regra @media.

@media screen and (max-width:400px) {div {border:none;}}

Nesse caso, screen indica o tipo de mídia de destino e max-width é a propriedade da mídia de destino. A declaração indica que as regras especificadas (sem borda nos elementos div) devem ser aplicadas somente quando a página for exibida em uma tela com uma largura de, no máximo, 400 pixels. Você pode usar as propriedades de mídia juntas para criar consultas ainda mais específicas, como a seguinte.

@media screen and (max-width:400px) and (max-height:600px) {…}

Essa declaração aplica as regras especificadas quando a mídia é uma tela que tem uma largura de até 400 pixels e uma altura de até 600 pixels.

Veja as consultas de mídia em ação no site do Test Drive do Internet Explorer.

O Internet Explorer 9 apresenta suporte para consultas de mídia em CSS, HTML, XML e XHTML. Para obter mais informações sobre consultas de mídia no Internet Explorer 9, consulte o MSDN.

Módulo Namespaces de CSS3

O Internet Explorer 9 oferece suporte a grande parte do Módulo Namespaces de CSS3. Os namespaces de CSS permitem que um desenvolvedor declare um namespace padrão para um arquivo CSS. Isto é, por padrão, qualquer elemento ou seletor de atributo também usa esse namespace.

Os namespaces de CSS também permitem que um desenvolvedor crie prefixos de namespace, que podem ser usados posteriormente no arquivo CSS. Além disso, o Internet Explorer 9 permite declarar um namespace que se destine aos elementos SVG.

A regra @namespace

A regra @namespace declara um namespace XML (e, por opção, seu prefixo) e o associa a uma cadeia de caracteres que representa o nome de um namespace. Por exemplo, a regra a seguir declara um namespace padrão.

@namespace "http://www.w3.org/1999/xhtml";

O namespace padrão é aplicado a nomes que não têm um componente de namespace explícito.

Se uma regra @namespace for declarada com um prefixo, este pode ser usado em nomes qualificados para namespace. Por exemplo, dada a declaração de namespace a seguir para um namespace prfx

@namespace prfx "http://prfx.contoso.com";

…o seletor a seguir faz a correspondência de elementos E no namespace apontado pelo prefixo prfx.

prfx|E

O exemplo a seguir é ligeiramente mais complexo.

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";

p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

Nesse exemplo, são criados dois prefixos de namespace. Primeiro, os elementos p em qualquer namespace são coloridos de vermelho. Qualquer elemento p no namespace prfx são então recoloridos de azul e os elementos p no namespace msft são recoloridos de verde.

O exemplo a seguir estiliza um elemento SVG.

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

Usando o namespace e a declaração desse exemplo, todos os círculos criados com SVG terão um preenchimento vermelho.

Para obter mais informações, consulte a página de referência da regra @namespace no MSDN.

Módulo Valores e unidades de CSS3

O Internet Explorer 9 adiciona suporte para muitos dos novos valores e unidades descritos no Módulo Valores e unidades de CSS3. A maioria desses novos valores e unidades são exigidos para oferecer suporte a outros recursos de CSS3 descritos neste documento.

O Internet Explorer 9 adiciona suporte para os seguintes valores e unidades novos:

  • deg: graus (unidade de ângulo)
  • grad: grados (unidade de ângulo)
  • rad: radianos (unidade de ângulo)
  • turn: voltas (unidade de ângulo)
  • ms: milissegundos (unidade de tempo)
  • s: segundos (unidade de tempo)
  • rem: tamanho da fonte do elemento raiz (unidade de comprimento relativo)
  • vw: largura do visor (unidade de comprimento relativo)
  • vh: altura do visor (unidade de comprimento relativo)
  • vm: menor largura ou altura do visor (unidade de comprimento relativo)
  • ch: largura zero (largura do glifo zero na fonte de renderização; unidade de comprimento relativo)

Além disso, o Internet Explorer 9 atualiza a função attr() que é usada para o conteúdo gerado. Agora, ela pode ser aplicada em qualquer propriedade e aceita vários argumentos.

A função de CSS3 a seguir é nova no Internet Explorer 9:

  • calc(): calcula valores usando operadores aritméticos e pode ser usada sempre que os valores de comprimento forem permitidos

Para obter mais informações sobre funções de CSS, consulte Referência de unidades e valores de CSS no MSDN.

Seletores de CSS3

O Internet Explorer 9 oferece suporte às adições para a sintaxe do Seletor de CSS especificadas na Recomendação proposta de seletores de CSS3. Aqui estão listados os seletores que são novos no Internet Explorer 9. (Para obter os detalhes completos sobre o suporte a seletores no Internet Explorer, consulte Compatibilidade de CSS e Internet Explorer no MSDN.)

Para obter mais informações, consulte a seção de referência Seletores de CSS no MSDN.

Para ver um exemplo de seletores de CSS3 em ação, vá para o site Test Drive do Internet Explorer.

Pseudoclasses estruturais

As pseudoclasses estruturais permitem a seleção baseada em informações extras na árvore de documento que não podem ser selecionadas usando seletores ou combinadores simples.

O exemplo a seguir seleciona um elemento E que é a raiz do documento.

E:root 

O exemplo a seguir seleciona um elemento E que é o enésimo filho do seu pai.

E:nth-child(n)

O exemplo a seguir seleciona um elemento E que é o enésimo filho do seu pai, a contar do último.

E:nth-last-child(n) 

O exemplo a seguir seleciona um elemento E que é o enésimo irmão do seu tipo.

E:nth-of-type(n) 

O exemplo a seguir seleciona um elemento E que é o enésimo irmão do seu tipo, a contar do último.

E:nth-last-of-type(n)

O exemplo a seguir seleciona um elemento E que é o último filho do seu pai.

E:last-child 

O exemplo a seguir seleciona um elemento E que é o primeiro irmão do seu tipo.

E:first-of-type 

O exemplo a seguir seleciona um elemento E que é o último irmão do seu tipo.

E:last-of-type 

O exemplo a seguir seleciona um elemento E que é o único filho do seu pai.

E:only-child

O exemplo a seguir seleciona um elemento E que é o único irmão do seu tipo.

E:only-of-type

O exemplo a seguir seleciona um elemento E que não tem filhos (incluindo nós de texto).

E:empty
A pseudoclasse de destino

A pseudoclasse de destino seleciona o elemento de destino do URI de referência. Um identificador de fragmento é usado para identificar um local em uma página, e é formado usando-se um sinal de número seguido pelo identificador de ancoragem, por exemplo, http://www.example.com/mypage.html#section_3.

O exemplo a seguir seleciona o elemento div da classe important que é o elemento de destino do URI de referência. Se o URI do documento não tiver o identificador de fragmento, não haverá elemento de destino.

div.important:target
Pseudoclasses dos estados do elemento de interface do usuário

As pseudoclasses dos estados do elemento de interface do usuário são usadas para selecionar elementos de interface do usuário (controles de formulário, como botões de opção ou caixas de seleção) em um determinado estado, por exemplo, habilitados, desabilitados ou selecionados (marcados).

O exemplo a seguir seleciona um elemento do controle de formulário E que está habilitado.

E:enabled

O exemplo a seguir seleciona um elemento do controle de formulário E que está desabilitado.

E:disabled 

O exemplo a seguir seleciona um elemento do controle de formulário E que está selecionado.

E:checked 

A pseudoclasse : indeterminate seleciona botões de opção e caixas de seleção cujos estados de alternância não podem ser determinados, ou seja, não estão marcados (selecionados) nem desmarcados (limpos). O exemplo a seguir seleciona um elemento do controle de formulário E cujo estado não pode ser determinado.

E:indeterminate

Observação   A pseudoclasse :indeterminate não está mais definida na especificação CSS3 atual, mas conta com suporte em muitos navegadores conhecidos.

A pseudoclasse de negação

A pseudoclasse de negação usa um seletor simples como um argumento para selecionar elementos que não são selecionados por esse argumento. O exemplo a seguir seleciona um elemento E que não corresponde ao seletor simples s:

E:not(s)
O pseudoelemento de fragmentos do elemento de interface do usuário

O pseudoelemento de fragmentos do elemento de interface do usuário, ::selection, é usado para selecionar qualquer parte da página que o usuário destacou, incluindo texto em um campo de texto editável. Esse pseudoelemento pode ser aplicado às propriedades color e background-color. O exemplo a seguir seleciona qualquer texto escolhido pelo usuário em um elemento E.

E::selection 

Observação   O pseudoelemento ::selection não está mais definido na especificação CSS3 atual, mas conta com suporte em muitos navegadores conhecidos.

Recursos adicionais de CSS

Suporte ao rascunho do módulo Exibição do OM (Modelo de Objeto) do CSS foi implementado no Internet Explorer 9.

Módulo Exibição do CSSOM

O Módulo Exibição do CSSOM define APIs que permitem aos desenvolvedores da Web inspecionar e alterar de modo programático as propriedades visuais de um documento e seu conteúdo, incluindo o posicionamento da caixa de layout, a largura do visor e a rolagem do elemento. O Internet Explorer 8 introduziu suporte para alguns desses módulos. O Internet Explorer 9 estende o suporte para ainda mais APIs da Exibição do CSSOM:

URIs de dados

O URI de dados é um meio de inserir dados diretamente no contexto de uma página da Web. O exemplo mais comum é uma imagem minúscula inserida em uma página da Web, como esta:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Quando colocada no atributo src de um elemento img, esse texto insere efetivamente a imagem na marcação da página. O Internet Explorer 8 introduziu URIs de dados no Internet Explorer.

Com o Internet Explorer 9, agora os desenvolvedores podem usar um URI de dados no atributo src de um elemento script. Além disso, o limite de tamanho para URIs de dados aumentou de 32 KB (quilobytes) no Internet Explorer 8 para 4 GB (gigabytes) no Internet Explorer 9.

Melhorias do DOM (Document Object Model)

O Internet Explorer 9 apresenta um DOM (Document Object Model) significativamente melhorado. Além de mais suporte ao L2 (Nível 2) e L3 (Nível 3) do DOM no W3C (World Wide Web Consortium), o Internet Explorer 9 apresenta um DOM aprimorado, bem como um melhor tratamento de espaço em branco.

Introdução ao DOM aprimorado

O DOM aprimorado no Internet Explorer 9 aumenta o desempenho geral do Modo de Padrões do Internet Explorer 9 (Modo IE9) agilizando a camada de execução do script entre o “Chakra”, o novo mecanismo do JavaScript, e o mecanismo de layout Trident, e movendo os pontos de entrada do DOM para o mecanismo Chakra. Para obter mais informações sobre o modo IE9, consulte Interoperabilidade aprimorada por meio do Suporte aos Padrões neste documento.  O DOM aprimorado também fornece simultaneamente a hierarquia correta do objeto de herança do DOM, conforme determinado pelas especificações de L2 e L3 do DOM no W3C.

Os tipos de objetos do DOM aprimorado agora são refletidos nas ferramentas para desenvolvedores F12 na execução de páginas no Modo de Padrões do Internet Explorer 9. (Para obter mais informações sobre as novas ferramentas para desenvolvedores F12 no Internet Explorer 9, consulte Ferramentas para desenvolvedores F12 neste documento.) Em vez de mostrar os tipos herdados baseados no COM (que consistem em uma variedade de objetos de Interfaces e Expedição), as páginas do modo IE9 relatam os reais nomes do tipo de objeto do DOM aprimorado em uso pelo mecanismo Chakra, que é alinhado com os padrões L2 e L3 do DOM no W3C (por exemplo, NodeList, DocumentType, HTMLBodyElement e assim por diante).

O DOM aprimorado no Internet Explorer 9 avança significativamente o estado da interoperabilidade entre o Internet Explorer 9 e outros navegadores. Ele também fornece simultaneamente ganhos de desempenho em muitos cenários, devido principalmente aos objetos do DOM que são representados como objetos nativos do JavaScript.

O DOM aprimorado estende uma ampla gama de novos recursos fornecidos pelo “Chakra”, o novo mecanismo do JavaScript, em objetos e APIs fornecidos pelo DOM, incluindo:

  • Extensibilidade seletiva do objeto do DOM (por meio de Object.preventExtensions)
  • Mutabilidade da API do DOM (modificando os descritores de propriedade da API do DOM ou excluindo inteiramente as propriedades)
  • Suporte JSON dos objetos do DOM
  • Recursos nativos do Objeto JavaScript por herança (hasOwnProperty, toString, etc.)
  • Recursos nativos da Função JavaScript por herança (call, apply, bind)

Esses recursos unificam a experiência de programação entre os objetos nativos do mecanismo do JavaScript e o DOM. Além disso, os novos recursos do DOM a seguir foram adicionados:

  • Exceções do DOM no W3C: as exceções do DOM são novos tipos de objetos de erro que são lançados como resultado das falhas de API do DOM. Os códigos de erro para essas exceções são mapeados para constantes definidas na própria exceção.
  • Propriedades “const” do DOM no W3C (por exemplo, Node.ELEMENT_NODE): as propriedades const são campos simples que fornecem nomes para muitos valores de retorno numéricos comuns de outras APIs do DOM. Por exemplo, o número retornado pela API do DOM nodeType pode ser comparado com a constante para tornar o código mais legível: if (myElement.nodeType == Node.ELEMENT_NODE)

Análise e serialização de XML para e do DOM

Embora o Internet Explorer já forneça suporte para análise e serialização de XML para e do DOM nativo, não havia uma maneira fácil para o script acessar essa funcionalidade de dentro dos documentos HTML. Por esse motivo, o Internet Explorer 9 adiciona suporte para as interfaces DOMParser e XMLSerializer. Essas interfaces contam com suporte amplo de outros navegadores conhecidos.

O exemplo de script a seguir mostra como analisar uma cadeia de caracteres em um documento XML usando a interface DOMParser:

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

O exemplo de script a seguir mostra como serializar um nó DOM (incluindo nós de documentos HTML) para uma cadeia de caracteres XML usando a interface XMLSerializer:

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

Níveis 2 e 3 do DOM (Document Object Model)

O Internet Explorer 9 adiciona mais suporte para o L2 (Nível 2) e L3 (Nível 3) do DOM (Document Object Model), além de melhorar o suporte ao L2 do DOM nas implementações existentes no Internet Explorer.  Ele também adiciona suporte para a especificação do Rascunho do WebIDL.

O Internet Explorer 9 oferece suporte para os seguintes recursos do DOM.

Núcleo (L2 e L3) e exibições (L2) do DOM

O Internet Explorer 9 adiciona suporte para muitas APIs novas do Núcleo de L2 do DOM, incluindo:

Ele também adiciona suporte interoperável para namespaces do DOM, como suporte para métodos *NS e propriedades relacionadas ao namespace (createElementNS, namespaceURI, localName, prefix, entre outras). O Internet Explorer 9 também oferece suporte a muitos métodos e propriedades do Núcleo de L3 do DOM mais frequentemente usados:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

O Internet Explorer 9 oferece suporte completo às propriedades das Exibições de L2 do DOM.

Para obter mais informações, consulte a seção de referência Núcleo e exibições do DOM no MSDN.

Passagem de elemento do DOM

A especificação Passagem de Elemento define a interface ElementTraversal. Essa interface permite a navegação por script dos elementos em uma árvore do DOM, como nós de elemento em documentos HTML, XML ou SVG. O Internet Explorer 9 apresenta suporte para a interface ElementTraversal e suas cinco propriedades.

Eventos de L2 e L3 do DOM

As especificações Eventos do DOM descrevem o sistema de eventos do DOM, que habilita o registro de manipuladores de eventos, descreve o fluxo dos eventos por meio de uma árvore de documentos e define informações contextuais dos eventos. Para obter mais informações sobre o modelo de eventos, consulte Entendendo o modelo de eventos no MSDN.

Uma das metas do sistema de eventos no Internet Explorer 9 é alinhar-se ao sistema interoperável especificado pelo W3C. Isso permite a você distanciar-se do modelo attachEvent de propriedade do Internet Explorer, removendo a necessidade de ramificar seu código para diferentes navegadores.

Observação   Os eventos de mutação de DOM são incluídos para oferecer maior abrangência, mas foram preteridos no padrão W3C.

HTML de L2 do DOM

O Internet Explorer 9 adiciona suporte para as APIs de HTML de L2 do DOM que não estavam disponíveis nas versões anteriores do Internet Explorer, incluindo APIs do HTML5, como getElementsByClassName e characterSet. O Internet Explorer 9 aprimorou o modelo de objeto em tabelas, especialmente em relação às operações de DOM para adição ou remoção de elementos.

getElementsByClassName

O método getElementsByClassName retorna todos os nós de elemento que possuem atributos de classe correspondentes à cadeia de caracteres de entrada. Sua funcionalidade é semelhante a do método getElementsByTagName.

characterSet

O atributo characterSet retorna o nome MIME de preferência da codificação de caracteres do documento atual.

Estilo de L2 do DOM

A especificação Estilo de L2 do DOM define APIs para acessar e alterar de modo programático os estilos de elementos individuais e folhas inteiras de estilos removendo ou modificando regras. As versões anteriores do Internet Explorer podiam realizar essas tarefas usando métodos de propriedade; o Internet Explorer 9 adiciona suporte para APIs padronizadas definidas na especificação Estilo de L2 do DOM. Além disso, o suporte foi adicionado para APIs padronizadas que não têm equivalente no Internet Explorer, como o método getComputedStyle. Veja um exemplo do método getComputedStyle em ação no site do Test Drive do Internet Explorer.

Para obter mais informações, consulte Estilo do DOM no MSDN.

Passagem e intervalo de L2 do DOM

A parte Intervalo do DOM da especificação Passagem e intervalo de L2 do DOM define um modo geral de selecionar conteúdo do documento entre um par de pontos delimitadores. Os pontos delimitadores são especificados por um contêiner (o elemento pai que contém o ponto) e um deslocamento (o local no contêiner onde o ponto está situado). Em conjunto com a interface Seleção do HTML5, os recursos de Intervalo do DOM habilitam funcionalidades como a recuperação de um intervalo, a seleção de filhos e a exclusão de uma seleção de modo programático.

O Internet Explorer 9 oferece suporte a todas as APIs de Intervalo de L2 do DOM, bem como a todas as APIs de Seleção do HTML5, como o método setSelectionRange amplamente usado.

Para obter mais informações, consulte Intervalo do DOM no MSDN.

A parte Passagem do DOM da especificação Passagem e intervalo de L2 do DOM define um modo para você se mover em um documento e filtrar nós, conforme a necessidade. O Internet Explorer 9 oferece suporte às duas maneiras de percorrer o DOM (NodeIterator e TreeWalker) e às duas maneiras de filtrar nós (whatToShow e NodeFilter) que são definidas na especificação do W3C.

Para obter mais informações, consulte Passagem do DOM no MSDN.

Tratamento de espaço em branco do DOM

A exposição de espaço em branco no DOM tem sido tratada de forma diferente no Internet Explorer do que em outros navegadores; a falta de interoperabilidade nessa área tem sido frustrante para os desenvolvedores da Web. Em versões anteriores, o Internet Explorer recolhia o espaço em branco que encontrava e não o substituía nos nós de texto do DOM. No Internet Explorer 9, o espaço em branco é preservado e colocado nos nós de texto do DOM, conforme esperado. Esse comportamento é consistente com outros navegadores principais.

ECMAScript 5

O Internet Explorer 9 apresenta melhorias no recurso de linguagem JavaScript, além de melhor desempenho do JavaScript. Em dezembro de 2009, a ECMA aprovou a 5ª Edição da ECMA-262 como a sucessora da 3ª Edição (a 4ª Edição nunca foi publicada) e, nesse mesmo ano, a Microsoft estreou elementos de suporte do ES5 (ECMAScript 5) quando o suporte JSON nativo e o suporte Accessor para objetos DOM foram adicionados ao Internet Explorer 8. Contudo, além dos suportes JSON e Accessor para DOM, o ES5 padronizou melhorias significativas na linguagem JavaScript.

Existem muitos recursos importantes do ECMAScript 5 implementados no Internet Explorer 9, incluindo:

O Internet Explorer 9 também corrige vários problemas presentes nas implementações anteriores do JavaScript no Internet Explorer. Para obter mais informações, consulte o Blog da Equipe do Internet Explorer. Para ver o suporte ao ECMAScript 5 em ação, vá para o site do Test Drive do Internet Explorer.

HTML5

O suporte para alguns recursos da especificação Rascunho do HTML5 foi apresentado no Internet Explorer 8, incluindo:

O Internet Explorer 9 baseia-se no trabalho feito em relação à conformidade do HTML5 no Internet Explorer 8 e implementa os seguintes recursos novos:

Observação  É importante lembrar que, enquanto este documento está sendo elaborado, as especificações HTML5 ainda continuam no estágio de rascunho. Até que elas atinjam o estágio Recomendação para Aplicação, elas poderão sofrer alterações significativas. Para obter mais informações, consulte o rascunho mais recente do HTML5.

Localização geográfica HTML5

O Internet Explorer 9 adiciona suporte à localização geográfica. A API de localização geográfica permite que um aplicativo Web acesse a localização geográfica atual do PC que executa o Internet Explorer. A página da Web pode então adaptar a experiência do usuário de acordo com a localização, por exemplo, para exibir a posição em um mapa ou mostrar informações locais atualizadas, como previsão do tempo ou notícias. Os dados sobre a localização são retornados em termos de coordenadas de latitude e longitude. As APIs de localização geográfica no Internet Explorer 9 estão de acordo com os padrões estabelecidos na Especificação de API de localização geográfica.

Para ver a localização geográfica em ação, consulte o site Test Drive do Internet Explorer 9.

Para obter mais informações sobre localização geográfica, consulte o MSDN.

Elementos de vídeo e áudio do HTML5

Dois dos recursos mais esperados do HTML5 que agora contam com suporte no Internet Explorer 9 são os novos elementos vídeo e áudio. Os elementos vídeo e áudio são definidos na seção Conteúdo inserido da especificação HTML5.

Basicamente, os elementos vídeo e áudio permitem a inserção de conteúdo de vídeo e áudio em uma página HTML. Os desenvolvedores da Web também podem especificar vários atributos para ambos os elementos. Por exemplo, considere a marcação a seguir.

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
</video>

No Internet Explorer 9, essa marcação exibirá, em um espaço de 400×300 (os atributos width e height), o arquivo de imagem "frame.png" (o atributo poster) enquanto o conteúdo do vídeo é carregado. O arquivo de vídeo, "video.mp4" (o atributo src), iniciará a reprodução automaticamente no carregamento da página (o atributo autoplay) e os controles serão exibidos para controlar o vídeo (o atributo controls). Ao fim desse ciclo, o vídeo será repetido (o atributo loop). Se não houver suporte para o formato do vídeo, o texto no elemento vídeo (“This content appears…”) será exibido. O elemento video também oferece suporte ao elemento pré-carregamento, que dando a dica ao navegador sobre o que o desenvolvedor da Web está pensando proporciona a melhor experiência ao usuário.

Para ver um exemplo do elemento vídeo em ação, consulte a demonstração Panorâmica de vídeos no site do Test Drive do Internet Explorer.

O Internet Explorer 9 também oferece suporte ao elemento vídeo com várias origens, e cada uma é especificada pelo elemento filho da origem. Por exemplo, considere a marcação a seguir.

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'>
</video>

Aqui, o Internet Explorer 9 seleciona o primeiro formato com suporte listado (nesse caso, o segundo elemento origem) e reproduz seu arquivo de origem associado.

O elemento áudio é definido de forma semelhante ao elemento vídeo, mas sem os atributos width, height e poster. Para ver um exemplo do elemento áudio em ação, vá para o site do Test Drive do Internet Explorer.

O Internet Explorer 9 também oferece suporte aos seguintes formatos de conteúdo:

Nome do elementoFormatos com suporte
vídeo

contêiner MP4, vídeo H.264, todos os perfis de áudio em AAC ou MP3

Vídeo WebM, se você tiver o codec VP8 instalado

áudioAAC ou MP3

Para obter mais informações, consulte Vídeo e áudio do HTML5 no MSDN.

Elemento de tela do HTML5

Outro recurso esperado do HTML5 novo no Internet Explorer 9 é o elemento tela, que é usado juntamente com a API da tela em 2D. O elemento tela, conforme definição na especificação HTML5, permite a renderização de gráficos em uma tela bitmap dependente de resolução. Para desenhar na tela, são usados "contextos", como o contexto de Tela em 2D, descrito na especificação API da tela em 2D do W3C. O Internet Explorer 9 apresenta suporte para o elemento tela usando a API de desenho de tela em 2D como contexto. (No Internet Explorer 9, o contexto do desenho de tela 2D é representado pelo objeto CanvasRenderingContext2D ou pela interface ICanvasRenderingContext2D.) Como todos os elementos gráficos no Internet Explorer 9, tela é um hardware que é acelerado pelo uso do Windows e da GPU.

A tela permite desenhar cenários que incluem retângulos, caminhos, linhas, preenchimentos, arcos e curvas de Bézier e quadráticas. Além disso, o elemento tela no Internet Explorer 9 oferece suporte aos atributos width e height. (Os valores padrão para largura e altura são 300 e 150 pixels, respectivamente, e a cor padrão é preto transparente.)

A tela é uma forma de programar gráficos na Web. A marca tela é um “modo imediato” (comandos de desenho são enviados diretamente ao hardware gráfico), uma superfície de desenho bidimensional que você pode usar para fornecer gráficos, animações ou jogos interativos em tempo real, sem ter que baixar um plug-in separado. Em razão das APIs definidas pelo objeto CanvasRenderingContext2D, a tela habilita os seguintes cenários de desenho:

Você pode usar o JavaScript para animar desenhos na tela ou fazer experiências interativas que podem reagir ao pressionamento de teclado, a cliques do mouse ou a qualquer evento do navegador. Veja que este exemplo no site do Test Drive do Internet Explorer gera, com apenas algumas linhas de JavaScript, linhas brilhantes coloridas e colocadas de forma aleatória.

O elemento de tela no Internet Explorer 9 oferece suporte aos atributos de largura e altura. (Os valores padrão para largura e altura são 300 e 150 pixels, respectivamente, e a cor padrão é preto transparente.)

O Internet Explorer 9 oferece suporte às seguintes APIs de contexto de tela em 2D (membros expostos pelo objeto CanvasRenderingContext2D):

Para ver uma apresentação mais detalhada da Tela no HTML5 no Internet Explorer 9, consulte o MSDN. Além disso, visite o site do Test Drive do Internet Explorer para exibir mais demonstrações do elemento tela. Para obter informações técnicas sobre o elemento tela no Internet Explorer 9, consulte a página de referência do elemento tela no MSDN.

Melhorias de análise do HTML

A análise do HTML no Internet Explorer 9 foi aprimorada para proporcionar um alinhamento mais próximo ao comportamento descrito na Especificação Rascunho do HTML5.

Análise de SVG no HTML

O Internet Explorer 9 oferece suporte a SVG inserido diretamente no HTML. Para obter mais informações sobre SVG, consulte SVG (Scalable Vector Graphics) neste guia.

Análise de XHTML

O Internet Explorer 9 analisará documentos com um tipo mime de aplicativo/xhtml+xml como XHTML.

Elementos genéricos

Anteriormente, o Internet Explorer analisava elementos que não reconhecia como elemento "desconhecido". Esses elementos eram simplificados, o que impedia as regras de estilo CSS normais de serem aplicadas a eles, e não estavam em conformidade com a especificação Rascunho do HTML5. O Internet Explorer 9 alterou esse comportamento e, agora, analisa elementos não reconhecidos como “genéricos”, permitindo que funcionem como os elementos normais. Isso elimina a necessidade de soluções alternativas por parte do desenvolvedor, como chamar document.createElement para forçar o Internet Explorer a reconhecer um elemento.

Veja a seguir um exemplo simples de um elemento genérico, neste caso, um elemento indefinido chamado mydiv.

<style type="text/css">
mydiv {
     color: blue;
     font-weight: bold;
}
</style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

O Internet Explorer 8 ignora a marca mydiv e suas regras de CSS associadas. Essa sentença é renderizada da seguinte forma.

O Internet Explorer 9 analisa a marca mydiv como esperado e renderiza o seguinte.

Sobreposição de marcas

Se seu HTML contiver sobreposição de marcas, o Internet Explorer 8 e as versões anteriores não as resolverão no momento da análise. Esse comportamento é contrário ao que é determinado na especificação Rascunho do HTML5. Se você tiver alguns elementos sobrepostos para fins de script (como ilustrado aqui), isso poderá levar à confusão dos erros de script. O Internet Explorer 9 segue a especificação Rascunho do HTML5 e resolve marcas de sobreposição no momento da análise.

Veja a seguir o exemplo simples de um script que torna vermelho o texto entre as marcas i e b de sobreposição.

<script type="text/javascript">
function load()
{
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
}
</script>

...

<body onload="load();">
You should be aware of how <b>this <i>affects</b> script</i>.
</body>

No Internet Explorer 8 e nas versões anteriores, essa marcação resulta em uma renderização não esperada.

No Internet Explorer 9, a marcação é renderizada conforme esperado.

Análise de alterações nos blocos de estilo e script

O Internet Explorer 8 e as versões anteriores não continuam o texto, seja em um script ou bloco de estilo, para nós de texto no DOM. O Internet Explorer 9 continua o texto no script ou em blocos de estilo para o DOM como nós de texto, conforme esperado. Isso disponibiliza o código-fonte no DOM como um nó de texto, de forma que você possa manipulá-lo com o script.

APIs de seleção do HTML5

O Internet Explorer 9 adiciona suporte para três APIs de seleção de texto do HTML5. O objeto Selection representa uma lista de objetos Range, que são habilitados pelo novo suporte para o Intervalo de L2 do DOM no Internet Explorer 9. Para obter mais informações, consulte Melhorias do DOM (Document Object Model) anteriormente neste documento.

O método getSelection

O método getSelection retorna o objeto Selection para a janela, que representa o texto selecionado no momento.

A propriedade selectionStart

A propriedade selectionStart usa o deslocamento para o início do texto selecionado no momento e também pode definir o início da seleção.

A propriedade selectionEnd

A propriedade selectionEnd usa o deslocamento para o fim do texto selecionado no momento e também pode definir o fim da seleção.

Elementos semânticos do HTML5

O Internet Explorer 9 aprimora o suporte a vários elementos semânticos do HTML5. Um elemento “semântico” nesse contexto é definido com um cujo nome de marca descreve seu conteúdo, mas que não apresenta um comportamento especial. As marcas semânticas podem ser especialmente úteis para a acessibilidade.

O Internet Explorer 9 faz as seguintes alterações em seu suporte a elementos semânticos:

  • Os elementos agora herdam da interface HTMLElement, em vez da interface HTMLUnknownElement, conforme definido na especificação do HTML5.
  • Por padrão, os elementos agora são estilizados conforme definido na especificação do HTML5.

Os seguintes elementos semânticos são agora reconhecidos:

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • mark

Perfis de cor do ICC

O ICC (International Color Consortium) publica perfis de cor, que descrevem atributos de cor do software e do hardware.

O Internet Explorer 9 apresenta o suporte para os perfis de cor v2 e v4 do ICC em imagens, conforme definição nas especificações ICC.

Nível 2 da API de seletores

A especificação Nível 2 da API de seletores define um conjunto de APIs (interfaces de programação de aplicativo) que permitem avaliar seletores no DOM (Document Object Model).

O Internet Explorer 8 implementou os métodos querySelector e querySelectorAll das APIs de seletores. O Internet Explorer 9 adiciona suporte para o método msMatchesSelector.

SVG (Scalable Vector Graphics)

O suporte para SVG (Scalable Vector Graphics) tornou-se um dos recursos mais solicitados para implementação no Internet Explorer, e é uma maneira eficiente de adicionar recursos visuais facilmente escalonáveis e de alta fidelidade — de pequenos e simples a grandes e complexos — a um site sem a necessidade de um plug-in ou visualizador separado.

Com o Internet Explorer 9, a Microsoft tem o orgulho de apresentar o suporte para o conjunto de recursos básicos SVG. O suporte a SVG no Internet Explorer 9 baseia-se na recomendação da especificação SVG 1.1 (2ª Edição) (para navegadores de desktop). A funcionalidade a seguir foi implementada:

  • A maioria das estruturas de documento SVG, interatividade (eventos de script) e estilos (embutidos e por meio de CSS)
  • Muitos elementos de apresentação e seus atributos correspondentes, bem como interfaces do DOM, incluindo:
    • formas básicas
    • preenchimento, traçado, marcador e cor
    • gradientes e padrões
    • caminhos
    • texto

O Internet Explorer 9 oferece suporte aos seguintes métodos para exibir a marcação SVG:

  • Fragmentos SVG na inserção do HTML5, sem usar um objeto externo (isto é, basta incluir uma marca <svg> no seu HTML)
  • SVG como um tipo de documento completo (com a extensão de arquivo .svg)
  • SVG em XML ou XHTML (semelhante ao método do HTML5, somente com arquivos XML ou XTHML)
  • SVG como uma imagem de CSS
  • SVG usando o elemento objeto, como no exemplo a seguir (observe os atributos type, height e width):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • SVG usando os elementos img, embed, iframe ou frame, como no exemplo a seguir:
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Para obter mais informações sobre o suporte a SVG no Internet Explorer 9, consulte o MSDN.

Para obter mais informações sobre SVG, consulte a página de referência do elemento svg no MSDN.

Formas básicas

O Internet Explorer 9 apresenta suporte para a análise e renderização de todos os elementos de formas básicas, seus atributos e interfaces do DOM associadas, conforme determinação no Módulo Formas básicas da especificação SVG 1.1 (2ª Edição). O conjunto de formas básicas com suporte do Internet Explorer 9 consiste nos seguintes elementos de formas:

O Internet Explorer 9 também oferece suporte a interfaces do DOM associadas desses elementos.

Veja a seguir exemplos de cada um dos elementos de formas acima mencionados. Depois de marcação, há um instantâneo do resultado correspondente no Internet Explorer 9.

Retângulos: Elemento rect
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />


</svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

Para obter mais informações, consulte a página de referência do elemento rect no MSDN.

Círculos: Elemento circle
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

Para obter mais informações, consulte a página de referência do elemento circle no MSDN.

Elipses: Elemento ellipse
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

Para obter mais informações, consulte a página de referência do elemento ellipse no MSDN.

Linhas: Elemento line
<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>


<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>


<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

Para obter mais informações, consulte a página de referência do elemento line no MSDN.

Polilinhas: Elemento polyline

Uma “polilinha” é definida no SVG como várias linhas conectadas, formando muitas vezes uma forma “aberta”, ou um polígono com um ou mais lados ausentes ou formas não convexas.

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Para obter mais informações, consulte a página de referência do elemento polyline no MSDN.

Polígonos: Elemento polygon

Um polígono é uma forma fechada.

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

Para obter mais informações, consulte a página de referência do elemento polygon no MSDN.

Recorte, mascaramento e composição

O Internet Explorer 9 oferece suporte a caminhos de recorte, redução, mascaramento e opacidade, conforme determinação no Módulo Recorte, mascaramento e composição da especificação SVG 1.1 (2ª Edição). (Os caminhos SVG são discutidos na seção Caminhos deste documento.)

Recorte

Um caminho de recorte corta ou "reduz" a área em que uma cor, um padrão ou uma imagem pode ser desenhado. Todas as partes do elemento gráfico que ficam fora do caminho de recorte não são desenhadas. Os caminhos de recorte são totalmente opacos; a parte do elemento gráfico que fica fora do caminho de recorte é completamente invisível.

No SVG, as propriedades overflow e clip estabelecem caminhos iniciais de recorte ou formas nas quais o conteúdo será exibido. Por padrão, o caminho inicial de recorte é definido como o visor de SVG ou a área retangular da página em que o conteúdo de SVG é exibido.

O elemento clipPath define um caminho de recorte. O caminho de recorte é então referenciado usando a propriedade clip-path. A propriedade clip-rule aplica-se a elementos gráficos em um elemento clipPath e o atributo clipPathUnits define um sistema coordenado para o conteúdo do clipPath. Os caminhos de recorte podem ser aplicados a textos, bem como a cores, padrões e imagens.

A funcionalidade de recorte pode ser acessada de modo programático com a interface SVGClipPathElement do DOM.

Veja a seguir um exemplo simples de um caminho de recorte SVG.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
<clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
</clipPath>
<rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
</svg>

Esse exemplo usa o elemento clipPath para definir um caminho de recorte na forma de um círculo. A propriedade clip-path é então usada para aplicar o caminho de recorte a um retângulo. Isso produz o seguinte resultado no Internet Explorer 9.

Mascaramento

Uma máscara é semelhante a um caminho de recorte, exceto pelo fato de ser semitransparente. As máscaras geralmente são usadas para compor objetos de primeiro plano no segundo plano atual.

O elemento mask define uma máscara. A máscara é então referenciada usando a propriedade mask.

Veja a seguir um exemplo simples de uma máscara SVG.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
     <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
            </g>
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
</svg>

Esse exemplo usa a propriedade mask para definir uma máscara na forma de três círculos adjacentes com cores diferentes. A propriedade mask é então usada para aplicar a máscara a um retângulo roxo. Isso produz o seguinte resultado no Internet Explorer 9.

Unidades, transformações e sistemas coordenados

O Internet Explorer 9 apresenta suporte para sistemas coordenados, transformações e unidades SVG conforme definição no módulo Unidades, transformações e sistemas coordenados da especificação de rascunho SVG 1.1 (2ª Edição). Os recursos com suporte do Internet Explorer 9 incluem:

  • Unidades e porcentagens.
  • Transformações arbitrárias em qualquer elemento e o atributo transform.
  • As propriedades viewBox e preserveAspectRatio (incluindo interação com a propriedade overflow).
  • Suporte para transformações e tipos de listas de transformações.

O Internet Explorer 9 também oferece suporte a interfaces do DOM associadas aos sistemas coordenados e a transformações SVG.

Estrutura do documento

O Internet Explorer 9 apresenta suporte para a funcionalidade de estrutura de documento, metadados e extensibilidade de SVG, conforme definição nos módulos Estrutura do documento, Metadados e Extensibilidade da especificação SVG 1.1 (2ª Edição). Os elementos com suporte do Internet Explorer 9 incluem:

O Internet Explorer 9 também oferece suporte a interfaces do DOM associadas desses elementos.

Gradientes e padrões

O SVG permite pintar ou traçar formas e textos usando cores, gradientes ou padrões. O Internet Explorer 9 oferece suporte a gradientes e padrões SVG, conforme definição no módulo Gradientes e padrões da especificação SVG 1.1 (2ª Edição).

Gradientes

O suporte ao gradiente é fornecido por meio dos elementos de gradiente ( linearGradient e radialGradient) e dos atributos ( gradientUnits e gradientTransform). As cores de gradiente são definidas pelo elemento stop. Os elementos de gradiente podem ser usados nas propriedades fill e stroke das formas SVG. Por exemplo, considere a marcação a seguir:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
    </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
</svg>

Essa marcação define um retângulo com um gradiente linear. Os dois elementos stop especificam os pontos de cor juntamente com um vetor para as transições de cor — amarelo em um ponto de 10% e azul em um ponto de 90%. Isso aparece como se segue no Internet Explorer 9:

Padrões

O suporte ao padrão é fornecido por meio do elemento pattern e seus atributos. Assim como os gradientes, os elementos de padrão podem ser usados nas propriedades fill e stroke das formas SVG. Por exemplo, considere a marcação a seguir.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>

Nesse exemplo, o elemento pattern define um padrão que consiste em um quadrado azul pequeno alternado com um círculo amarelo minúsculo. A elipse que é especificada recebe um preenchimento do padrão. A imagem a seguir mostra como isso aparece no Internet Explorer 9.

Interatividade

O conteúdo SVG pode ser interativo — isto é, ele pode ser alterado em resposta à entrada do usuário. O Internet Explorer 9 oferece suporte aos recursos de interatividade de SVG, conforme definição no módulo Interatividade da especificação SVG 1.1 (2ª Edição), incluindo:

O Internet Explorer 9 também oferece suporte à interface do DOM SVGCursorElement do módulo Interatividade.

Além disso, o Internet Explorer 9 oferece suporte ao atributo focusable, conforme definição no módulo Interatividade da especificação SVG Tiny 1.2

A marcação a seguir mostra um exemplo bastante simples da interatividade de SVG em ação.

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
</svg>

Quando esse trecho é carregado, ele exibe um pequeno círculo vermelho.

Clicar no círculo faz com que seu tamanho aumente duas vezes.

O mesmo efeito pode ser obtido com os eventos mouseover e mouseout, que farão com que o círculo aumente e diminua apenas movendo o cursor sobre ele e fora dele.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
...

Vinculação e exibições

O SVG permite vinculação fora do conteúdo SVG com outras páginas, bem como exibições predefinidas dos documentos SVG. As exibições são úteis quando você desejar criar vínculos diretamente com, por exemplo, o close-up de um diagrama.

O Internet Explorer 9 oferece suporte à vinculação e a exibições de SVG, conforme especificação no módulo Vinculação da especificação SVG 1.1 (2ª Edição). Isso inclui suporte para os elementos a e view.

Também há suporte para as interfaces do DOM — SVGAElement e SVGViewElement — associadas do módulo Vinculação.

Vinculação

Assim como no HTML, o elemento a é usado para criar um hiperlink no SVG. Por exemplo, a marcação a seguir fornece um hiperlink em um retângulo.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
</a>

</svg>
Exibições

As exibições podem ser usadas para orientar o navegador a exibir uma imagem SVG de uma determinada maneira. Por exemplo, a marcação a seguir define um link para uma exibição.

...
<a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
</a>
<view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
...

Nesse exemplo, a exibição rect-view é definida como uma viewBox com as coordenadas fornecidas. Quando o link (o texto “Ir para Retângulo”) for clicado, a exibiçãorect-view aparecerá, revelando o retângulo vermelho.

A marcação a seguir define outro link para uma exibição.

...
<a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
</a>
<view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
...

Nesse exemplo, a exibição circle-view tem o atributo preserveAspectRatio definido como none. Isso significa que, embora a forma seja um círculo, ela não será dimensionada uniformemente para preencher o retângulo viewBox especificado quando a exibição é invocada. Em vez disso, ela será ampliada de maneira não uniforme para que a caixa delimitadora corresponda exatamente ao retângulo viewBox. Essa marcação aparece como se segue no Internet Explorer 9 quando a página é carregada pela primeira vez.

Quando você clica em “Ir para o Círculo”, a exibiçãocircle-view é invocada e o círculo é ampliado para preencher o retângulo viewBox. Isso a torna semelhante a uma elipse.

Pintura e cor

A pintura e a cor são componentes essenciais de SVG. O conceito de pintura abrange preenchimentos (cores sólidas, gradientes, padrões), traçados (linhas desenhadas com caminhos) e símbolos de marcador (aplicados ao fim dos segmentos de linha; por exemplo, pontas de seta), e também pode incorporar a opacidade. Os preenchimentos e traçados podem se aplicar a caminhos, textos e formas.

O Internet Explorer 9 apresenta suporte para pintura e cor de SVG, conforme definição no módulo Pintura: preenchimento, traçado e símbolos de marcador e no módulo Cor da especificação SVG 1.1 (2ª Edição). Isso inclui suporte para:

Também há suporte para as interfaces do DOM — SVGPaint e SVGMarkerElement — associadas do módulo Pintura.

Vários exemplos de preenchimentos e traçados no SVG são incluídos na seção Caminhos deste documento.

Caminhos

Os caminhos SVG são descrições de formas. Eles podem ser preenchidos, traçados (uma linha é desenhada com o caminho) ou usados como caminhos de recorte (cortes de outras formas).

O Internet Explorer 9 apresenta suporte para caminhos SVG, conforme definição no módulo Caminhos da especificação SVG 1.1 (2ª Edição). Isso inclui suporte para o elemento path, bem como para a propriedade d, que permite a análise dos dados do caminho.

As interfaces do DOM associadas do módulo Caminhos também contam com suporte.

O elemento path permite muitos cenários diferentes para o desenvolvedor. Veja a seguir apenas alguns exemplos simples. Depois de marcação, há um instantâneo do resultado correspondente no Internet Explorer 9.

Forma fechada com linhas retas e um preenchimento
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<path d="M 20 20 L 60 20 L 40 60 z"
   fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

</svg>

Caminho Bézier (quadrático)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Linha com arco
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

Texto

Os documentos SVG podem incluir texto. O texto é renderizado assim como os outros elementos gráficos no SVG, o que significa que as transformações do sistema coordenado, a pintura, o recorte e o mascaramento podem ser aplicados ao texto.

O Internet Explorer 9 oferece suporte à renderização de texto, conforme especificação no módulo Texto da especificação SVG 1.1 (2ª Edição).

O elemento text especifica os caracteres a serem desenhados. Como o SVG não quebra linhas automaticamente, você deve determinar as quebras de linha antecipadamente. Para ajustar as propriedades do texto (como fonte, espessura, cor, kerning e muitas outras) em uma linha de texto, o SVG fornece o elemento tspan.

O Internet Explorer 9 também oferece suporte às interfaces do DOM associadas do módulo Texto.

Novas ferramentas para desenvolvedores da Web

Esta seção primeiro descreve Sites fixos, uma nova maneira de fortalecer a conexão entre seu site e os usuários. Em seguida, ela descreve a nova maneira de ceder versões no Internet Explorer 9, para ajudar a solucionar problemas de compatibilidade na migração para a versão moderna do Internet Explorer. Em seguida, você lerá a respeito dos aprimoramentos das ferramentas para desenvolvedor do Internet Explorer, que foram incorporadas diretamente no navegador pela primeira vez no Internet Explorer 8.

Sites Fixos

Quando você aproveita sites fixos, os usuários se tornam ainda mais interessados no seu site. Os sites fixos apresentam um novo conjunto de ferramentas que destacam uma interface do usuários avançada, com um ícone Favoritos (favicon) ampliado, além dos botões Voltar e Avançar e outros elementos da interface que podem ser unificados com a marca e a aparência geral do site. A integração ao Windows 7 oferece às pessoas novas maneiras de vivenciar os sites de desenvolvedor usando as mais recentes APIs do Windows para criar listas de atalhos, barras de ferramentas em miniatura e notificações. (Os sites fixos têm suporte apenas na barra de tarefas do Windows 7.)

Fixando sites à barra de tarefas

Os usuários podem executar um destes procedimentos para fixar um site à barra de tarefas:

  • “Rasgar” uma guia clicando nela e arrastando-a até a barra de tarefas
  • Arraste o ícone de favoritos (favicon) da barra de endereço até a barra de tarefas
  • Arraste uma imagem personalizada com a classe “msPinSite” (uma imagem “arrastar para fixar”) para a barra de tarefas

Depois que um site é fixado, ele é renderizado com aprimoramentos personalizados, por exemplo, os botões Voltar e Avançar correspondem ao esquema de cores do site. Os sites também podem ser fixados ao menu Iniciar.

Listas de atalhos

As tarefas de lista de atalhos são ações específicas do aplicativo que são adaptadas a um site fixo. Elas se baseiam no mesmo recurso para aplicativos existente no Windows 7. Usando as tarefas de lista de atalhos, um site pode apresentar aos usuários os comandos usados com mais frequência. É possível definir tarefas de lista de atalhos com base nos recursos do site e nas ações principais que se espera de um usuário. As tarefas fornecem um conjunto de links estáticos que os usuários podem acessar a qualquer momento, mesmo que o Internet Explorer não esteja em execução. Para obter mais informações sobre as tarefas de listas de atalhos, consulte Como criar listas de atalhos dinâmicas no MSDN.

Barra de ferramentas em miniatura

Uma barra de ferramentas em miniatura é essencialmente um “controle remotoi” para seu site. A barra de ferramentas aparece sob a visualização em miniatura quando você focaliza um botão da barra de tarefas de um site fixo. Esse recurso é especialmente útil para sites que implementam reprodução de áudio ou vídeo, mas as barras de ferramentas em miniatura apresentam um grande potencial. Os botões da barra de ferramentas em miniatura podem incluir controles para controlar a reprodução, adicionar ou compartilhar favoritos, alterar os staus online, realizar compras instantâneas ou classificar páginas da Web. Para obter mais informações sobre a criação de barras de ferramentas em miniatura, consulte Como criar barras de ferramentas em miniatura no MSDN.

Notificações

Como em qualquer aplicativo do Windows 7, os sites fixos podem comunicar notificações e status aos usuários exibindo um ícone sobreposto ao botão da barra de tarefas do site fixo. Os ícones sobrepostos ajudam a chamar atenção para um site quando a exibição da janela do site fixo está bloqueada, por exemplo, quando a janela do navegador está minimizada ou bloqueada por outra janela. Você pode usar ícones sobrepostos para fornecer informações ou notificações de status importantes como status de rede, status online ou um novo email. Para obter mais informações sobre notificações, consulte Como fornecer notificações no MSDN.

Descobrindo os sites fixos

O Internet Explorer 9 notificará um usuário se o site pode ser fixado. O anúncio desses recursos é da competência do desenvolvedor. Há várias maneiras de se alertar os usuários sobre os recursos dos sites fixos em seu site, incluindo efeitos div, de surgimento, listas suspensas e faixas; imagens e ícones "arrastar para fixar"; além disso, você também pode oferecer uma demonstração que destaque seu site fixo depois que o usuário fixar o site pela primeira vez. Para obter mais informações sobre detectabilidade, consulte Como melhorar a detectabilidade no MSDN.

Para obter mais informações sobre instruções e amostras de código sobre sites fixos, consulte Sites fixos no Centro de Desenvolvimento do MSDN.

Para ver uma demonstração de sites fixos, consulte o site Test Drive do Internet Explorer 9.

Controle de versão da plataforma

O Internet Explorer 8 introduziu os modos de compatibilidade de documentos, que são uma extensão do modo de compatibilidade introduzido no Microsoft Internet Explorer 6. Os modos de documento permitem escolher o modo de renderização específico que o Internet Explorer usa para exibir suas páginas da Web e são descritos detalhadamente em Definindo a compatibilidade de documentos no MSDN.

Novo modo de documento

O Internet Explorer 9 adiciona um novo modo de documento — Modo de Padrões do Internet Explorer 9 — que permite o desempenho mais rápido, os dimensionamentos para lidar com as demandas dos aplicativos Web modernos e a implementação do suporte de padrões mais recentes.

Normalmente, o Internet Explorer 9 é executado no Modo de Padrões do IE9, a menos que seja especificado o contrário na página ou pelo servidor Web.

A melhor maneira de garantir que o Internet Explorer 9 renderize sua página no modo de documento mais recente é usar uma diretiva de padrões !DOCTYPE e nenhuma marca meta compatível com X-UA ou cabeçalho HTTP. Este é o !DOCTYPE para invocar o modo de Padrões do IE9.

<!DOCTYPE html>

Evidentemente, é possível usar o !DOCTYPE e a marca meta compatível com X-UA ou o cabeçalho HTTP para alterar o padrão de acordo com a necessidade.

Para determinar o modo de documento atual, pressione F12 para abrir as ferramentas para desenvolvedores F12 do Internet Explorer e observe o lado direito da barra de menus. Para ignorar o modo de documento, no menu Modo de Documento, clique em Padrões do Internet Explorer 9.

Cadeia de caracteres do UA (agente do usuário)

A cadeia de caracteres do UA (agente do usuário) identifica o navegador para hospedar servidores e fornece determinados detalhes do sistema. (Para obter mais informações sobre as cadeias de caracteres do UA, consulte Entendendo as cadeias de caracteres do agente do usuário no MSDN.) O Internet Explorer 9 é diferente das versões anteriores do Internet Explorer, pois ele envia a cadeia de caracteres do UA curta por padrão. Essa alteração melhora o desempenho geral, a interoperabilidade e a compatibilidade. O Internet Explorer 9 não enviará mais adições à cadeia de caracteres do UA feitas por outro software instalado no computador do usuário, como o .NET e outros.

O Internet Explorer 9 envia a nova cadeia de caracteres do UA do Internet Explorer 9. Há quatro alterações na cadeia de caracteres do UA do Internet Explorer 8 das quais os desenvolvedores devem estar cientes:

  1. A versão do aplicativo é incrementada do “Mozilla/4.0” para o “Mozilla/5.0” para correspondência com outros navegadores. Essa alteração sinaliza que o Internet Explorer 9 é um navegador interoperável.
  2. O token da versão é incrementado de “MSIE 8.0” para “MSIE 9.0”.
  3. O token do Trident é incrementado de “Trident/4.0” para “Trident/5.0”.
  4. O Internet Explorer 9 enviará a seguinte cadeia de caracteres do UA curta sem adições feitas por outro software que esteja instalado no computador.

Mozilla/5.0 (compatível; MSIE 9.0; Windows NT 6.1; Trident/5.0)

O Modo de Exibição de Compatibilidade no Internet Explorer 9 é mapeado para o Modo de Padrões do IE7, assim como ocorre no Internet Explorer 8. (Para obter mais informações sobre o Modo de Exibição de Compatibilidade, consulte Entendendo a lista do Modo de Exibição de Compatibilidade no MSDN.) Quando no Modo de Exibição de Compatibilidade, o Internet Explorer 9 envia a seguinte cadeia de caracteres do UA:

Mozilla/4.0 (compatível; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Para obter mais informações sobre a nova cadeia de caracteres do UA para o Internet Explorer 9, consulte a postagem do Blog da equipe do Internet Explorer " Introdução à cadeia de caracteres do agente do usuário do IE9".

Ferramentas para desenvolvedores F12

Para acessar as ferramentas para desenvolvedores F12 no Internet Explorer 9, pressione F12; ou, no menu Ferramentas, clique em Ferramentas para desenvolvedores F12. Se você usava as ferramentas para desenvolvedores no Internet Explorer 8, você perceberá os aprimoramentos dos recursos e as melhorias de desempenho imediatamente.

Guia Console

As ferramentas para desenvolvedores F12 no Internet Explorer 9 apresentam a guia Console para expor eventos de scripts. Quando você inspeciona scripts, são exibidos vários botões de alternância: Erro, Aviso e Mensagem. Cada botão exibe o número de mensagens de cada tipo.

Guia Rede

O Internet Explorer 9 adiciona uma ferramenta de inspeção de rede às suas ferramentas para desenvolvedores. Acesse a ferramenta clicando na guia Rede. Você poderá:

  • Capturar o tráfego de rede HTTP e HTTPS.
  • Exibir (e salvar) o conteúdo de solicitações e respostas capturadas.
  • Exibir detalhes extras sobre dados capturados, como informações de cookies, tamanhos, horários e cache.

Ferramenta de alternância do agente do usuário

Com a nova ferramenta de alternância do UA (agente do usuário), você pode modificar a cadeia de caracteres do UA que identifica o tipo e a versão do navegador para o servidor Web. (Para obter mais informações sobre a nova cadeia de caracteres do UA no Internet Explorer 9, consulte Cadeia de caracteres do UA (agente do usuário) neste documento.) A cadeia de caracteres do UA escolhida será enviada pela rede como um cabeçalho em cada solicitação. Para alterar a cadeia de caracteres do UA do navegador, no menu Ferramentas das ferramentas para desenvolvedores, aponte para Alterar cadeia de caracteres do agente do usuário e escolha o navegador cuja cadeia de caracteres do UA você deseja enviar.

Avaliação do desempenho no mundo real

Com as ferramentas para desenvolvedores F12 no Internet Explorer 9, agora você pode avaliar mais aspectos do desempenho do site do que nas versões anteriores do Internet Explorer. No entanto, você não pode avaliar o desempenho que os usuários de fato experimentam. Para resolver esse problema, alguns sites desenvolvem suas próprias bibliotecas que tentam avaliar o desempenho em tempo real nas páginas da Web, mas isso pode acrescentar sobrecarga que reduz o desempenho das páginas para os usuários. Acreditamos que a especificação WebTiming do W3C — que, na elaboração deste documento, está no estágio de “Rascunho” — é uma boa base conceitual para resolver esse problema de forma responsável. A funcionalidade WebTiming pode ser acessada no Internet Explorer 9 usando a interface window.msPerformance do DOM. Os desenvolvedores também podem habilitar a depuração de script nas ferramentas para desenvolvedores F12 e assim acessar o objeto window.msPerformance.

Para exibir uma demonstração do objeto window.msPerformance em uso, consulte o site Test Drive do Internet Explorer.

Histórico de revisão

março 16, 2010: Criado para a Visualização da Plataforma do Internet Explorer.

abril 15, 2010: Atualizado com informações sobre:

  • Suporte ao módulo Namespaces de CSS3
  • Suporte aos seletores de CSS3 adicionais
  • Mais detalhes de suporte do DOM
  • Mais detalhes de suporte a SVG, incluindo limitações de inserção
  • Suporte a perfis de cor do ICC

maio 5, 2010: Atualizado para a Visualização da Plataforma do Internet Explorer, Build 2, com informações sobre:

  • Mais detalhes de suporte do DOM
  • Novos recursos do DOM:
    • Novas APIs do Núcleo do DOM
    • HTML do DOM
    • Passagem do DOM
    • Novos eventos de L3 do DOM:
      • Evento DOMAttrModified
      • Evento DOMContentLoaded
      • Eventos de composição
  • Nova cadeia de caracteres do UA (agente do usuário)
  • Alterações no URI de dados
  • Adições das ferramentas para desenvolvedores: Guia Console e ferramenta de alternância do UA

junho 23, 2010: Atualizado para a Visualização da Plataforma do Internet Explorer, Build 3, com informações sobre:

  • Novos recursos de CSS3:
    • Novos recursos de plano de fundo e borda
    • Modelos de cor HSL e HSLA
    • Suporte a fontes de CSS3
    • Suporte a valores e unidades de CSS3
    • Novos valores da propriedade display
  • Novo suporte à Passagem de elemento do DOM
  • Novos recursos do HTML5:
    • Elementos vídeo, áudio e tela
    • Interface Seleção
  • Novo suporte ao Nível 2 da API de seletores:
    • Método matchesSelector
  • Novos recursos de SVG:
    • Recorte, mascaramento e composição
    • Gradientes e padrões
    • Interatividade
    • Vinculação e exibições
    • Pintura e cor
    • Texto

agosto 4, 2010: Atualizado para a Visualização da Plataforma do Internet Explorer, Build 4, com informações sobre:

  • “Chakra”, o novo mecanismo do JavaScript
  • Recursos aprimorados do DOM
  • Novo suporte para a especificação WebIDL
  • O objeto window.msPerformance
  • Detalhamento da seção tela com links para exemplos

15.09.10: Atualizado para o Internet Explorer 9 Beta com novos links e informações sobre:

  • DOMParser e XMLSerializer
  • Sites Fixos

28.10.10: Atualizado para a Visualização da Plataforma do Internet Explorer, Build 6, com informações sobre:

  • Transformações CSS 2D
  • Elementos semânticos do HTML5
  • Número da versão dos perfis de cor do ICC com suporte corrigido

10.02.11: atualizado para o Internet Explorer 9 Release Candidate com informações sobre:

  • Localização geográfica HTML5
  • Sites fixos (atualizado)
  • Modo de compatibilidade (atualizado)
  • Outras correções diversas do documento

18.02.11: atualizado com informações sobre:

  • Sites Fixos
  • HTML5 Canvas

14.03.11: atualizado para o Internet Explorer 9 (RTW):

  • texto de versão atualizada
  • ECMAScript 5 (links adicionados)
A Microsoft está realizando uma pesquisa online para saber sua opinião sobre o site. Se você optar por participar, a pesquisa online lhe será apresentada quando você sair do site.

Deseja participar?