Guía para desarrolladores de Internet Explorer 9

Contenido

Introducción

Rendimiento total del explorador

Compatibilidad de estándares web para el mismo marcado

Nuevas capacidades gráficas que aprovechan el poder de equipos Windows

Lista de nuevas características

Mayor interoperabilidad mediante compatibilidad con estándares

Hojas de estilo en cascada, Nivel 3 (CSS3)

CSS3 2D Transforms

Módulo de fondos y bordes CSS3

Módulo de color CSS3

Módulo de fuentes CSS3

Módulo de consultas de medios CSS3

Módulo de espacios de nombres CSS3

Módulo de valores y unidades CSS3

Selectores CSS3

Capacidades CSS adicionales

Módulo de visualización CSSOM

URI de datos

Mejoras del Modelo de objetos de documento

Presentación de DOM mejorado

Análisis y ejecución XML desde y hacia DOM

Modelo de objetos de documento (DOM) Niveles 2 y 3

DOM Principal (L2 y L3) y Vistas (L2)

Cruce seguro de elementos DOM

Eventos DOM L2 y L3

DOM L2 HTML

Estilo DOM L2

Cruce seguro e intervalo DOM L2

Tratamiento de espacios en blanco DOM

ECMAScript 5

HTML5

Geolocalización basada en HTML5

Elementos video y audio HTML5

Elemento lienzo HTML5

Mejoras del análisis de HTML

API de selección de HTML5

Elementos semánticos de HTML5

Perfiles de color ICC

Nivel 2 API de selectores

Scalable Vector Graphics (SVG)

Formas básicas

Recorte, enmascaramiento y composición

Coordinación de sistemas, transformaciones y unidades

Estructura de documentos

Degradado y modelos

Interactividad

Vinculación y vistas

Pintura y color

Trazados

Texto

Nuevas herramientas para desarrolladores web

Sitios anclados

Control de versiones de plataforma

Nuevo modo de documento

Cadena de agente de usuario (UA)

Herramientas para desarrolladores

Ficha Consola

Ficha Red

Herramientas de cambio de agente de usuario

Medición del rendimiento real

Historial de revisiones

Introducción

Bienvenido a Windows Internet Explorer 9. Como desarrollador, desea conocer la información más reciente sobre los exploradores que usan usted y sus clientes. Internet Explorer 9 es la versión más reciente del explorador web más popular del mundo. Diseñamos Internet Explorer 9 para ayudar a la comunidad de desarrollo web a crear aplicaciones enriquecidas e interoperables que cumplen con los estándares mediante el suministro de plataformas, herramientas y características para la Web futura.

Este documento le muestra a usted, desarrollador web con clientes que confían en Internet Explorer, cómo usar las nuevas características en sus sitios web y sus aplicaciones. Asegúrese de consultar el sitio de Test Drive incluido para obtener una demostración de dichas características en acción. Para suministrar comentarios y ver más información acerca de las novedades de Internet Explorer 9, vea las Notas de la versión, además de Novedades de Internet Explorer 9 en MSDN. Para conocer las últimas noticias sobre Internet Explorer 9, consulte el blog del equipo de IE. Y, como siempre, para obtener la información más reciente para desarrolladores sobre Internet Explorer, visite Internet Explorer Developer Center en MSDN.

Internet Explorer 9 se ha diseñado para ayudar a los desarrolladores a comprender mejor el progreso de Internet Explorer 9 en las siguientes dimensiones de la plataforma:

• Rendimiento total del explorador
• Compatibilidad de estándares web para habilitar el mismo marcado a fin de trabajar de forma idéntica en los diferentes exploradores
• Nuevas capacidades gráficas que aprovechan el poder de equipos Windows

Rendimiento total del explorador

El rendimiento del explorador incluye varios subsistemas dentro del explorador. Los diferentes sitios (y las diferentes actividades dentro del mismo sitio) cargan al explorador y le demandan de manera diferente. Por ejemplo, una aplicación web, como Windows Live Mail o Microsoft Office Web Apps, emplea subsistemas de explorador de formas completamente diferentes en comparación con un sitio de agregación de noticias, como Bing News o Digg.

Presentación de “Chakra”, el nuevo motor de JavaScript

El rendimiento del motor de secuencia de comando es solamente una parte de la imagen general del rendimiento del explorador. El rendimiento de scripts en Internet Explorer 8 ha mejorado exponencialmente en comparación con Internet Explorer 7, y “Chakra”, el nuevo motor de JavaScript, repite esta mejora en Internet Explorer 9. El motor de Chakra interpreta, compila y ejecuta códigos en paralelo y aprovecha los múltiples núcleos del equipo, cuando están disponibles. Para obtener más detalles, consulte "El nuevo motor de JavaScript en Internet Explorer 9" en el blog del equipo de IE.

Ciertamente, el equipo de Internet Explorer observa las características de rendimiento de todos los subsistemas del explorador en la forma en que los sitios reales las utilizan. El objetivo es suministrar un mejor rendimiento global a los sitios reales, no simplemente puntos de referencia.

Compatibilidad de estándares web para el mismo marcado

Internet Explorer suministra capacidades interoperables y enriquecidas a los desarrolladores web. El equipo de Internet Explorer sabe que no desea volver a escribir y probar sus sitios web una y otra vez; la adopción de estándares por parte de proveedores de exploradores es una buena manera de alcanzar dicho objetivo.

Con Internet Explorer 8, el equipo de Internet Explorer suministró una implementación altamente interoperable de CSS 2.1 y, al mismo tiempo, contribuyó con un conjunto de pruebas de más de 7200 pruebas a World Wide Web Consortium (W3C). Esto es importante. Sin pruebas de validación, la implementación consistente de estándares representa un mayor desafío y resulta más difícil para los desarrolladores del sitio confiar en estas.

Internet Explorer 9 realiza inversiones significativas en la compatibilidad y la interoperabilidad de estándares. Por ejemplo, Internet Explorer 9 incluye mayor compatibilidad con un número de características CSS3, nueva compatibilidad con HTML5 y compatibilidad integrada con SVG, por primera vez en Internet Explorer.

Nuevas capacidades gráficas que aprovechan el poder de los equipos con Windows

El ecosistema de Windows ofrece una increíble innovación de hardware. Con Internet Explorer 9, los desarrolladores web ahora pueden aprovechar dicha innovación con representación de gráficos y texto controlada por hardware.

Internet Explorer 9 usa la familia DirectX de interfaces de programación de aplicaciones (API) de Windows para permitir varios avances para los desarrolladores web. Hemos trasladado la representación de todos los gráficos y textos del equipo a la tarjeta gráfica mediante el uso de Direct2D y DirectWrite. La aceleración de hardware gráfica significa que los sitios enriquecidos con gran cantidad de gráficos pueden procesarse más rápidamente en Windows economizando simultáneamente el uso del procesador. Además, puede aprovechar estos cambios de forma automática mientras crea sitios con los mismos estándares a los que está acostumbrado.

Lista de nuevas características

Para su comodidad, esta lista incluye todas las nuevas características para desarrolladores de Internet Explorer 9. Para obtener información sobre las compilaciones preliminares de Internet Explorer 9, consulte el Historial de revisiones.

• Compatibilidad con CSS3 mejorada.
• Esquinas redondeadas mediante la propiedad border-radius
• Características de borde y fondo CSS3
• La propiedad opacity
• Modelos de color RGBA, HSL y HSLA
• Propiedades de fuentes CSS3 y nuevos formatos de fuentes web
• Consultas de medios CSS3
• Espacios de nombres CSS3
• Valores y unidades CSS3
• Selectores CSS3
• Compatibilidad de URI de datos mejorada
• Mejoras del Modelo de objetos de documento (DOM)
• Capacidades DOM mejoradas
• Análisis y ejecución XML desde y hacia DOM
• Nueva compatibilidad con DOM Nivel 2 (L2) y Nivel 3 (L3) y comportamientos actualizados
• DOM Principal (L2, L3) y Vistas (L2)
• Cruce seguro de elementos DOM
• Eventos DOM (L2, L3)
• DOM L2 HTML
• Estilo DOM L2
• Cruce seguro e intervalo DOM L2
• Nuevo comportamiento de tratamiento de espacios en blanco
• Mejoras de características ECMAScript
• Compatibilidad HTML5 incorporada
• Geolocalización
• Los elementos de video y audio
• El elemento canvas
• La interfaz Selection
• Análisis mejorado de elementos HTML
• API de selección de texto
• Compatibilidad con el perfil de color ICC v2 y v4 en imágenes
• Nueva compatibilidad con selectores API Nivel 2 para el método msMatchesSelector
• Características SVG
• Formas básicas: rectángulos, círculos, elipses, líneas, polilíneas y polígonos
• Recorte, enmascaramiento y composición
• Coordinación de sistemas, transformaciones y unidades
• Funcionalidad de extensibilidad, metadatos y estructura del documento
• Degradados y modelos
• Interactividad
• Vinculación y vistas
• Pintura y color
• Rutas de acceso, que incluyen capacidades completas del elemento path y el atributo d
• Texto
• Capacidades adicionales de control de versiones de plataformas
• Sitios anclados
• Nuevo modo de documento
• Nueva cadena de agente de usuario (UA)
• Incorporación de herramientas para desarrolladores
• Mejoras de rendimiento
• Ficha Consola
• Ficha Red
• Herramienta del modificador de agente de usuario
• Medición del rendimiento real

Mayor interoperabilidad mediante compatibilidad con estándares

Importante   La compatibilidad con los nuevos estándares presente en Internet Explorer 9 requiere que el explorador esté en el Modo de estándares Internet Explorer 9 (“Modo IE9”). La mejor manera de lograr esto es usar una directiva !DOCTYPE estándar y ningún encabezado HTTP ni etiqueta meta X-UA-Compatible. El !DOCTYPE para invocar el modo IE9 es el siguiente:

<!DOCTYPE html>

Por supuesto, puede usar el encabezado HTTP o la etiqueta meta X-UA-Compatible y !DOCTYPE para cambiar el valor predeterminado según corresponda.

Para determinar el modo de documento actual, presione F12 para abrir las herramientas para desarrolladores de Internet Explorer y, a continuación, observe el lado derecho de la barra de menús. Para omitir el modo de documento, en el menú Modo de documento, haga clic en Estándares de Internet Explorer 9.

Consulte la sección Control de versiones de plataforma de esta guía para obtener las actualizaciones sobre comportamientos del modo de documento en Internet Explorer 9.

Hojas de estilo en cascada, Nivel 3 (CSS3)

Internet Explorer 9 posee mayor compatibilidad con Hojas de estilo en cascada (CSS) que cualquier otro explorador anterior de Microsoft. Como continuación del trabajo realizado en Internet Explorer 8, que volvió a Internet Explorer totalmente compatible con la especificación CSS2.1, Internet Explorer 9 incorpora compatibilidad con muchos componentes de CSS3.

Nota  Es importante recordar que varios módulos CSS3 aún se encuentran en las fases Borrador de trabajo o Última llamada. Pueden modificarse significativamente hasta alcanzar la fase Recomendación de candidato. Para obtener más información, consulte los módulos del borrador CSS3 más recientes.

CSS3 2D Transforms

Internet Explorer 9 incorpora compatibilidad con CSS3 2D Transforms. CSS 2D Transforms permite que los elementos procesados por CSS se transformen en espacio bidimensional.

Internet Explorer 9 es compatible con las siguientes propiedades de 2D Transforms:

• La propiedad -ms-transform aplica una o más funciones de transformación bidimensional a un elemento.
• La propiedad -ms-transform-origin establece el origen de transformación de un elemento. Esta propiedad resulta útil cuando se desea modificar el origen predeterminado (el centro).

Nota:   Debido a que el módulo de CSS 2D Transforms aún no ha alcanzado el estado de Recomendación candidata de W3C, tanto la propiedad transform como la propiedad transform-origin deben estar precedidas por el prefijo -ms- para que Internet Explorer 9 pueda reconocerlas. Para obtener más información sobre prefijos específicos de proveedores, consulte “IE9, prefijos de proveedores y desarrolladores” en el blog del equipo de IE.

Internet Explorer 9 es compatible con las siguientes funciones de transformación para su uso con la propiedad -ms-transform:

• La función matrix(a,b,c,d,e,f) especifica una transformación de 2D en la forma de una matriz de transformación de seis valores (desde la a hasta la f). 
• La función translate(tx,[ty]) especifica una traducción de 2D por medio del vector [tx,ty], en el cual tx es el primer parámetro del valor de traducción y ty es el segundo parámetro opcional del valor de traducción. Si ty no se especifica, su valor es cero. (Los parámetros del valor de traducción pueden ser porcentajes o longitudes).
• La función translateX(tx) especifica una traducción en función de la cantidad determinada en la dirección x.
• La función translateY(ty) especifica una traducción en función de la cantidad determinada en la dirección y.
• La función scale(sx,[sy]) especifica una operación de escala de 2D por medio del vector de escala [sx,sy] que describen los dos parámetros. Si no se brinda el segundo parámetro, toma un valor igual al primero.
• La función scaleX(sx) especifica una operación de escala por medio del vector de escala [sx,1], en el cual sx constituye el parámetro.
• La función scaleY(sy) especifica una operación de escala por medio del vector de escala [1,sy], en el cual sy constituye el parámetro.
• La función rotate(angle) especifica la rotación de 2D en función del ángulo especificado en el parámetro que determina el origen del elemento, según lo define la propiedad transform-origin.
• La función skewX(ax) especifica una transformación de sesgado en el eje x en función del ángulo determinado.
• La función skewY(ay) especifica una transformación de sesgado en el eje y en función del ángulo determinado.
• La función skew(ax,ay) especifica la transformación de sesgado en los ejes x e y. El primer parámetro del ángulo especifica el sesgado en el eje x. El segundo parámetro del ángulo especifica el sesgado en el eje y. Si no se especifica el segundo parámetro, se le asigna el valor cero al ángulo y (es decir, no hay sesgado en el eje y).

La propiedad -ms-transform-origin acepta uno o dos valores. Cada valor puede ser una palabra clave, una longitud o un porcentaje. Si no se configura la propiedad -ms-transform-origin, la transformación se inicia en el centro (igual a un valor -ms-transform-origin de 50% 50%).

• El primer valor indica la posición horizontal (la posición en el eje x), y puede ser negativo. Esta valor puede ser un valor de longitud (en cualquiera de las unidades de longitud que se admiten), un porcentaje (del largo total del cuadro) o una de las siguientes tres palabras clave: izquierda (igual a 0% o a una longitud cero), centro (igual al 50% o a la mitad del largo del cuadro) o derecha (igual al 100% o al largo total del cuadro).
• El segundo valor indica la posición vertical (la posición en el eje y), y puede ser negativo. Esta valor puede ser un valor de longitud (en cualquiera de las unidades de longitud que se admiten), un porcentaje (de la altura total del cuadro) o una de las siguientes tres palabras clave: superior (igual a 0% o a una altura cero), centro (igual al 50% o a la mitad de la altura del cuadro) o inferior (igual al 100% o a la altura total del cuadro).

Si se especifica un valor solamente, se asume que el segundo valor le corresponde al centro.

Analice el siguiente lenguaje de marcado:

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

En Internet Explorer 9, la configuración de la propiedad -ms-transform-origin en 60% 100% establece el punto de origen de la transformación al 60% de la longitud y al 100% de la altura del elemento que se desea transformar. La propiedad -ms-transform primero transfiere el elemento 200 pixeles en la dirección de x y 100 pixeles en la dirección de y. Luego escala el elemento en un 75%. Finalmente, rota el elemento unos 40 grados en sentido horario en torno al punto de origen determinado por la propiedad -ms-transform-origin.

Para obtener más información sobre CSS3 2D Transforms, consulte MSDN.

Módulo de fondos y bordes CSS3

Internet Explorer 9 incorpora compatibilidad con varias características del Módulo de bordes y fondos CSS3. La nueva característica más notable, las propiedades border-radius, es también la característica de borde CSS más solicitada. Internet Explorer 9 también incorpora compatibilidad con las siguientes propiedades CSS3 nuevas:

• background-clip
• background-origin
• background-size
• box-shadow

Internet Explorer 9 también incorpora funcionalidad con las siguientes propiedades de fondo y de borde CSS existentes:

• background-color: Compatibilidad con Color CSS3.
• background-image: Compatibilidad con diferentes valores e imágenes SVG.
• background-repeat: Compatibilidad con diferentes valores, además del valor space y round.
• background-attachment: Compatibilidad con diferentes valores, además del valor local .
• background-position: Compatibilidad con diferentes valores.
• background: Actualización para CSS3.
• border-color: Compatibilidad con Color CSS3.

Las propiedades border-radius

Las propiedades border-radius le permiten curvar las esquinas de bordes al "reemplazar" esencialmente las esquinas rígidas con un cuarto de elipse y especificar el radio de cada elipse. Las propiedades consisten en lo siguiente:

• border-radius (El valor dado especificará el radio de las cuatro esquinas de un borde).
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius

Por ejemplo, observe el siguiente marcado:

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

De esta manera, se generará lo siguiente al aplicarse a un bloque de texto.

Módulo de color CSS3

Internet Explorer 9 incorpora compatibilidad con el módulo de color CSS3. Este módulo incluye compatibilidad con los modelos de color RGBA, HSL y HSLA; la propiedad opacity y la palabra clave currentColor . Internet Explorer 9 también amplía la compatibilidad con la palabra clave transparente .

Modelo de color RGBA

Se ha ampliado el Modelo de color RGB para incluir un canal alfa o transparencia. El formato de un valor RGBA es rgba(rojo,verde,azul,alfa). Los componentes rojo, verde y azul son idénticos a los del modelo de color RGB y se expresan como enteros o porcentajes. El componente alfa se expresa como un valor entre 0,0 (completamente transparente) y 1,0 (completamente opaco).

Por ejemplo, para definir el color de fondo en rojo con un 50% de transparencia, puede incluir cualquiera de las dos declaraciones CSS siguientes en su hoja de estilos:

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

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

Tenga en cuenta que, si bien los valores RGB admiten la notación hexadecimal, los valores RGBA no lo hacen.

Modelo de color HSL

Internet Explorer 9 es compatible con los valores de color matiz-saturación-claridad (HSL) del módulo de color CSS3. En el modelo de color HSL, el “matiz” está definido como el ángulo de color indicado en la rueda de colores (por ejemplo, el rojo es 0 o 360, el verde es 120 y el azul es 240). La “saturación” y la “claridad” están expresadas como porcentajes. Por ejemplo, la siguiente declaración de CSS define un fondo rojo:

background-color: hsl(0,100%,50%);

Modelo de color HSLA

Internet Explorer 9 también amplía el modelo de color HSL con un canal alfa. Al igual que el modelo RGBA, el canal alfa se expresa como un valor entre 0,0 y 1,0. Por ejemplo, la siguiente declaración de CSS define un fondo rojo con un 50% de transparencia:

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

La propiedad opacity

Internet Explorer 9 incorpora la propiedad opacity del módulo de color CSS3, que le permite controlar la transparencia en el nivel de elemento. En forma similar al componente alfa de los valores RGBA, el valor opacity es un número con un intervalo entre 0,0 (completamente transparente) y 1,0 (completamente opaco). La propiedad opacity está disponible en todos los elementos.

El siguiente ejemplo muestra la propiedad opacity en el color azul marino, con valores de opacidad en incrementos de 0,2 desde 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 ejemplo genera el siguiente resultado para div de 25 × 125 píxeles:

Palabras clave de color

El módulo de color CSS3 realiza la lista de palabras clave de color para CSS idéntica a la de SVG 1.0. Si bien la compatibilidad con SVG es nueva en Internet Explorer 9, este cambio se implementó en Internet Explorer 8.

Internet Explorer 9 incorpora la palabra clave currentColor del módulo de color CSS3, que indica el valor actual de la propiedad color en cualquier propiedad que acepta el color. Cuando se define en la propiedad color misma, currentColor es equivalente a color:inherit.

Internet Explorer 9 también amplía el uso de la palabra clave transparente más allá de las propiedades border-color y background-color. Ahora puede usarse con cualquier propiedad que acepte la propiedad color.

Módulo de fuentes CSS3

El mayor control tipográfico ha sido una característica constante de cada nueva versión de CSS. Al mismo tiempo, la falta de un formato de fuente web interoperable puede ser frustrante. Internet Explorer 9 mejora la compatibilidad existente con las fuentes CSS para suministrar compatibilidad con el Módulo de fuentes CSS3. También incorpora compatibilidad con Web Open Font Format (WOFF) y fuentes TrueType sin formato.

Propiedades de fuentes

La propiedad font-weight se ha actualizado de forma que Internet Explorer 9 calcula los espesores de fuente, según se especifica en el Módulo de fuentes CSS3.

La propiedad font-size se ha actualizado de forma que cada factor de escala de la palabra clave esté definido en el Módulo de fuentes CSS3. Asimismo, los tamaños de encabezado HTML y palabras clave están ahora asignados según se especifica en el Módulo de fuentes CSS3.

La propiedad font-stretch es nueva en Internet Explorer 9 y permite seleccionar una fuente normal, condensada o ampliada en la familia de fuentes. Esta propiedad también está disponible como descriptor de regla @font-face.

La regla @font-face

La regla @font-face permite la vinculación de fuentes. Esto significa que una hoja de estilos puede hacer referencia a un archivo de fuentes específico para que el explorador descargue y use. Por ejemplo, considere el siguiente marcado.

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

En este ejemplo, la regla @font-face indica al explorador que vaya a la dirección URL especificada en el descriptor src para descargar el archivo de fuentes que contiene la fuente especificada. En Internet Explorer 8 y versiones anteriores, el descriptor src se ignoraba de manera incorrecta si incluía una cadena format opcional, tal como la que se muestra en el ejemplo anterior. En Internet Explorer 9, el descriptor src se analiza del modo esperado.

Internet Explorer 9 también incorpora compatibilidad con el descriptor unicode-range, que le permite especificar el intervalo de los caracteres Unicode compatibles con una fuente dada. Por ejemplo, el siguiente ejemplo de código especifica el 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 fuentes web

Microsoft creó Internet Explorer 9 para maximizar las opciones de fuentes web. Con tal fin, hemos realizado lo siguiente:

• Compatibilidad con versiones anteriores con soporte continuo para Embedded OpenType (EOT)
• Compatibilidad incorporada para Web Open Font Format (WOFF), que vuelve a empaquetar archivos de fuente basados en sfnt (fuentes TrueType, OpenType y Open Font Format) al comprimir en forma individual cada tabla mediante el uso de un formato de compresión ZIP
• Compatibilidad incorporada para fuentes TrueType sin formato instalables (sin definición de bits de permiso de incrustación)

Para observar un ejemplo de fuentes web en Internet Explorer 9, consulte las demostraciones “Fuentes web” o “Más fuentes web” en el sitio Internet Explorer Test Drive

Para obtener más información sobre las fuentes CSS3 en Internet Explorer 9, consulte MSDN.

Módulo de consultas de medios CSS3

El Módulo de consultas de medios CSS3 especifica los métodos que permiten a los desarrolladores web definir el ámbito de una hoja de estilos en un conjunto de capacidades precisas de dispositivos. Por ejemplo, es posible que desee diseñar páginas de forma diferente para los usuarios que examinan un dispositivo móvil (que tiene una pantalla muy pequeña, paleta de colores limitada, baja resolución, etc.) frente a una netbook (que tiene una pantalla pequeña, paleta de colores completa, alta resolución, etc.) frente a un equipo estándar (que tiene una pantalla grande, paleta de colores completa, alta resolución, etc.). La lista completa de propiedades de medios compatibles con consultas de medios CSS3 incluye width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome y resolution.

La siguiente declaración es una consulta de medios típica, mediante la regla @media:

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

En este caso, screen indica el tipo de medios de destino y max-width es la propiedad de medios de destino. La declaración indica que las reglas especificadas (sin borde en elementos div ) solamente se aplicarán cuando la página se muestra en una pantalla con un espesor de, al menos, 400 píxeles. Puede usar propiedades de medios en forma conjunta para crear consultas aún más específicas, como la siguiente:

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

Esta declaración aplica las reglas especificadas cuando el medio es una pantalla con un espesor de hasta 400 píxeles y una altura de hasta 600 píxeles.

Compruebe las consultas de medios en acción en el sitio de Internet Explorer Test Drive.

Internet Explorer 9 incorpora compatibilidad con consultas de medios en CSS, HTML, XML y XHTML. Para obtener más información sobre las consultas de medios en Internet Explorer 9, consulte MSDN.

Módulo de espacios de nombres CSS3

Internet Explorer 9 es compatible con gran parte del Módulo de espacios de nombres CSS3. Los espacios de nombres CSS permiten a un desarrollador declarar un espacio de nombres predeterminado para un archivo CSS. Esto es, de manera predeterminada, cualquier selector de atributo o elemento que también use dicho espacio de nombres.

Los espacios de nombres CSS también permiten a un desarrollador crear prefijos de nombre de espacios que, luego, pueden usarse en un archivo CSS. Internet Explorer 9 también le permite declarar un espacio de nombres que se orienta a elementos SVG.

La regla-arroba @namespace

La regla-arroba @namespace declara un espacio de nombres XML (y, de forma opcional, su prefijo) y lo asocia con una cadena que representa un nombre de espacio de nombres. Por ejemplo, la siguiente regla declara un espacio de nombres predeterminado:

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

El espacio de nombres predeterminado se aplica a los nombres que no tienen un componente de espacio de nombres explícito.

Si se declara una regla @namespace con un prefijo, el prefijo puede usarse para nombres con espacio de nombres. Por ejemplo, dada la siguiente declaración de espacio de nombres para un espacio de nombres prfx…

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

…el siguiente selector coincide con los elementos E en el espacio de nombres al que hace referencia el prefijo prfx:

prfx|E

El siguiente ejemplo es levemente más complejo:

@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;}

En este ejemplo, se crearon dos prefijos de espacio de nombres. En primer lugar, los elementos p en cualquier espacio de nombres se colorean con rojo. Cualquier elemento p en el espacio de nombres prfx luego, se vuelve a colorear con azul y los elementos p en el espacio de nombres msft se vuelven a colorear con verde.

El siguiente ejemplo designa un elemento SVG.

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

Al usar el espacio de nombres y la declaración de este ejemplo, todos los círculos creados con SVG se rellenarán con color rojo.

Para obtener más información, consulte la página de referencia de la regla @namespace en MSDN.

Módulo de valores y unidades CSS3

Internet Explorer 9 incorpora mayor compatibilidad con varios de los nuevos valores y unidades descritos en el Módulo de valores y unidades CSS3. La mayoría de estos nuevos valores y unidades son necesarios para brindar soporte a otras características CSS3 descriptas en este documento.

Internet Explorer 9 incorpora compatibilidad con los nuevos valores y unidades siguientes:

• deg: grados (unidad de ángulo)
• grad: gradientes (unidad de ángulo)
• rad: radianes (unidad de ángulo)
• turn: rotaciones (unidad de ángulo)
• ms: milisegundos (unidad de tiempo)
• s: segundos (unidad de tiempo)
• rem: tamaño de fuente del elemento raíz (unidad de longitud relativa)
• vw: ancho de ventanilla (unidad de longitud relativa)
• vh: altura de ventanilla (unidad de longitud relativa)
• vm: el menor tamaño entre ancho o altura de ventanilla (unidad de longitud relativa)
• ch: ancho cero (ancho de glifo cero en la fuente de representación; unidad de longitud relativa)

Asimismo, Internet Explorer 9 actualiza la función attr() que se usa para contenido generado. Ahora puede aplicarse en cualquier propiedad y aceptar varios argumentos.

La siguiente función CSS3 es nueva para Internet Explorer 9:

• calc(): calcula los valores usando operadores aritméticos y puede usarse siempre que se permitan valores de longitud

Para obtener más información acerca de las funciones CSS, consulte Referencia de valores y unidades CSS en MSDN.

Selectores CSS3

Internet Explorer 9 admite las incorporaciones en la sintaxis del selector CSS especificado en la Recomendación propuesta para selectores CSS3. Aquí se enumeran los selectores nuevos de Internet Explorer 9. Para obtener información detallada y completa acerca de la compatibilidad de selectores en Internet Explorer, consulte Compatibilidad con CSS e Internet Explorer en MSDN.

Para obtener más información, consulte la sección de referencia de Selectores CSS en MSDN.

Para ver un ejemplo de selectores CSS3 en acción, visite el sitio Internet Explorer Test Drive.

Pseudoclases estructurales

Las pseudoclases estructurales permiten la selección en base a información adicional en el árbol de documentos que no puede seleccionarse mediante combinaciones o selectores simples.

A continuación, se selecciona un elemento E que es la raíz del documento:

E:root 

A continuación, se selecciona un elemento E que es el número de elemento secundario de su elemento principal:

E:nth-child(n)

A continuación, se selecciona un elemento E que es el número de elemento secundario de su elemento principal, contando desde el último:

E:nth-last-child(n) 

A continuación, se selecciona un elemento E que es el número de elemento del mismo nivel de su tipo:

E:nth-of-type(n) 

A continuación, se selecciona un elemento E que es el número de elemento del mismo nivel de su tipo, contando desde el último:

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

A continuación, se selecciona un elemento E que es el último elemento secundario de su elemento principal:

E:last-child 

A continuación, se selecciona un elemento E que es el primer elemento del mismo nivel de su tipo:

E:first-of-type 

A continuación, se selecciona un elemento E que es el último elemento del mismo nivel de su tipo:

E:last-of-type 

A continuación, se selecciona un elemento E que es el único elemento secundario de su elemento principal:

E:only-child

A continuación, se selecciona un elemento E que es el único elemento del mismo nivel de su tipo:

E:only-of-type

A continuación, se selecciona un elemento E que no tiene elementos secundarios (incluidos nodos de texto):

E:empty

Pseudoclase target (destino)

La pseudoclase de destino target selecciona el elemento de destino del URI de referencia. Se utiliza un identificador de fragmentos para identificar una ubicación dentro de una página y se forma usando un signo de número seguido de un identificador de anclaje, por ejemplo, http://www.example.com/mypage.html#section_3.

A continuación, se selecciona el elemento div de clase importante que es el elemento de destino del URI de referencia. Si el URI del documento no tiene identificador de fragmentos, no hay elemento de destino.

div.important:target

El elemento UI indica las pseudoclases

El elemento UI indica las pseudoclases que se usarán para seleccionar elementos UI (controles de formulario, como botones de opción o casillas de selección) que se encuentran en un estado específico: habilitado, deshabilitado o seleccionado (marcado).

A continuación, se selecciona un elemento E de control de formularios que está habilitado:

E:enabled

A continuación, se selecciona un elemento E de control de formularios que está deshabilitado:

E:disabled 

A continuación, se selecciona un elemento E de control de formularios que está seleccionado:

E:checked 

La pseudoclase :indeterminate (indeterminado) selecciona botones de opción y casillas de selección cuyos estados de alternación no pueden determinarse; no están marcados (seleccionados) ni desmarcados (desactivados). A continuación, se selecciona un elemento E de control de formularios cuyo estado no puede determinarse:

E:indeterminate

Nota La pseudoclase :indeterminate (indeterminado) ya no está definida en la especificación CSS3 actual pero es compatible con varios exploradores populares.

La pseudoclase de negación

La pseudoclase de negación toma un selector simple como un argumento para seleccionar elementos que no están seleccionados por dicho argumento. A continuación, se selecciona un elemento E que no coincide con el selector simple s:

E:not(s)

El pseudoelemento de fragmentos de elemento UI

El pseudoelemento de fragmentos de elemento UI, ::selection (selección), se usa para seleccionar cualquier parte de la página que el usuario haya resaltado, incluido texto dentro de un campo de texto modificable. Este pseudoelemento puede aplicarse a las propiedades color y background-color. A continuación, se selecciona cualquier texto seleccionable por parte del usuario dentro de un elemento E:

E::selection 

Nota El pseudoelemento ::selection (selección) ya no está definido en la especificación CSS3 actual pero es compatible con varios exploradores populares.

Capacidades CSS adicionales

Se ha implementado cierta compatibilidad con el borrador de trabajo del módulo de visualización del modelo de objetos (OM) CSS en Internet Explorer 9.

Módulo de visualización CSSOM

El Módulo de visualización CSSOM define las API que permiten a los desarrolladores web inspeccionar y cambiar mediante programación las propiedades visuales de un documento y su contenido, incluida la posición del cuadro de diseño, el ancho de ventanilla y el desplazamiento de elemento. Internet Explorer 8 incorporó compatibilidad con parte de este módulo. Internet Explorer 9 amplía la compatibilidad con una parte aún mayor de las API de visualización CSSOM:

• Interfaz ClientRect (TextRectangle)
  • Propiedad width
  • Propiedad height
• Agregados a la interfaz Range
  • Método getBoundingClientRect
  • Método getClientRects
• Interfaz Screen
  • Propiedad pixelDepth
• Interfaz Screenview
  • Propiedad innerWidth
  • Propiedad innerHeight
  • Propiedad pageXOffset
  • Propiedad pageYOffset
  • Propiedad screenX
  • Propiedad screenY
  • Propiedad outerWidth
  • Propiedad outerHeight

URI de datos

El URI de datos es una manera de insertar datos directamente en el contexto de una página web. El ejemplo más común es una imagen pequeña insertada en una página web, como la siguiente:

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

Cuando se lo coloca en el atributo src de un elemento img, este texto inserta de manera eficaz la imagen en el marcado de la página. Internet Explorer 8 incorporó los URI de datos en Internet Explorer.

Con Internet Explorer 9, los desarrolladores ahora pueden usar un URI de datos en el atributo src de un elemento script. Además, el límite de tamaño de los URI de datos se ha incrementado de 32 kilobytes (KB) en Internet Explorer 8 a 4 gigabytes (GB) en Internet Explorer 9.

Mejoras del Modelo de objetos de documento (DOM)

Internet Explorer 9 incluye un Modelo de objetos de documento (DOM) considerablemente mejorado. Además de la compatibilidad adicional con World Wide Web Consortium (W3C) DOM Nivel 2 (L2) y L3, Internet Explorer 9 incluye un DOM mejorado, así como un tratamiento de espacios en blanco mejorado.

Presentación de DOM mejorado

El DOM mejorado en Internet Explorer 9 mejora el rendimiento general del Modo de estándares Internet Explorer 9 (modo IE9) acelerando la capa de ejecución de scripts entre "Chakra", el nuevo motor de JavaScript y el motor de diseño de Trident, y trasladando los puntos de entrada de DOM al motor de Chakra. Para obtener más información sobre el modo IE9, consulte Mayor interoperabilidad mediante compatibilidad con estándares en este documento. El DOM mejorado también suministra simultáneamente la jerarquía de objeto de herencia DOM correcto conforme a las especificaciones W3C DOM L2 y L3.

Los tipos de objeto DOM mejorados se reflejan ahora en las herramientas para desarrolladores F12 al ejecutar las páginas en el Modo de estándares Internet Explorer 9. Para obtener más información acerca de las nuevas herramientas para desarrolladores F12 en Internet Explorer 9, consulte las Herramientas para desarrolladores F12 en este documento. En lugar de mostrar los tipos COM heredados (que incluyen diversos objetos para presentar e interfaces), las páginas en modo IE9 informan los nombres reales de tipo de objeto COM mejorado en uso por parte del motor de Chakra, que se alinea con los estándares W3C DOM L2 y L3 (por ejemplo, NodeList, DocumentType, HTMLBodyElement, etc.).

El DOM mejorado en Internet Explorer 9 incrementa significativamente el estado de interoperabilidad entre Internet Explorer 9 y otros exploradores. También suministra simultáneamente mejoras de rendimiento en varios escenarios, principalmente debido a los objetos DOM representados como objetos JavaScript nativos.

El DOM mejorado extiende una amplia variedad de capacidades nuevas suministradas por “Chakra”, el nuevo motor de JavaScript en los objetos y las API que ofrece el DOM, que incluyen:

• Extensibilidad de objetos DOM selectiva (a través de Object.preventExtensions)
• Mutabilidad de API de DOM (mediante la mutación de descriptores de propiedades de API de DOM o la eliminación total de propiedades)
• Compatibilidad JSON de objetos DOM
• Características de objetos JavaScript nativos mediante herencia (hasOwnProperty, toString, etc.).
• Características de función JavaScript nativa (call, apply, bind).

Dichas características unifican la experiencia de programación entre los objetos nativos del motor de JavaScript y DOM. Además, se incorporaron las siguientes características DOM nuevas:

• Excepciones W3C DOM: Las excepciones de DOM son nuevos tipos de objetos de error obtenidos como resultado de errores de API de DOM. Los códigos de error de estas excepciones se asignan a constantes definidas en la excepción misma.
• Propiedades "const" W3C DOM (por ejemplo, Node.ELEMENT_NODE): Las propiedades constantes son simples campos que suministran campos para diversos valores numéricos comunes devueltos de otras API de DOM. Por ejemplo, el número devuelto por la API de DOM nodeType puede compararse con la constante para que el código sea más legible: if (myElement.nodeType == Node.ELEMENT_NODE)

Análisis y ejecución XML desde y hacia DOM

Si bien Internet Explorer ofrecía anteriormente soporte para análisis y ejecución XML desde y hacia DOM nativo, no había una manera sencilla de que la secuencia de comandos accediera a esta funcionalidad desde los documentos HTML. Por esa razón, Internet Explorer 9 incorpora compatibilidad con las interfaces DOMParser y XMLSerializer. Dichas interfaces son altamente compatibles con otros exploradores populares.

El siguiente ejemplo de secuencia de comandos muestra cómo analizar una cadena en un documento XML mediante el uso de una interfaz DOMParser:

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

El siguiente ejemplo de secuencia de comandos muestra cómo serializar un nodo DOM (incluidos los nodos de documentos HTML) en una cadena XML mediante el uso de una interfaz XMLSerializer:

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

Modelo de objetos de documento (DOM) Niveles 2 y 3

Internet Explorer 9 incorpora mayor compatibilidad con el Modelo de objetos de documento Nivel 2 (DOM L2) y Nivel 3 (DOM L3) e incrementa la compatibilidad de DOM L2 con implementaciones existentes en Internet Explorer. También incorpora compatibilidad con la especificación Borrador de trabajo WebIDL.

Internet Explorer 9 incorpora compatibilidad con las características DOM siguientes.

DOM Principal (L2 y L3) y Vistas (L2)

Internet Explorer 9 incorpora mayor compatibilidad con varias API DOM L2 Principal nuevas, incluidas las siguientes:

• documentType
• ProcessingInstruction
• createDocument

También incorpora compatibilidad interoperable con espacios de nombres DOM, como métodos *NS y propiedades relacionadas con espacios de nombres (createElementNS, namespaceURI, localName, prefix y otras). Internet Explorer 9 también brinda compatibilidad con varios de los métodos y las propiedades DOM L3 Principal que se usan con mayor frecuencia:

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

Internet Explorer 9 es totalmente compatible con ambas propiedades de DOM L2 Views.

Para obtener más información, consulte la sección de referencia de DOM Principal y Vistas en MSDN.

Cruce seguro de elementos DOM

La especificación Cruce seguro de elementos define la interfaz ElementTraversal. Esta interfaz permite la navegación mediante secuencia de comandos de elementos en un árbol DOM, como nodos de elementos en documentos HTML, XML o SVG. Internet Explorer 9 incorpora compatibilidad con la interfaz ElementTraversal y sus cinco propiedades.

Eventos DOM L2 y L3

Las especificaciones de eventos DOM describen el sistema de eventos DOM, que permite el registro de controladores de eventos, describe el flujo de eventos a través de un árbol de documentos y define la información contextual de los eventos. Para obtener más información acerca del modelo de eventos, consulte Descripción del modelo de eventos en MSDN.

Uno de los objetivos del sistema de eventos en Internet Explorer 9 es la alineación con el sistema interoperable especificado por W3C. Esto le permite desplazarse del modelo attachEvent propietario de Internet Explorer y, así, elimina la necesidad de bifurcar su código a diferentes exploradores.

• Eventos DOM L2 y L3
  • API de distribución y registro de eventos (addEventListener, removeEventListener, createEvent y dispatchEvent)
  • Captura de eventos, burbujas y fases objetivo
  • Nuevos objetos de eventos (KeyboardEvent, MouseEvent, MutationEvent, etc.; CustomEvent para eventos específicos de aplicaciones; además de interfaces de objetos de eventos para tipos de eventos de otros estándares, como DragEvent
  • Nuevos tipos de eventos basados en estándares [eventos de composición, eventos de texto, eventos de rueda, eventos de mutación DOM, etc.] de HTML5)

Nota   Los eventos de mutación DOM se incluyen por una cuestión de integridad, pero no se tienen en cuenta en el estándar W3C.

DOM L2 HTML

Internet Explorer 9 incorpora mayor compatibilidad con las API de DOM L2 HTML no disponibles en versiones anteriores de Internet Explorer, incluidas las API HTML5, como getElementsByClassName y characterSet. Internet Explorer 9 ha mejorado el modelo de objetos en tablas, particularmente en relación con las operaciones DOM para agregar o quitar elementos.

getElementsByClassName

El método getElementsByClassName devuelve todos los nodos de elementos que tienen atributos de clase que coinciden con la cadena de entrada. Su funcionalidad es similar a la del método getElementsByTagName.

characterSet

El atributo characterSet devuelve el nombre MIME preferido de la codificación de caracteres del documento actual.

Estilo DOM L2

La especificación Estilo DOM L2 define las API para acceder y modificar mediante programas los estilos de los elementos individuales y las hojas de estilo completas mediante la eliminación o modificación de reglas. Las versiones anteriores de Internet Explorer podían cumplir con estas tareas mediante el uso de métodos propietarios; Internet Explorer 9 incorpora compatibilidad para las API estandarizadas definidas en la especificación Estilo DOM L2. Asimismo, se ha incorporado compatibilidad con las API estandarizadas que no tienen equivalente en Internet Explorer, como el método getComputedStyle. Vea un ejemplo del método getComputedStyle en acción en el sitio Internet Explorer Test Drive.

Para obtener más información, consulte Estilo DOM en MSDN.

Cruce seguro e intervalo DOM L2

La porción de Intervalo DOM de la especificación Cruce seguro e intervalo DOM L2 define una manera general de seleccionar contenido de documentos entre un par de puntos de límites. Los puntos de límites se especifican mediante un contenedor (el elemento principal que contiene el punto) y un desplazamiento (la ubicación en el contenedor donde se encuentra el punto). En forma conjunta con la interfaz Selection HTML5, las capacidades del intervalo DOM habilitan la funcionalidad, como la recuperación mediante programas de un vínculo, la selección de vínculos secundarios y la eliminación de una selección.

Internet Explorer 9 incorpora todas las API de intervalo DOM L2 así como API de selección HTML5, como el método setSelectionRange ampliamente usado en la actualidad.

Para obtener más información, consulte DOM Range en MSDN.

La porción de Cruce seguro DOM de la especificación Cruce seguro e intervalo DOM L2 define una manera mediante la cual puede desplazarse en un documento y filtrar los nodos según sea necesario. Internet Explorer 9 es compatible con ambas formas de recorrer DOM (NodeIterator y TreeWalker) y las dos formas de filtrar los nodos (whatToShow y NodeFilter) que se definen en la especificación W3C.

Para obtener más información, consulte Cruce seguro DOM en MSDN.

Tratamiento de espacios en blanco DOM

La exposición de espacios en blanco en DOM se ha tratado de diferente forma en Internet Explorer en comparación con otros exploradores; la falta de interoperabilidad en esta área ha sido frustrante para los desarrolladores web. En versiones anteriores, Internet Explorer contraía los espacios en blanco que encontraba y no los colocaba en nodos de texto en DOM. En Internet Explorer 9, los espacios en blanco se preservan y colocan en nodos de texto dentro de DOM, del modo esperado. Este comportamiento coincide con otros exploradores principales.

ECMAScript 5

Internet Explorer 9 incorpora mejoras a la característica de lenguaje JavaScript, además de rendimiento mejorado de JavaScript. En diciembre de 2009, ECMA aprobó la quinta edición de ECMA-262 como continuación de la tercera edición (nunca se publicó una cuarta edición), y el mismo año, Microsoft presentó los elementos de la compatibilidad con ECMAScript 5 (ES5) cuando se incorporó la compatibilidad JSON nativa a Internet Explorer 8 y la compatibilidad de acceso con objetos DOM a Internet Explorer 8. Sin embargo, además de la compatibilidad de acceso con JSON y DOM, ES5 realiza la normalización de diversas mejoras en el lenguaje JavaScript.

Existen varias características ECMAScript 5 importantes implementadas en Internet Explorer 9, incluidas las siguientes:

• Nuevos métodos de matriz: every, filter, forEach, indexOf, isArray, lastIndexOf, map, reduce, reduceRight, some
• Características de objetos y modelos de objetos mejorados: Object.create, Object.defineProperties, Object.defineProperty, Object.freeze, Object.getOwnPropertyDescriptor, Object.getOwnPropertyNames, Object.getPrototypeOf, Object.isExtensible, Object.isFrozen, Object.isSealed, Object.keys, Object.preventExtensions, Object.seal
• Otras funciones y métodos de cálculo: Date.now, compatibilidad de Date.parse con el formato de fecha ISO, Date.toISOString, Function bind, String trim

Internet Explorer 9 también soluciona varios problemas de las implementaciones anteriores de JavaScript en Internet Explorer. Para obtener más información, consulte el Blog del equipo de Internet Explorer. Para ver la compatibilidad de ECMAScript 5 en acción, visite el sitio Internet Explorer Test Drive.

HTML5

Se incorporó compatibilidad con algunas características de la especificación Borrador de trabajo HTML5 en Internet Explorer 8, que incluye:

• Almacenamiento DOM, definido como parte de la especificación de almacenamiento web HTML5.
• Navegación Ajax, implementada mediante la propiedad window.location.hash y el evento onhashchange, ambas definidas en la sección Cruce seguro de historial de la especificación HTML5.
• Mensajería de documentos cruzados, implementada mediante el método postMessage y el evento onmessage, ambos especificados como parte del módulo Mensajería web HTML5.

Internet Explorer 9 se basa en el trabajo realizado en el cumplimiento de HTML5 en Internet Explorer 8 e implementa las siguientes características nuevas:

• API de geolocalización de HTML5
• Los nuevos elementos HTML de video y audio
• El nuevo elemento HTML canvas
• La interfaz Selection
• Análisis HTML más interoperable
• Varias API de DOM nuevas, según el análisis de la sección DOM L2 HTML de este documento
• Scaling Vector Graphics (SVG)

Nota Es importante recordar que, al momento de elaboración este documento, la especificación HTML5 aún se encuentra en la fase Borrador de trabajo. Hasta que este alcance la fase Recomendación de candidato, podría modificarse considerablemente. Para obtener más información, consulte el borrador de trabajo HTML5 más reciente.

Geolocalización basada en HTML5

Internet Explorer 9 incorpora compatibilidad con la geolocalización. La API de geolocalización permite a una aplicación web tener acceso a la ubicación geográfica en la que se encuentra actualmente el equipo que ejecuta Internet Explorer. La página web puede adaptar la experiencia del usuario en función de la ubicación, por ejemplo, a fin de mostrar la posición en un mapa o mostrar información local actualizada, como informes climáticos o noticias. Los datos de la ubicación se devuelven como coordenadas de latitud y longitud. Las API de geolocalización en Internet Explorer 9 se ciñen a los estándares definidos en la especificación de la API de geolocalización.

Para ver la geolocalización en funcionamiento, consulte el sitio de Internet Explorer 9 Test Drive.

Para obtener más información sobre geolocalización, consulte MSDN.

Elementos HTML5 de video y audio

Dos de las características HTML5 más anticipadas ahora compatibles con Internet Explorer 9 son los nuevos elementos de audio y video. Los elementos video y audio están definidos dentro de la sección Contenido incrustado de la especificación HTML5.

Básicamente, los elementos de video y audio permiten la incrustación de contenido de video y audio en una página HTML. Los desarrolladores web también puede especificar varios atributos para ambos elementos. Por ejemplo, considere el siguiente marcado.

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

En Internet Explorer 9, se mostrará lo siguiente en un espacio de 400×300 (los atributos de ancho y alto), el archivo de imágenes "frame.png" (el atributo poster) mientras se carga el contenido de vídeo. El archivo de video, "video.mp4" (el atributo src), se comenzará a reproducir automáticamente al cargarse la página (el atributo de reproducción automática) y se mostrarán los controles del video (el atributo de controles). Al finalizar, se repetirá el video (el atributo del bucle). Si no admite formato de video, se mostrará en cambio el texto dentro del elemento de video (“Este contenido aparece…”). El elemento de video también admite el elemento de preload, que sugiere al explorador lo que el desarrollador web cree que brindará la mejor experiencia al usuario.

Para ver un ejemplo del elemento de video en acción, vea la demostración “Panorama de vídeo” en el sitio de Internet Explorer Test Drive.

Internet Explorer 9 también es compatible con el elemento de video con varios orígenes, cada uno de los cuales es especificado por el source del elemento secundario. Por ejemplo, considere el siguiente marcado.

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

Aquí, Internet Explorer 9 elige el primer formato admitido enumerado (en este caso, el segundo elemento de source) y reproduce su archivo de origen asociado.

El elemento de audio se define de manera similar al elemento de video, pero sin los atributos de width, height y poster. Para ver un ejemplo del elemento de audioen acción, ingrese al sitio de Internet Explorer Test Drive.

Internet Explorer 9 admite los siguientes formatos de contenidos:

Para obtener más información, consulte el video y el audio de HTML5 en MSDN.

Elemento de lienzo HTML5

Otra nueva característica anticipada de HTML5 en Internet Explorer 9 es el elemento de canvas, que se usa en conjunto con API de Canvas 2D. El elemento del canvas, según se define en la especificación de HTML5, permite la representación de gráficos en un canvas de mapas de bits dependientes de la resolución. Se utilizan “contextos” para dibujar en los canvas, como el contexto Canvas 2D, especificado en la especificación API de Canvas 2D W3C. Internet Explorer 9 incorpora compatibilidad con el elemento de canvas y usa la API de dibujos 2D Canvas como su contexto. (En Internet Explorer 9, el contexto Canvas 2D está representado por el objeto CanvasRenderingContext2D o por la interfaz ICanvasRenderingContext2D). Al igual que todos los gráficos de Internet Explorer 9, el elemento canvas tiene aceleración de hardware mediante Windows y la GPU.

La función de canvas permite escenarios de dibujo que contienen rectángulos, trazados, líneas, rellenos, arcos, curvas cuadráticas y de Bézier. Además, el elemento de canvas de Internet Explorer 9 admite atributos de width y height. (Los valores predeterminados de ancho y alto son 300 y 150 píxeles respectivamente, el color predeterminado es negro transparente).

El canvas es una manera de programar gráficos en la web. La etiqueta canvas se encuentra en “modo inmediato” (los comandos de dibujo se envían directamente al hardware de gráficos), la superficie de dibujo de dos dimensiones que puede usar para proporcionar gráficos en animaciones, gráficos en tiempo real o juegos interactivos sin necesidad de descargar un complemento por separado. Debido a que los API han sido definidos por el objeto CanvasRenderingContext2D, el canvas permite tener los siguientes escenarios de dibujos que incluye:

• rectángulos
• líneas
• rellenos
• arcos;
• sombras;
• curvas de Bézier;
• curvas cuadráticas;
• imágenes;
• video.

Puede utilizar JavaScript para animar dibujos sobre lienzos o para tener experiencias interactivas que puedan reaccionar con el ingreso por teclado, clics del mouse o cualquier evento del explorador. Entre otros, este ejemplo de Internet Explorer Test Drive produce, con solo unas pocas líneas de JavaScript, líneas resplandecientes de colores ubicadas de manera aleatoria.

El elemento de canvas de Internet Explorer 9 admite atributos de width y height. (Los valores predeterminados de ancho y alto son 300 y 150 píxeles respectivamente, el color predeterminado es negro transparente).

Internet Explorer 9 admite las siguientes API de contexto de Canvas 2D (miembros expuestos por el objeto CanvasRenderingContext2D):

• la propiedad canvas (referencia inversa al objeto canvas)
• métodos de estado (save, restore)
• métodos de transformación (scale, rotate, translate, transform, setTransform)
• propiedades de composición (globalAlpha, globalCompositeOperation)
• propiedades de color y estilo (strokeStyle, fillStyle)
• el objeto CanvasGradient y los métodos (addColorStop, createLinearGradient, createRadialGradient)
• el objeto CanvasPattern y el método (createPattern)
• atributos de línea (lineWidth, lineCap, lineJoin, miterLimit)
• atributos de sombra (shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur)
• métodos de rectángulo (clearRect, fillRect, strokeRect)
• métodos de formas complejas (beginPath, moveTo, closePath, lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc, rect, fill, stroke, clip, isPointInPath)
• la interfaz TextMetrics (objeto CanvasTextMetrics), su propiedad (width), y atributos y métodos de textos (font, textAlign, textBaseline, fillText, strokeText, measureText)
• el método de imágenes (drawImage)
• la interfaz ImageData (objeto CanvasImageData), sus propiedades (data, height, y width) y métodos de manipulación de píxeles (createImageData, getImageData, putImageData)
• el objeto CanvasPixelArray y su propiedad, length

Para obtener una introducción más profunda a HTML5 Canvas en Internet Explorer 9, consulte MSDN. Además, visite el sitio Internet Explorer Test Drive para ver más demostraciones del elemento de canvas. Para obtener información técnica sobre el elemento canvas en Internet Explorer 9, consulte la página de referencia de elementos de canvas en MSDN.

Mejoras del análisis de HTML

Se ha mejorado el análisis de HTML en Internet Explorer 9 a fin de alinear mejor el comportamiento descrito en la especificación de borradores de HTML5.

Análisis de SVG en HTML

Internet Explorer 9 es compatible con SVG incrustado directamente en HTML. Para obtener más información de SVG, consulte Gráficos de vectores escalables (SVG) en esta guía.

Análisis de XHTML

Internet Explorer 9 analizará documentos de tipo MIME de application/xhtml+xml como XHTML.

Elementos genéricos

Anteriormente, Internet Explorer analizaba elementos que no reconocía como “desconocidos”. Esos elementos se acoplaban, lo que mantenía las reglas de estilo CSS normal de la aplicación y no cumplía con la especificación de borradores HTML5. Internet Explorer 9 cambia este comportamiento y, ahora, analiza los elementos no reconocidos como elementos “genéricos”, lo cual permitirá que funcionen como los elementos normales. Esto evita la necesidad de soluciones de problemas del desarrollador, como solicitar a document.createElement que obligue a Internet Explorer a reconocer un elemento.

A continuación, se presenta un ejemplo simple de un elemento genérico; en este caso, un elemento no definido denominado 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>

Internet Explorer 8 ignora la etiqueta mydiv y sus reglas de CSS asociadas. Esta oración se presenta de la siguiente manera:

Internet Explorer 9 analiza la etiqueta mydiv de la manera prevista y presenta lo siguiente:

Etiquetas superpuestas

Si su HTML contiene etiquetas superpuestas, Internet Explorer 8 y las versiones anteriores no lo resolverán durante el análisis. Este comportamiento se opone a lo indicado en la especificación de borradores HTML5. Si ha superpuesto elementos con fines de scripting (como el que se muestra aquí), podrá provocar errores de scripting confusos. Internet Explorer 9 sigue la especificación de borradores HTML5 y resuelve las etiquetas superpuestas durante el análisis.

El siguiente es un simple ejemplo de un script que muestra texto entre las etiquetas rojas i y b:

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

En Internet Explorer 8 y versiones anteriores, este marcado provoca una presentación imprevista:

En Internet Explorer 9, el marcado se presenta tal como se espera.

Cambio de análisis a los bloques de estilo y scripts

Internet Explorer 8 y las versiones anteriores no conservan texto en bloques de script ni style, hacia los nodos de textos en DOM. Internet Explorer 9 conserva texto en bloques de script o style hacia el DOM como nodos de textos, tal como se espera. De este modo, el código de origen estará disponible en el DOM como nodo de texto a fin de poder manipularlo con script.

API de selección de HTML5

Internet Explorer 9 agrega soporte para las tres API de selección de texto HTML5. El objeto de Selection representa una lista de objetos de Range habilitados por el nuevo soporte para DOM L2 Range en Internet Explorer 9. Para obtener más información, consulte Mejoras de Document Object Model (DOM), más arriba, en este documento.

El método getSelection

El método getSelection devuelve el objeto de Selection de la ventana, lo que representa el texto seleccionado en la actualidad.

Propiedad selectionStart

La propiedad selectionStart adquiere el desplazamiento hasta el inicio del texto seleccionado en la actualidad y, además, puede configurar el inicio de la selección.

Propiedad selectionEnd

La propiedad selectionEnd adquiere el desplazamiento hasta el final del texto seleccionado en la actualidad y, además, puede configurar el final de la selección.

Elementos semánticos de HTML5

Internet Explorer 9 mejora la compatibilidad con varios elementos semánticos de HTML5. En este contexto, un elemento “semántico” se define como uno cuyo nombre de etiqueta describe su contenido, pero que no presenta comportamientos especiales. Las etiquetas semánticas pueden ser particularmente útiles para permitir capacidad de acceso.

Internet Explorer 9 ha incorporado las siguientes modificaciones con respecto a su compatibilidad con elementos semánticos:

• Los elementos ahora se heredan de la interfaz HTMLElement, en lugar de la interfaz HTMLUnknownElement, tal como se determina en la especificación de HTML5.
• De forma predeterminada, los elementos adquieren estilo según se determina en la especificación de HTML5.

Se ha logrado el reconocimiento de los siguientes elementos semánticos:

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

Perfiles de color ICC

El Consorcio Internacional del Color (ICC) publica perfiles de colores, que describen atributos de color del software y el hardware.

Internet Explorer 9 incorpora compatibilidad para perfiles de color ICC v2 y v4 en imágenes, según se define en las especificaciones de ICC.

Nivel 2 API de selectores

La especificación de nivel 2 API de selectores define un conjunto de interfaces de programación de aplicaciones (API) que le permiten evaluar selectores en el Document Object Model (DOM).

Internet Explorer 8 implementó el querySelector y querySelectorAll del API de selectores. Internet Explorer 9 agrega compatibilidad con el método msMatchesSelector.

Scalable Vector Graphics (SVG)

El soporte de Scalable Vector Graphics (SVG) se ha convertido en una de las características más solicitadas para implementar en Internet Explorer y es una manera eficaz de agregar efectos visuales fácilmente escalables de alta fidelidad: de pequeño y simple a grande y complejo, hacia un sitio web sin necesidad de complementos o vistas separadas.

Con Internet Explorer 9, Microsoft se enorgullece en presentar la compatibilidad con el conjunto de características básicas de SVG. La compatibilidad con SVG en Internet Explorer 9 está basada en la recomendación de especificación SVG 1.1 (Segunda edición) (para exploradores de escritorio). Se ha implementado la siguiente funcionalidad:

• La mayoría de estructura de documentos SVG, la interactividad (eventos de scripting) y el estilo (en línea y a través de CSS).
• Diversos elementos de presentación y sus correspondientes atributos e interfaces DOM, incluidas:
  • formas básicas;
  • relleno, trazos, marcador y color;
  • degradado y modelos;
  • trazados;
  • texto.

Internet Explorer 9 admite los siguientes métodos para mostrar el marcado SVG:

• Los fragmentos de SVG en la incrustación de HTML5, sin utilizar un objeto extraño (es decir, simplemente incluir una etiqueta <svg> dentro de su HTML).
• SVG como un tipo de documento completo (con extensión de archivo .svg).
• SVG en XML o XHTML (similar al método de HTML5, solamente con archivos XML o XHTML).
• SVG como imagen CSS.
• SVG mediante el elemento de objetos, como en los siguientes casos (observe los atributos tipo, alto y ancho):

  <object data="rect2.svg" width="100%" height="400px"
      type="image/svg+xml"></object>

  
  
• SVG mediante elementos img, embed, iframe, o frame, como en los siguientes casos:

  <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Para obtener más información sobre la compatibilidad con SVG en Internet Explorer 9, consulte MSDN.

Para obtener más información sobre SVG, consulte la página de referencia de elementos svg en MSDN.

Formas básicas

Internet Explorer 9 incorpora compatibilidad del análisis y la presentación de todos los elementos de formas básicas, sus atributos y las interfaces DOM asociadas, según se especifica en el módulo de formas básicas de la especificación de SVG 1.1 (Segunda edición). El conjunto de formas básicas admitidas por Internet Explorer 9 se compone de los siguientes elementos de formas:

• rect;
• circle;
• elipse;
• line;
• polyline;
• polygon.

Internet Explorer 9 también admite las interfaces DOM asociadas de estos elementos.

Los siguientes ejemplos muestran cada uno de los elementos de formas mencionados anteriormente. Después del marcado, aparece una captura de pantalla del resultado correspondiente en Internet Explorer 9.

Rectángulos: elemento rectangular

<?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 obtener más información, consulte la página de referencia de elementos rect en MSDN.

Círculos: elemento circle

<circle fill="orange"
   stroke="black"
   stroke-width="3"
   cx="40"
   cy="25"
   r="20"/>

Para obtener más información, consulte la página de referencia de elementos circle en MSDN.

Elipses: elemento ellipse

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

Para obtener más información, consulte la página de referencia de elementos ellipse en MSDN.

Líneas: elemento de 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 obtener más información, consulte la página de referencia de elementos de line en MSDN.

Polilíneas: elemento de polyline

La “polyline” se define en SVG como diversas líneas conectadas que, a menudo, conforman una forma “abierta” o un polígono con uno o varios lados faltantes o con formas no convexas.

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

Para obtener más información, consulte la página de referencia de elementos de polyline en MSDN.

Polígonos: elemento de polygon

Un polígono es una forma cerrada.

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

Para obtener más información, consulte la página de referencia de elementos de polygon en MSDN.

Recorte, enmascaramiento y composición

Internet Explorer 9 admite el recorte, los trazados de recorte, el enmascaramiento y la opacidad, según se especifica en el módulo de recorte, enmascaramiento y composición de la especificación de SVG 1.1 (Segunda edición). (Los trazados de SVG se describen en la sección Trazados de este documento).

Recorte

El trazado de recorte corta o “recorta” el área en la que se puede dibujar un color, un modelo o una imagen. Todas las partes del elemento gráfico que se encuentran fuera del trazado de recorte no tienen dibujos. Los trazados de recorte son completamente opacos; la porción del elemento gráfico que se encuentra fuera del trazado de recorte es completamente invisible.

En SVG, las propiedades de desbordamiento y recorte establecen trazados de recorte iniciales o formas en las que se mostrarán los contenidos. De manera predeterminada, el trazado de recorte inicial se define como la ventanilla de SVG o el área rectangular de la página que muestra los contenidos de SVG.

El elemento de clipPath define un trazado de recorte. A continuación, se hace referencia al trazado de recorte con la propiedad clip-path. La propiedad clip-rule se aplica a elementos gráficos dentro de un elementoclipPath y el atributo clipPathUnits define un sistema coordinado de los contenidos de clipPath. Los trazados de recortes se pueden aplicar al texto, los colores, los modelos y las imágenes.

Se puede acceder a la funcionalidad de recortes mediante programación con la interfaz DOM SVGClipPathElement.

El siguiente es un ejemplo simple de un trazado 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>

En este ejemplo, se utiliza el elemento clipPath para definir un trazado de recorte con forma de círculo. Luego, la propiedad clip-path se utiliza para aplicar el trazado de recorte al rectángulo. Se produce lo siguiente en Internet Explorer 9:

Enmascaramiento

Una mask es similar a un trazado de recorte, excepto que es semitransparente. Generalmente, las máscaras se utilizan para componer objetos de primer plano en el fondo actual.

El elemento mask define una máscara. Luego, se utiliza la propiedad mask para hacer referencia a una máscara.

A continuación, se muestra un ejemplo simple de una máscara de 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>

En este ejemplo se utiliza la propiedad mask para definir una máscara con la forma de tres círculos adyacentes con colores diferentes. La propiedad mask luego se utiliza para aplicar la máscara a un rectángulo púrpura. Se produce lo siguiente en Internet Explorer 9:

Coordinación de sistemas, transformaciones y unidades

Internet Explorer 9 incorpora compatibilidad de coordinación de sistemas, transformaciones y unidades de SVG, según se especifica en el módulo Coordinación de sistemas, transformaciones y unidades de la especificación borrador de SVG 1.1 (Segunda edición). Las características que admite Internet Explorer 9 incluyen:

• Unidades y porcentajes.
• Transformaciones arbitrarias en cualquier elemento y atributo transform.
• Las propiedades viewBox y preserveAspectRatio (incluida la interacción con la propiedad de desbordamiento).
• Soporte para transformaciones y tipos de listas de transformaciones.

Internet Explorer 9 también admite interfaces DOM asociadas con transformaciones y sistemas coordinados de SVG.

Estructura de documentos

Internet Explorer 9 incorpora compatibilidad de estructura de documentos SVG, metadatos y funcionalidad de extensibilidad, según se especifica en los módulos Estructura de documentos, Metadatos y Extensibilidad de la especificación de SVG 1.1 (Segunda edición). Los elementos que admite Internet Explorer 9 incluyen:

• svg;
• desc;
• title;
• metadata;
• g;
• use;
• defs;
• symbol;
• image;
• switch.

Internet Explorer 9 también admite las interfaces DOM asociadas de estos elementos.

Degradado y modelos

SVG brinda la capacidad de pintar o trazar formas y textos con color, degradado o modelos. Internet Explorer 9 admite los degradados y los modelos de SVG, según se especifica en el módulo de degradado y modelos de la especificación de SVG 1.1 (Segunda edición).

Degradado

El soporte de degradado se proporciona mediante elementos de degradado (linearGradient y radialGradient) y atributos (gradientUnits y gradientTransform). Los colores de degradado son definidos por el elemento stop. Se pueden usar los elementos de degradado en las propiedades fill y stroke de las formas de SVG. Por ejemplo, considere el siguiente marcado:

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

Este marcado define un rectángulo con un degradado lineal. Los dos elementos stop especifican la detención de color en un vector de transiciones de color: uno amarillo en el punto de 10% y uno azul en el punto de 90%. Aparece de la siguiente manera en Internet Explorer 9:

Modelos

El soporte de modelos se proporciona mediante el elemento pattern y sus atributos. Al igual que el degradado, se pueden usar los elementos de los modelos en las propiedades fill y stroke de las formas de SVG. Por ejemplo, considere el siguiente marcado:

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

En este ejemplo, el elemento pattern define un modelo que se compone de un pequeño cuadrado azul y un diminuto círculo amarillo que se alternan. La elipse especificada obtiene un relleno del modelo. La siguiente imagen muestra cómo aparece en Internet Explorer 9:

Interactividad

El contenido de SVG puede ser interactivo; es decir, se puede cambiar en respuesta a la intervención del usuario. Internet Explorer 9 admite las características de interactividad de SVG, según se especifica en el módulo de interactividad de la especificación de SVG 1.1 (Segunda edición), que incluye:

• eventos del mouse:
  • mousedown;
  • mouseup;
  • clic;
  • mouseover;
  • mousemove;
  • mouseout.
• eventos del cursor/puntero:
  • focusin;
  • focusout;
  • activar.

Internet Explorer 9 también admite la interfaz DOM SVGCursorElement del módulo de interactividad.

Además, Internet Explorer 9 admite el atributo focusable, según se especifica en el módulo de interactividad de la especificación Tiny 1.2 de SVG. 

El siguiente marcado muestra un ejemplo muy simple de la interactividad de SVG en acción:

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

           // objeto que representa el círculo
           var redcircle;

           // variable que representa el radio del círculo
           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>

Cuando se carga este fragmento, se muestra un pequeño círculo rojo:

Al hacer clic en el círculo, crecerá al doble de su tamaño.

Se puede lograr el mismo efecto con los eventos mouseover y mouseout, que harán que el círculo crezca y se reduzca con solo mover el cursor sobre y fuera de este.

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

Vinculación y vistas

SVG permite la vinculación del contenido de SVG a otras páginas, además de las vistas predefinidas de los documentos de SVG. Las vistas son útiles cuando, por ejemplo, se desea enlazar directamente al cierre de un diagrama.

Internet Explorer 9 admite la vinculación y las vistas de SVG, según se especifica en el módulo de vinculación de la especificación de SVG 1.1 (Segunda edición). Se incluye el soporte de los elementos a y view.

También se admiten las interfaces DOM asociadas al módulo de vinculación: SVGAElement y SVGViewElement.

Vinculación

Al igual que en HTML, el elemento a se utiliza para crear un hipervínculo en SVG. Por ejemplo, el siguiente marcado proporciona un hipervínculo sobre un rectá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>

Vistas

Las vistas se pueden utilizar para indicar al explorador que muestre una imagen de SVG de una manera determinada. Por ejemplo, el siguiente marcado define un vínculo a una vista.

...
 <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"/>
 ...

En este ejemplo, la rect-view vista se define como viewBox con las coordenadas proporcionadas. Cuando se hace clic en el vínculo (texto “Ir a rectángulo”), aparece la vista rect-view , que revela el rectángulo rojo.

El siguiente marcado define otro vínculo a una vista.

...
 <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"/>
 ...

En este ejemplo, la circle-view vista tiene el atributo preserveAspectRatio configurado en none. Eso significa que, incluso si la forma es un círculo, no se escalará de manera uniforme para llenar el rectángulo viewBox especificado cuando se invoca la vista. En cambio, se ajustará de manera no uniforme de modo que su cuadro de límite coincida con el rectángulo de viewBox. Este marcado aparece de la siguiente manera en Internet Explorer 9 la primera vez que se carga la página.

Cuando hace clic en “Ir al círculo”, se invoca la vista circle-view y se ajusta el círculo para llenar el rectángulo viewBox. Lo hará parecer una elipse.

Pintura y color

La pintura y el color son componentes esenciales de SVG. El concepto de pintura incluye rellenos (colores sólidos, degradados, modelos), trazos (líneas que se dibujan en los trazados) y símbolos de marcado (se aplican al final de los segmentos de línea; por ejemplo, puntas de flecha) y, además, puede incorporar opacidad. Los rellenos y los trazos pueden aplicarse a trazados, textos y formas.

Internet Explorer 9 incorpora compatibilidad de color y pintura de SVG, según se especifica en el módulo Pintura: relleno, trazos y símbolos de marcado y el módulo de color de la especificación SVG 1.1 (Segunda edición). Se incluye compatibilidad con:

• propiedades de relleno:
  • fill;
  • fill-rule;
  • fill-opacity;
• propiedades de trazo:
  • stroke;
  • stroke-width;
  • stroke-linecap;
  • stroke-linejoin;
  • stroke-miterlimit;
  • stroke-dasharray;
  • stroke-dashoffset;
  • stroke-opacity.
• propiedades de visibilidad:
  • display;
  • visibility.
• elemento marker
• herencia de pintura (la función de pintura se hereda automáticamente para los elementos contenedores).
• propiedad de color.

También se admiten las interfaces DOM asociadas al módulo de pintura: SVGAPaint y SVGMarkerElement.

Se incluyen varios ejemplos de rellenos y trazos de SVG en la sección Trazados de este documento.

Trazados

Los trazados de SVG son contornos de formas. Se pueden rellenar, trazar (se dibuja una línea por el trazado) o utilizar como trazados de recortes (cortes de otras formas).

Internet Explorer 9 incorpora compatibilidad de trazados de SVG, según se especifica en el módulo de trazados de la especificación de SVG 1.1 (Segunda edición). Se incluye compatibilidad del elemento de path, además de la propiedad d, que permite el análisis de datos de trazados.

También son compatibles las interfaces DOM asociadas al módulo de trazados.

El elemento path activa diversos escenarios diferentes para los desarrolladores. Los siguientes son solamente algunos ejemplos simples. Después del marcado, aparece una captura de pantalla del resultado correspondiente en Internet Explorer 9.

Forma cerrada con líneas rectas y relleno

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

Trazado Bézier (cuadrático)

<path d="M20,30 Q40,50 60,30 T100,30"
    fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

Línea con 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

Los documentos de SVG pueden incluir texto. El texto se representa como cualquier otro elemento gráfico en SVG, que significa que las transformaciones de sistemas coordinadas, la pintura, los recortes y el enmascaramiento pueden aplicarse al texto.

Internet Explorer 9 admite la representación de texto, según se especifica en el módulo de texto de la especificación de SVG 1.1 (Segunda edición).

El elemento text especifica los caracteres que se dibujarán. Debido a que SVG no corta líneas ni ajuste de palabras automáticamente, debe determinar los cortes de líneas por adelantado. Para ajustar las propiedades del texto (como fuente, espesor, color, interletraje y muchas otras) dentro de una línea de texto, SVG proporcionará el elemento tspan.

Internet Explorer 9 también admite interfaces DOM asociadas con el módulo de texto.

Nuevas herramientas para desarrolladores web

La primera sección describe a los sitios anclados, una nueva manera de fortalecer la conexión entre su sitio web y sus usuarios. A continuación, describe la nueva manera de asignar versiones en Internet Explorer 9 a fin de tratar los problemas de compatibilidad de la migración a la versión moderna de Internet Explorer. Más adelante, conocerá las mejoras de las herramientas para desarrolladores de Internet Explorer, que se incorporaron por primera vez directamente al explorador de Internet Explorer 8.

Sitios anclados

Cuando aprovecha los sitios anclados, los usuarios se involucran más con su sitio web. Los sitios anclados son un nuevo conjunto de herramientas que cuentan con una interfaz de usuario mejorada para el sitio, con un icono de favoritos (favicon) de mayor tamaño, además de botones Atrás y Adelante y otros elementos de interfaz que se pueden unificar con la apariencia general y particular del sitio. La integración con Windows 7 brinda a los usuarios nuevas maneras de experimentar sitios web de desarrolladores usando las últimas API de Windows para crear Jump Lists de sitios web, barras de herramientas de miniaturas y notificaciones. (Los sitios anclados se admiten únicamente con la barra de tareas de Windows 7).

Cómo anclar sitios a la barra de tareas

Los usuarios pueden realizar una de las siguientes opciones para anclar un sitio a la barra de tareas:

• “Rasgar” una pestaña haciendo clic en ella y arrastrándola a la barra de tareas
• Arrastrar el icono de favoritos (favicon) desde la barra de direcciones hasta la barra de tareas
• Arrastre una imagen personalizada con la clase “msPinSite” (una imagen “arrastrar y anclar”) a la barra de tareas

Después de anclar un sitio, el sitio se representa con mejoras personalizadas; por ejemplo, los botones Atrás y Adelante coinciden con el esquema de color del sitio web. Los sitios también se pueden anclar al menú Inicio.

Jump Lists

Las tareas de Jump List son acciones específicas de aplicaciones que se personalizan a un sitio web anclado. Se basan en la misma característica para aplicaciones de Windows 7. Mediante las tareas de Jump List, un sitio web puede mostrar sus comandos usados con más frecuencia a los usuarios. Puede definir tareas de Jump List en función de las características de su sitio web y de las acciones clave que se espera que un usuario realice. Las tareas proporcionan un conjunto de vínculos estáticos al que los usuarios pueden tener acceso en cualquier momento, incluso si no se está ejecutando Internet Explorer. Para obtener más información acerca de las tareas de Jump List, consulte Cómo crear Jump Lists dinámicas en MSDN.

Barras de herramientas de miniaturas

Una barra de herramientas de miniaturas es, esencialmente, un “control remoto” de su sitio web. La barra de herramientas aparece debajo de la vista previa de miniatura cuando se mantiene el mouse sobre un botón de la barra de tareas del sitio anclado. Esta característica es especialmente útil para los sitios que implementan la reproducción de audio y vídeo, pero las barras de tareas de miniaturas presentan muchos usos potenciales. Los botones de barra de herramientas de miniaturas pueden incluir controles para manejar la reproducción, agregar o compartir favoritos, realizar búsquedas, cambiar estados en línea, realizar compras instantáneas o calificar páginas web. Para obtener más información acerca de la creación de barras de herramientas de miniaturas, consulte Cómo crear barras de herramientas de miniaturas en MSDN.

Notificaciones

Al igual que las aplicaciones de Windows 7, los sitios anclados pueden comunicar notificaciones y estado a los usuarios mostrando un icono superpuesto encima del botón de la barra de tareas del sitio anclado. Los iconos superpuestos ayudan a atraer la atención hacia un sitio web cuando la vista a la ventana del sitio anclado está bloqueada, por ejemplo, cuando la ventana del explorador está minimizada o bloqueada por otra ventana. Puede usar los iconos superpuestos para brindar notificaciones o información de estado importante, como el estado de la red, el estado en línea o la presencia de correo electrónico nuevo. Para obtener más información acerca de las notificaciones, consulte Cómo proporcionar notificaciones en MSDN.

Detección de sitios anclados

Internet Explorer 9 no notificará a ningún usuario si el sitio se puede anclar. Anunciar estas características dependerá del desarrollador. Existen muchas maneras de alertar a los usuarios sobre las características de sitio anclado del sitio web, incluidas listas de entrada, desplegables, pancartas y efectos div; imágenes e iconos de arrastrar y anclar; y de proporcionar una experiencia de primera ejecución que anuncie las características del sitio anclado después de que el usuario ancla el sitio por primera vez. Para obtener más información sobre la detección, consulte Cómo mejorar la detección en MSDN.

Para obtener información práctica y muestras de códigos sobre sitios anclados, consulte el Centro para desarrolladores de MSDN sobre sitios anclados.

Para ver una demostración de sitios anclados , consulte el sitio de Internet Explorer 9 Test Drive.

Control de versiones de plataforma

Internet Explorer 8 incorporó modos de compatibilidad de documentos, que son una extensión del modo de compatibilidad incorporado en Microsoft Internet Explorer 6. Los modos de documentos le permiten seleccionar el modo de presentación específico que utiliza Internet Explorer para mostrar páginas web y se describen en detalle en Definición de la compatibilidad de documentos en MSDN.

Nuevo modo de documento

Internet Explorer 9 agrega un nuevo modo de documento (modo estándar de Internet Explorer 9) que permite el rendimiento más veloz, es escalable para manejar las exigencias de las aplicaciones web modernas e implementa el soporte estándar más reciente.

Internet Explorer 9 se ejecuta en el modo de estándares IE9 de manera predeterminada, salvo especificación en contrario en la página o de parte del servidor web.

La mejor manera de garantizar que Internet Explorer 9 represente la página en el modo de documento más reciente es usar una directiva !DOCTYPE estándar y ningún encabezado HTTP ni etiqueta meta X-UA-Compatible. El !DOCTYPE para invocar el modo de estándares IE9 es el siguiente:

<!DOCTYPE html>

Por supuesto, puede usar el encabezado HTTP o la etiqueta meta X-UA-Compatible y !DOCTYPE para cambiar el valor predeterminado según corresponda.

Para determinar el modo de documento actual, presione F12 para abrir las herramientas para desarrolladores de Internet Explorer F12 y, a continuación, observe el lado derecho de la barra de menús. Para omitir el modo de documento, en el menú Modo de documento, haga clic en Estándares de Internet Explorer 9.

Cadena de agente de usuario (UA)

La cadena agente de usuario (UA) identifica el explorador a los servidores del host y proporciona ciertos detalles del sistema. (Para obtener más información sobre las cadenas UA, consulte Cómo comprender las cadenas agente de usuario en MSDN.) Internet Explorer 9 es diferente a las versiones anteriores de Internet Explorer en cuanto a que envía la cadena de UA abreviada de manera predeterminada. Este cambio mejora el rendimiento, la interoperabilidad y la compatibilidad en general. Internet Explorer 9 ya no enviará agregados a la cadena de UA mediante otro software instalado en el equipo del usuario, como .NET, entre otros.

Internet Explorer 9 envía la nueva cadena de UA de Internet Explorer 9. Existen cuatro cambios de la cadena de UA para Internet Explorer 8 que los desarrolladores deben conocer:

1. La versión de la aplicación se ha incrementado de “Mozilla/4.0” a “Mozilla/5.0” para que coincida con otros exploradores. Este cambio indica que Internet Explorer 9 es un explorador interoperable.
2. El token de la versión se incrementa desde “MSIE 8.0” hasta “MSIE 9.0”.
3. El token de Trident se incrementa desde “Trident 4.0” hasta “Trident 5.0”.
4. Internet Explorer 9 enviará la siguiente cadena de UA corta sin agregados realizados por otro software que estuviera instalado en el equipo:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

La vista de compatibilidad en Internet Explorer 9 se asigna al modo estándar de IE7, del mismo modo que lo hace Internet Explorer 8. (Para obtener más información sobre las cadenas de vista de compatibilidad, consulte Cómo comprender la lista de vista de compatibilidad en MSDN.) Cuando se encuentra en vista de compatibilidad, Internet Explorer 9 envía la siguiente cadena de UA:

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Para obtener más información sobre la cadena de UA para Internet Explorer 9, consulte la publicación del Blog del equipo de Internet Explorer "Presentación de la cadena de agentes de usuario de IE9".

Herramientas para desarrolladores F12

Para tener acceso a las herramientas para desarrolladores F12 en Internet Explorer 9, presione F12 o, en el menú Herramientas, haga clic en Herramientas para desarrolladores F12. Si usaba las herramientas para desarrolladores en Internet Explorer 8, notará inmediatamente las mejoras de rendimiento y las características optimizadas.

Ficha Consola

Las herramientas para desarrolladores F12 de Internet Explorer 9 incorporan una ficha Consola para exponer los eventos de scripting. Cuando se inspecciona el script, aparecen diversos botones de alternancia: Error, advertencia y mensaje. Cada botón muestra la cantidad de mensajes de cada tipo.

Ficha Red

Internet Explorer 9 agrega una nueva herramienta de inspección de red a sus herramientas para desarrolladores. Para acceder a la herramienta, haga clic clic en la ficha Red. A continuación, podrá:

• Capturar el tráfico de red de HTTP y HTTPS.
• Mostrar (y guardar) los contenidos de respuestas y pedidos capturados.
• Mostrar detalles adicionales sobre datos capturados, como información sobre el caché, el intervalo, el tamaño y las cookies.

Herramienta de cambio de agente de usuario

Gracias a la herramienta de cambio de agente de usuario (UA), puede modificar la cadena de UA que identifica el tipo de explorador y la versión del servidor web. Para obtener más información sobre la nueva cadena de UA en Internet Explorer 9, consulte la Cadena de agente de usuario (UA) en este documento. La cadena de UA seleccionada se enviará por la red como encabezado en cada solicitud. Para cambiar la cadena de UA del explorador, en el menú Herramientas de las herramientas para desarrolladores, elija Cambiar cadena de agente de usuario y, a continuación, seleccione el explorador desde donde desea enviar la cadena de UA.

Medición del rendimiento real

Gracias a las herramientas para desarrolladores F12 de Internet Explorer 9, ahora puede medir aún más aspectos del rendimiento de sitios web que en versiones anteriores de Internet Explorer. Sin embargo, no puede medir el rendimiento que en realidad experimentan los usuarios. Para resolver este problema, algunos sitios desarrollan sus propias bibliotecas que intentan medir el rendimiento en línea de las páginas web, pero puede incorporar sobrecarga que, en realidad, hará que las páginas sean más lentas para los usuarios. Creemos que la especificación WebTiming W3C, la cual, desde su escritura, se encuentra en etapa “Borrador de trabajo”, es una buena base conceptual para resolver el problema de manera responsable. Se puede acceder a la funcionalidad WebTiming en Internet Explorer 9 mediante la interfaz window.msPerformance en el DOM. Además, los desarrolladores pueden habilitar la depuración del script en las herramientas para desarrolladores F12 y, a continuación, tener acceso al objeto window.msPerformance.

Para ver una demostración del objeto window.msPerformance en uso, consulte el sitio Internet Explorer Test Drive.

Historial de revisiones

16 de marzo de 2010: Creado para la vista previa de la plataforma de Internet Explorer.

15 de abril de 2010: Actualizado con información sobre:

• compatibilidad de módulos de espacios de nombres CSS3;
• compatibilidad de selectores CSS3 adicionales;
• más detalles de compatibilidad DOM;
• más detalles de compatibilidad SVG, incluidas las limitaciones de incrustaciones;
• compatibilidad de perfiles de color ICC.

5 de mayo de 2010: actualizado para la vista previa de la plataforma de Internet Explorer Build 2 con información sobre:

• más detalles de compatibilidad DOM;
• Nuevas características de DOM:
  • nuevos API de núcleo DOM;
  • DOM HTML;
  • DOM Traversal.
  • Nuevos eventos L3 de DOM:
    • eventoDOMAttrModified;
    • eventoDOMContentLoaded;
    • eventos de composición.
• Nueva cadena de agente de usuario (UA)
• Modificaciones de URI de datos
• Incorporación de herramientas para desarrolladores ficha Consola y herramienta de cambio de UA.

23 de junio de 2010: actualizado para la vista previa de la plataforma de Internet Explorer Build 3 con información sobre:

• Nuevas características de CSS3:
  • nuevas características de bordes y fondo;
  • modelos de colores HSLA y HSL;
  • compatibilidad con fuentes de CSS3;
  • valores CSS3 y compatibilidad con unidades;
  • nuevos valores de propiedades de display.
• Nueva compatibilidad con Element Traversal de DOM.
• Nuevas características de HTML5:
  • elementos de video, audio y canvas.
  • Interfaz Selection
• Nueva compatibilidad de nivel 2 API de selectores:
  • método matchesSelector.
• Nuevas características de SVG:
  • recorte, enmascaramiento y composición;
  • degradado y modelos;
  • interactividad;
  • vinculación y vistas;
  • pintura y color;
  • texto.

4 de agosto de 2010: actualizado para la vista previa de la plataforma de Internet Explorer Build 4 con información sobre:

• “Chakra”, el nuevo motor de JavaScript
• capacidades DOM mejoradas
• nueva compatibilidad para especificación WebIDL;
• objeto window.msPerformance;
• nueva sección de canvas con enlaces a ejemplos.

15 de septiembre de 2010: actualizado para Internet Explorer 9 Beta con nuevos enlaces e información sobre:

• DOMParser y XMLSerializer;
• sitios anclados.

28 de octubre de 2010: actualizado para la vista previa de la plataforma de Internet Explorer Build 6 con información sobre:

• CSS 2D Transforms
• Elementos semánticos de HTML5
• Número fijo de versiones de perfiles de color ICC que se admiten

10 de febrero de 2011: Actualizado para Internet Explorer 9 RC con información acerca de:

• Geolocalización basada en HTML5
• Sitios anclados (actualizado)
• Modo de compatibilidad (actualizado)
• Otras correcciones al documento

18 de febrero de 2011: Actualizado con información adicional sobre:

• sitios anclados.
• HTML5 Canvas

14 de marzo de 2011: Actualizado para Internet Explorer 9 (RTW):

• texto de la versión actualizada
• ECMAScript 5 (vínculos agregados)