Probablemente una de los primeros trucos que encontré al comenzar a aprender a hacer páginas “bien” —o sea, con un editor de texto, HTML y CSS, no con Dreamweaver y tablas— es la técnica del image replacement. La idea es simple: reemplazar, por ejemplo, una cabecera por una imagen con CSS, prescindiendo de insertarla con el elemento <img src='lorem-ipsum.jpg' alt='Lorem Ipsum' /> ya que esto produciría en un código más accesible y semánticamente correcto.
HTML:
<h1 title="contrasentido">contrasentido</h1>
CSS:
h1{
display:block;
background:url(img/contrasentido.gif) top no-repeat;
width:402px;
height:55px;
text-indent:-9999em;
}
Las reglas básicas de esta técnica: “indentar” negativamente el texto del elemento en el que queremos realizar el reemplazo lo suficiente para que no aparezca en pantalla y especificar la imagen que deseamos mostrar como fondo. El atributo title en el elemento que será reemplazado sirve para poner los tooltips con los que MSIE solía mostrar, erróneamente, el texto alternativo de las imágenes… en otras palabras, completan la ilusión.
Hasta acá pareciera que todo está bien, sin embargo todas las técnicas de image replacement presentan problemas: algunos causados por comportamientos extraños navegadores poco actualizados (más específicamente, Explorer 5 y versiones antiguas de Opera), otras en escenarios que, si bien pueden resultarnos poco comunes, no vale la pena descartar (como que el usuario tenga desactivada la descarga de imágenes al mismo tiempo que activada la utilización de hojas de estilo), necesidad de agregar etiquetas vacías o poco/ningún valor semántico o de aplicar hacks específicos para algunos navegadores.
Continuar leyendo “¿Image replacement o simplemente imagen?”
