5.1.1. —perdido, buscando el diseño ideal

Agregado Internet Explorer 5.2 for Mac.

Agregada más información para Links.

Esta anotación habla sobre el uso del elemento OBJECT sólo para insertar imágenes. Para información sobre como insertar Flash, es mejor leer A list apart: Flash satay: Embedding Flash while supporting standars.

• Introducción
• Solución para (casi) todos los navegadores
• Testcases
• Internet Explorer 6
• Internet Explorer 4, Internet Explorer 5.01 e Internet Explorer 5.5
• Internet Explorer 5.2 for Mac
• Firefox 1.0.7 y 1.5
• Netscape 6.2.1
• Netscape 4.8
• Opera 5.12 hasta Opera 9 Preview 2
• Konqueror 3.4.3 y 3.2.2
• Konqueror 3.2.2
• Dillo 0.8.4, Off by One y Act 10
• Lynx 2.8.5
• Links 2.1 pre13

Introducción

¿Por qué OBJECT y no IMG? Simplemente porque al poder ingresar código HTML como alternativa de OBJECT, tengo más libertad que con el atributo alt: puedo usar como alternativa un texto en que se indique el cambio de idioma, o una tabla, otra imagen…

Solución para (casi) todos los navegadores

<object data="URL de la imagen" width="X" height="Y" type="MIME type">
Texto alternativo opcional
</object>

Todos esos atributos son obligatorios. El MIME type debe ser el correcto.

JPEG

image/jpeg

GIF

image/gif

PNG

image/png

Anidar elementos OBJECT -- usar un OBJECT como alternativa de otro -- no es una opción en general.

El HTML dentro de OBJECT debe estar bien formado -- cada etiqueta de apertura debe tener su correspondiente etiqueta de cierre.

La prueba de dos atributos data muestra que los navegadores prefieren usar la imagen enlazada en la primera instancia de data, aunque la imagen en realidad no exista; en este caso muestran el texto alternativo.

Si el navegador elige mostrar el texto alternativo, las medidas definidas para OBJECT son ignoradas. OBJECT vacío declarando ancho y alto.

Testcases

• Sólo data
• Sólo type
• Sólo ancho y alto declarado
• Sólo ancho y alto declarado (CSS)
• data, type y ancho y alto declarado
• Tipo MIME no válido para type
• data, type y ancho y alto declarado (PNG)
• Tipo MIME válido pero diferente a la imagen enlazada
• OBJECT con codebase para resolver URI
• OBJECT con codebase apuntando a la imagen
• OBJECT como alternativa de OBJECT
• OBJECT como alternativa de OBJECT (PNG)
• Forzar texto alternativo de OBJECT
• Forzar el OBJECT anidado
• Redimensionar OBJECT
• Redimensionar OBJECT (CSS)
• Dos atributos data
• Dos atributos data (imagen inexistente)
• Dos atributos data y type definido
• OBJECT sin atributos
• OBJECT y un data vacío
• OBJECT y data enlazando un archivo inexistente
• OBJECT vacío declarando ancho y alto
• HTML mal formado dentro de OBJECT

Internet Explorer 6

En mis pruebas con Internet Explorer 6 sobre XP SP2, el navegador solicita permiso para mostrar el contenido. Siendo más especifico, muestra la barra de información que avisa que cierto contenido ha sido bloqueado por seguridad.

Internet Explorer se caracteriza por tener (casi) la peor implementación de OBJECT.

Lo primero que deben tener en cuenta es que no deben intentar usar OBJECT con imágenes PNG porque simplemente no se mostrarán: data, type y ancho y alto declarado (PNG). Existen diferentes métodos de configuración para arreglar este problema. Para los desarrolladores, la solución sería IE Objectifier: transformar los elementos OBJECT en IMG mediante XSLT. Para usuarios, la solución podría ser las configuraciones que explican en Internet Explorer doesn't display PNG images even though your web page claims it supports PNG. What's up with that?

Lo segundo, y no menos importante, es que siempre deben declarar el ancho y alto de la imagen para que sea visible. Comparen las pruebas de sólo data y sólo type con la de data, type y ancho y alto declarado. En los dos primeros casos OBJECT no es visible, pero sí forma parte del DOM.

El tercer problema, bastante molesto, es que las imágenes aparecen como contenidas dentro de un IFRAME, con un padding imposible de anular y barras de desplazamiento.

Las imágenes no son redimensionadas si los valores de ancho y alto son diferentes a los intrínsecos de la imagen, lo que se redimensiona es el IFRAME: Redimensionar OBJECT.

El elemento OBJECT puede ser redimensionado (no así la imagen) usando las propiedades width y height de CSS: Redimensionar OBJECT (CSS).

Internet Explorer no requiere que se declare el atributo type, pero si lo hacen, deben declarar un tipo MIME válido porque sino no se mostrará ninguna imagen. Tipo MIME no válido para type. Declarar un tipo MIME y enlazar un tipo de imagen distinto no representa una ofensa para Internet Explorer: Tipo MIME válido pero diferente a la imagen enlazada.

Cuando hay dos elementos OBJECT anidados, Internet Explorer muestra ambos: OBJECT como alternativa de OBJECT. Si una imagen es un PNG, aún así trata de mostrarla: OBJECT como alternativa de OBJECT (PNG). Si la imagen no existe, también tratará de mostrarla: Forzar el OBJECT anidado.

En la prueba de dos atributos data, Internet Explorer reserva un espacio para la imagen (y evita mostrar el texto alternativo) si el atributo type está definido: dos atributos data y type definido.

Internet Explorer 4, Internet Explorer 5.01 e Internet Explorer 5.5

Las pruebas fueron hechas usando las versiones standalone de Internet Explorer.

Las imágenes PNG son mostradas cuando el tipo MIME es image/jpeg o image/gif.

Internet Explorer 5.2 for Mac

No tengo acceso a este navegador, así que las pruebas no fueron exhaustivas. Sólo puedo confirmar dos cosas:

• El ejemplo de data, type y ancho y alto declarado se muestra perfectamente.
• El ejemplo de OBJECT como alternativa de OBJECT muestra el contenido de ambos elementos OBJECT.

Firefox 1.0.7 y 1.5

Si el atributo type menciona un tipo MIME desconocido, Firefox no muestra la imagén ni el texto alternativo e informa que se requiere un plugin: Tipo MIME no valido para type.

Netscape 6.2.1

Falla en mostrar el texto alternativo: si la imagen no existe, muestra un contenedor vacío: Forzar texto alternativo de OBJECT. Esto significa que también falla, entre otras, la prueba de OBJECT como alternativa de OBJECT; sólo muestra el primer OBJECT.

Netscape 4.8

Esta versión de Netscape no implementa OBJECT. En general muestra el texto alternativo.

Advertencia: En la prueba de OBJECT como alternativa de OBJECT muestra el texto alternativo del primer elemento y no muestra el resto del documento.

Opera 5.12 hasta Opera 9 Preview 2

Opera 9 Preview 2 es la última versión alfa estable, por eso la preferí sobre las weekly builds.

Hasta la versión 8.5 inclusive, es imposible acceder al menú contextual de la imagen.

La versión 5.12 falla la prueba de OBJECT como alternativa de OBJECT; sólo muestra el primer OBJECT.

En el caso de la prueba HTML mal formado dentro de OBJECT, Opera 9 Preview 2 muestra la imagén pero no cierra los elementos dentro de OBJECT sino hasta que encuentra la correspondiente etiqueta de cierre fuera de OBJECT.

Konqueror 3.4.3 y 3.2.2

Konqueror 3.4.3 forma parte de Kubuntu 5.10, de ahí que sea una versión interesante. Recién Konqueror 3.5 (liberado el 29 de noviembre de 2005) fue la primer versión en mostrar correctamente el test Acid2.

En la prueba de sólo data, la imagen se muestra dentro de un espacio reducido y con barras de desplazamiento.

En la prueba de sólo type, la imagen se muestra redimensionada a un tamaño muy pequeño.

En general, es incapaz de mostrar la alternativa de OBJECT. En el caso de forzar texto alternativo de OBJECT muestra un mensaje de error, pero no el texto alternativo. Sólo lo muestra en los casos de tipo MIME no válido para type y OBJECT sin atributos.

Konqueror falló las pruebas de OBJECT como alternativa de OBJECT: no muestra el OBJECT anidado ni ningún texto alternativo.

En la prueba de dos atributo data con type declarado, el mensaje de error no aparece, pero tampoco el texto alternativo.

Es incapaz de redimensionar la imagen: redimensionar OBJECT y redimensionar OBJECT (CSS); sólo redimensiona el contenedor de la imagen.

Konqueror 3.2.2

No es posible acceder al menú contextual de la imagén.

Sí sólo se define el tamaño, este aparece mal calculado y la imagen aparece rodeada de barras de desplazamiento: sólo ancho y alto declarado.

Sólo cuando tanto el tipo de imagen y su tamaño están bien definidos, la imagen se muestra correctamente: data, type y ancho y alto declarado.

Dillo 0.8.4, Off by One y Act 10

Ninguno de los dos tres implementó OBJECT y eligen mostrar el texto alternativo.

Tomando en cuenta que ambos los tres son capaces de mostrar imágenes, es casi una tontería que no lo hagan en estos casos. El terror a Flash y Java debe haber calado hondo en los desarrolladores de estos navegadores.

Lynx 2.8.5

Lynx no puede mostrar imágenes, pero muestran el texto alternativo en todos los casos.

Links 2.1 pre13

Aparentemente, en ciertas configuraciones, Links puede mostrar imágenes. Por supuesto, mi escaso conocimiento hace que esta prueba sea sobre una instalación por defecto.

Links , en modo sólo texto, no implementó OBJECT pero, en general, tampoco muestra el texto alternativo. Sólo lo muestra en los peores casos: dos atributos data, OBJECT sin atributos y HTML mal formado dentro de OBJECT.

El autor de Lechuga Hervida ha liberado un parche que corrige el error de no mostrar el texto alternativo: Notas sueltas.

Pero por otro lado, Links en modo gráfico —invocando el programa con el parametro -g— muestra correctamente el contenido de OBJECT en todos los casos (válidos). Gracias a Marco por semejante aporte.