Compatibilidad con HTML y CSS

Nota: Esta información es preliminar y está sujeta a cambios.

Windows Internet Explorer 8 es la versión que más se ajusta a los estándares establecidos, con compatibilidad total con hojas de estilo en cascada (CSS) de nivel 2.1, compatibilidad mejorada con CSS 3, compatibilidad mejorada con HTML 4.01 y buena compatibilidad con HTML 5. Gracias a la compatibilidad mejorada de estos elementos HTML, los desarrolladores web ahora pueden crear marcas HTML más expresivas y accesibles. Este documento trata los cambios del comportamiento de Windows Internet Explorer 8 en relación con la compatibilidad con HTML y CSS y el modo en que estos cambios afectan el desarrollador web.

Compatibilidad HTML

Para ayudar a los desarrolladores a aprovechar todos los elementos que ofrece HTML 4.01 y para reproducir mejor el significado semántico que pretende ofrecer el desarrollador web, Windows Internet Explorer ha actualizado la compatibilidad con los siguientes elementos relativos a la presentación:

Elemento P: representa un párrafo lógico.

Elemento OBJECT: puede representar cualquier objeto, incluidas imágenes.

Elementos P de cierre automático

Los elementos P no cerrados ahora se cierran automáticamente cuando van seguidos por los elementos TABLE, FORM, NOFRAMES o NOSCRIPT.

<html>
   <head>
      <title>Simple P Element Closing Example</title>
      <meta http-equiv="X-UA-Compatible" content="IE8"/>
   </head>
   <body>
      <p>This is the first paragraph</p>
      <p style="margin-left:30px">This is another paragraph. <!-- P not closed -->
      <table border="1px" cellpadding="2px">
         <tr><td>This is a table cell.</td></tr>
      </table>
      <p>This is a third paragraph.</p>
   </body>
</html>

En este ejemplo, el segundo elemento P no se ha cerrado. Cuando se muestra con Windows Internet Explorer 7, el elemento TABLE se muestra como elemento secundario del segundo elemento P. Al segundo elemento P se le aplica una sangría desde el margen izquierdo de la ventana de 30 píxeles. Puesto que TABLE es un elemento secundario del elemento P, también se le aplica la sangría desde el margen izquierdo de la ventana. Sin embargo, cuando se muestra con Windows Internet Explorer 8 en el modo predeterminado, el elemento TABLE aparece alineado en el margen izquierdo. Puesto que Windows Internet Explorer 8 cierra automáticamente los elementos P no cerrados antes de mostrar los elementos TABLE, el elemento TABLE aparece como subordinado del elemento.

Usar los elementos OBJECT para mostrar imágenes

Windows Internet Explorer 8 permite usar el elemento OBJECT para mostrar imágenes. Al mostrar imágenes con este elemento en versiones anteriores del explorador, normalmente se agregaban automáticamente barras de desplazamiento y bordes a la imagen y con frecuencia no se mostraban correctamente.

Ahora con Windows Internet Explorer 8, el elemento OBJECT muestra las imágenes como si estuvieran incrustadas con elementos IMG. Para usar este comportamiento en sus páginas web, establezca el atributo DATA del elemento OBJECT en la URL de la imagen. También puede incrustar un dataURL en el atributo DATA. Para obtener más información, consulte Enlace de datos.

Para que Windows Internet Explorer cargue imágenes en los elementos OBJECT con el comportamiento de las versiones anteriores, puede seleccionar un modo de compatibilidad anterior para su página web o bien establecer el atributo TYPE del elemento OBJECT en text/html.

Reserva de objeto mejorada

Cuando un elemento OBJECT no carga un recurso, en su lugar se representa el contenido del elemento OBJECT. Esto se denomina reserva de objeto porque permite definir una estrategia de "reserva" a la que Windows Internet Explorer recurre cuando hay un error.

Windows Internet Explorer 7 presentó la capacidad de anidar elementos OBJECT; es decir, usar múltiples elementos OBJECT para crear una estrategia de reserva más enriquecida, tal como se muestra en el siguiente ejemplo.

<object data="..." type="silverlight" >
   <object data="..." type="windows media file">
      <object data="..." type="image/png">
          Wow!  Everything went wrong.  Sorry.
      </object>
   </object>
<object>

Este ejemplo usa tres elementos OBJECT para definir una estrategia de reserva de objeto. En primer lugar intenta cargar una aplicación Silverlight. Si no puede, se solicita un archivo Microsoft Windows Media. Si no puede cargarse el archivo de Microsoft Windows Media, el ejemplo carga una imagen.

Si abriera este ejemplo con Windows Internet Explorer 7, vería la imagen pero sólo habría un elemento OBJECT en el Document Object Model (DOM) de la página porque Windows Internet Explorer 7 no crea elementos OBJECT para los objetos que no se pueden cargar.

Si abre el ejemplo con Windows Internet Explorer 8, verá la imagen con tres elementos OBJECT en el DOM de la página. Puesto que no se han podido cargar, los primeros dos elementos OBJECT estarán inactivos. Sin embargo, puede utilizar JavaScript para buscarlos.

Nota: los objetos inactivos no se pueden reactivar sin actualizar la página o usar JavaScript para cargar objetos nuevos.

Windows Internet Explorer 8 utiliza este nuevo comportamiento de reserva sólo para errores relacionados con la comunicación; es decir, sólo cuando una solicitud de carga genera una respuesta de error HTTP de cliente (4xx) o de servidor (5xx). Si no se puede realizar la solicitud por otros motivos, como un contenido con formato incorrecto o un control ActiveX dañado, se recurre al comportamiento de reserva original. Para obtener más información acerca de los códigos de respuesta HTTP, consulte Encabezados de respuesta HTTP.

Mejoras de HTML 5/AJAX

Las mejoras de HTML 5 con Windows Internet Explorer 8 incluyen navegaciones AJAX, almacenamiento DOM, mensajería entre documentos (XDM) y eventos de conectividad. Se han desarrollado en estrecha coordinación con el borrador de trabajo del W3C HTML 5.0. Para obtener más información, consulte AJAX - Introducción a navegaciones AJAX, Introducción al almacenamiento DOM, AJAX - Mejoras de XMLHttpRequest en Internet Explorer 8 y AJAX - Mejoras de conectividad en Internet Explorer 8.

Navegaciones AJAX

Una de las principales ventajas de usar AJAX es la capacidad de actualizar el contenido de la página sin las tradicionales navegaciones de página. La incapacidad para guardar el estado de una página y poner sobre aviso a sus componentes cuando esto sucede puede ser problemática en algunos casos, porque los componentes como la barra de direcciones y los botones Adelante y Atrás sólo se actualizan después de la navegación de página. Como resultado, el explorador no guarda los cambios del contenido AJAX en el registro de recorrido ni actualiza componentes como la barra de direcciones. Esto puede confundir a los usuarios finales que se preguntarán por qué el explorador parece atascado en el contenido anterior. En el modo IE8, Windows Internet Explorer trata las actualizaciones window.location.hash como navegaciones y guarda la URL anterior del documento.

Almacenamiento DOM

Hoy en día, las páginas web usan la propiedad document.cookie para almacenar datos en el equipo local. Las cookies tienen una capacidad limitada porque los sitios sólo pueden almacenar 50 pares de clave-valor por dominio. Además, el modelo de programación de cookies es complicado y requiere analizar toda la cadena de cookies para encontrar los datos. Los objetos de almacenamiento HTML 5 DOM de W3C ofrecen un modelo de almacenamiento global y de sesión mucho más sencillo para los datos de cadena de par de clave-valor. Los sitios pueden almacenar datos durante la vida de una pestaña o hasta que el sitio web o el usuario borren los datos.

Cada dominio, incluido su subdominio, tiene 10 MB de espacio de almacenamiento local. Esto ayuda a reducir la posibilidad de ataques entre dominios. De forma similar, cada pestaña de explorador tiene su propio almacenamiento de sesión. El almacenamiento DOM es sólo un mecanismo para que las aplicaciones web almacenen datos de una forma sencilla, sin bases de datos. Por ejemplo, no hay forma de hacer consultas complejas, como la búsqueda por valor.

Mensajería entre documentos (XDM)

La directiva de origen del sitio del explorador impide que las páginas web obtengan datos de otros dominios. Esto significa que los diferentes dominios de una página web individual no pueden comunicarse entre sí para ofrecer una experiencia más enriquecida. Los sitios web ofrecen una solución alternativa para esta directiva mediante la creación de IFrames anidados y la recuperación de los datos transmitidos a través de direcciones URL. Otra solución alternativa para esta directiva es hospedar directamente el script y otros archivos de recursos de otros dominios. Esta segunda solución alternativa permite un solo sentido de comunicación. Es también un riesgo de seguridad porque el script y los recursos incrustados se ejecutan con los mismos privilegios que el sitio web host y tienen acceso a los datos del usuario como los almacenados en cookies.

XDM ofrece un método postMessage alternativo que permite la comunicación de dominios diferentes con consentimiento mutuo. XDM ofrece un mecanismo mucho más sencillo y con mayor rendimiento para la comunicación bidireccional entre dominios que las soluciones alternativas anteriores.

Eventos de conectividad

Windows Internet Explorer 8 permite que las páginas web detecten si el explorador está o no en línea mediante la propiedad window.navigator.onLine y eventos en línea/sin conexión. Con esta información, puede activar escenarios sin conexión que utilicen el objeto de almacenamiento DOM. Por ejemplo, si un usuario inicia sesión en su página de correo Live y la conexión se interrumpe, la página podría solicitar al usuario que guardara un borrador en el almacenamiento DOM y permitir que el usuario siguiera editando el correo. Cuando se restaurara la conexión, el script recuperaría el mensaje de correo y lo enviaría al servidor.

Para obtener más información, consulte AJAX - Mejoras de conectividad en Internet Explorer 8.

Compatibilidad de CSS

Cada versión nueva de Windows Internet Explorer ha ido mejorando la compatibilidad con el estándar CSS, y se culmina en una compatibilidad completa para CSS 2.1. Las siguientes tablas muestran un resumen de las diversas propiedades mejoradas de CSS que admite Windows Internet Explorer 8 en comparación con Windows Internet Explorer 7. Estas tablas no ofrecen una lista completa de propiedades de CSS compatibles con Windows Internet Explorer 8; muestran sólo las propiedades de CSS que no eran compatibles o que sólo eran parcialmente compatibles con Windows Internet Explorer 7 pero que ahora admite Windows Internet Explorer 8. Para obtener más información acerca de la compatibilidad de CSS en Windows Internet Explorer y tablas ampliadas de compatibilidad con CSS, consulte Compatibilidad de CSS e Internet Explorer.

Un valor "Parcial" en una celda indica que esa característica sólo se implementa parcialmente en esa versión de Windows Internet Explorer. Para obtener más información, haga clic en el vínculo para ver la página de referencia de esa característica en MSDN.

Pseudoclases

CSS 2.1 

 

IE 7.0

IE 8.0

:active { sRules }

:active

Parcial

:after { sRules }

:after

No

:before { sRules }

:before

No

:focus { sRules }

:focus

No

:lang(C) { sRules }

:lang()

No

Listas

 CSS 2.1

 

IE 7.0

IE 8.0

{ list-style-type : sStyle }

list-style-type

Parcial

Color y fondo

CSS 2.1 

 

IE 7.0

IE 8.0

{ background-position : sPosition }

background-position

Parcial

Fuente y texto

CSS 2.1 

 

IE 7.0

IE 8.0

{ font-weight : sWeight }

font-weight

Parcial

{ white-space : sWrap }

white-space

Parcial

{ word-spacing : sSpacing }

word-spacing

Parcial

Contenido generado

CSS 2.1 

 

IE 7.0

IE 8.0

{ content : sContent }

content

No

{ counter-increment : sCounter }

counter-increment

No

{ counter-reset : sCounter }

counter-reset

No

{ quotes : sQuotes }

quotes

No

Borde y diseño

CSS 2.1 

 

IE 7.0

IE 8.0

{ border-collapse : sCollapse }

border-collapse

Parcial

{ border-spacing : sSpacing }

border-spacing

No

{ border-style : sStyle }

border-style

Parcial

{ caption-side : sLocation }

caption-side

No

{ empty-cells : sEmptyCells }

empty-cells

Parcial

Posición

CSS 2.1 

 

IE 7.0

IE 8.0

{ bottom : sBottom }

bottom

Parcial

{ display : sDisplay }

display

Parcial

{ left : sPosition }

left

Parcial

{ right : sPosition }

right

Parcial

{ top : sTop }

top

Parcial

{ z-index : vOrder }

z-index

Parcial

Imprimir

CSS 2.1 

 

IE 7.0

IE 8.0

{ orphans : nLines }

orphans

No

{ page-break-inside : sBreak }

page-break-inside

No

{ widows : nLines }

widows

No

Interfaz de usuario

CSS 2.1 

 

IE 7.0

IE 8.0

{ outline : sOutline }

outline

No

{ outline-color : sColor }

outline-color

No

{ outline-style : sStyle }

outline-style

No

{ outline-width : sWidth }

outline-width

No

CSS 3 

 

IE 7.0

IE 8.0

{ box-sizing : sSizing }

box-sizing

No

Funciones

CSS 2.1 

IE 7.0

IE 8.0

counter()

No

attr()

No

Palabras clave

CSS 2.1 

IE 7.0

IE 8.0

Inherit

No

Para obtener más información acerca de la compatibilidad de CSS en Windows Internet Explorer y tablas ampliadas de compatibilidad, consulte Compatibilidad de CSS e Internet Explorer.

Mostrar: