En Foo Hack publicaron un recurso CSS que a veces utilizo y creo que estaría bien compartir, el problema es que no explican para qué sirve hacer lo que explican, y eso es lo que voy a hacer.

Hay tres valores principales para el atributo display de CSS; normal, block e inline-block.

• El primero no modifica el formato del contenedor al que se aplica, es decir, si es un div y se deja el display normal seguirá ocupando el 100% del ancho que disponga del contenedor padre.
• El segundo si lo modifica, puede usarse por ejemplo para enlaces, para hacer que el enlace ocupe un tamaño determinado y se pueda hacer click en toda la zona que ocupa visualmente, no sólo en el texto. Esto es quizá dificil de entender pero con un par de ejemplos es más fácil: los enlaces de la cabecera de Facebook a día de hoy podrían estar hechos con display:inline-block; por que el enlace ocupa un tamaño determinado y para pulsarlo no hace falta que el click se haga en el mismo texto del enlace. Si el display fuera normal, el enlace sólo serviría desde la zona de texto, si se hace click fuera no serviría de nada.
• display:block sirve para eso, pero puede que no siempre sea lo que se quiere hacer. El valor block posiciona los elementos uno encima del otro, y pocas veces se quiere hacer eso. Lo más normal es que se coloquen uno al lado del otro hasta que llegue al limite de ancho y entonces haga una fila nueva. Para eso se hizo el display:inline-block.

El problema es que en bastantes navegadores el valor inline-block simplemente no existe (en todos los nuevos funciona sin problemas) y ante la duda parece comportarse como un block. Pero hay una forma de que funcione bien en “todos” los navegadores (lo pongo entre comillas por que en Explorer 3, 4.01, 5.01 o 5.55 ni lo he probado). Sólo hay que utilizar estos valores y el hack * para algunos explorers.

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Aunque yo soy de los que piensa que lo mejor es no dejar acceder a la aplicación a quienes no actualizan su navegador, entiendo que haya quien utiliza navegadores antiguos por razones extrañas; por eso siempre van bien este tipo de “hacks” que ensucian el código y frenan la mejora de la web.

Articulos relacionados

• Obtener la URL que se esta visitando con PHP (0)
• Comprobar la validez de un dominio con PHP (0)
• Hydrax, Skyx y Paradise Engine (1)
• Eliminar posición de un array en PHP (2)
• UI is the killer feature (0)
• str_replace() de PHP en Javascript (0)
• Quitar el borde de los input con foco en Safari y Chrome (1)
• Centrar texto en vertical (1)
• PNGfix.js para Internet Explorer (0)
• Retrasar eventos y efectos de jQuery (0)

Hasta la última versión de Internet Explorer, la 8 incluida, las imagenes en formato PNG siguen mostrandose mal. Es uno de los problemas más grandes de Internet Explorer, por que las especificaciones del formato estan estandarizadas desde hace unos 10 años y aunque han mejorado el soporte para él, el comportamiento sigue siendo risible.

Lo mejor del formato PNG es que permite transparéncias con diferentes niveles del canal alpha (la intensidad de la opacidad), al contrario que el formato GIF que sólo permite alpha 100 o alpha 0. Pero Ningúna versión de Internet Explorer funciona como debería con las opacidades:

• En la versión 6 (lanzado en agosto del 2001) la transparéncia simplemente no existe y muestra la imagen con un extraño color de fondo que no he sabido adivinar de dónde sale.
• En la versión 7 se muestran bien, a no ser que la imagen tenga algún tipo de tratamiento con javascript (cambio de opacidad, …).
• Y la versión 8 viene a comportarse igual de mal que la 7.

En la captura de ejemplo se ve la misma imagen en los tres estados que intento describir. La primera imagen es vista con Internet Explorer 7 y 8 después de tratarla con Javascript. La segunda imagen es vista con cualquier navegador (sin contar versiones de IE anteriores a la 7). Y la tercera imagen es vista con Internet Explorer 6 (y supongo que los inferiores serán igual o peor).

Para solucionar el problema de la tercera imagen se pueden aplicar filtros especificos de Internet Explorer (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) que corrigen el problema del color de fondo. Pero si ya es suficientemente incómodo tratar incluso las imagenes de formas diferentes según el navegador que se esté utilizando, a una mente brillante se le ocurrió la idea de hacer un tratamiento automático con Javascript, hizo un pequeño script y lo llamó PNGFix.

El uso de PNGfix es muy simple, sólo hay que guardar un archivo .js e incluirlo en el documento que se quiera corregir.

Para incluirlo se utilizan estas lineas, que lo incrustarán sólo si el navegador es inferior a Explorer 7 (por que este ya no lo necesita).

<!--[if lt IE 7]>
<mce:script defer="defer" type="text/javascript" mce_src="pngfix.js"></mce:script>
<![endif]-->

Y el archivo en cuestión (pngfix.js) debería contener algo parecido a esto:

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

Explicado esto, sólo me queda alegrarme de que Digg, Facebook y Youtube hayan decidido (por fin) dejar de dar soporte a Internet explorer 6.

Articulos relacionados

• Base64 (encode y decode) en Javascript (1)
• La función str_replace() de PHP en Javascript (0)
• str_replace() de PHP en Javascript (0)
• Aprender jQuery, 1: Qué és y por qué usarlo. (0)
• Detectar petición AJAX con PHP (1)
• inline-block cross-browser (2)
• Retrasar eventos y efectos de jQuery (0)