Reemplazo de imágenes CSS

La sustitución de imágenes CSS es una técnica de diseño web obsoleta que utiliza hojas de estilo en cascada (a diferencia de otras tecnologías, como Flash ) para reemplazar el texto de una página web con una imagen que lo contiene. Su objetivo es mantener las páginas accesibles para usuarios de lectores de pantalla , navegadores web de solo texto u otros navegadores donde la compatibilidad con imágenes u hojas de estilo está deshabilitada o no existe, permitiendo al mismo tiempo que la imagen varíe según el estilo. Una de las muchas técnicas fue la sustitución de imágenes de Fahrner , que lleva el nombre de Todd Fahrner, a quien se le atribuye la idea de la sustitución de imágenes en 2003. ^{[ 1 ]}

Con la introducción del soporte para fuentes web CSS en todos los principales navegadores web, la sustitución de imágenes mediante CSS se utiliza muy poco actualmente.

El método típico para insertar una imagen en un documento HTML es mediante el elemento <img>. Sin embargo, este método tiene sus inconvenientes en cuanto a accesibilidad y flexibilidad:<img>

• Si bien este altatributo está diseñado para proporcionar una representación textual del contenido de la imagen, esto impide el uso de marcado HTML en dicha representación textual.
• El uso de este elemento para mostrar texto es una función de presentación. Muchos diseñadores web sostienen que los elementos de presentación deben separarse del contenido HTML, colocando los primeros en una hoja de estilos CSS.<img>
• Las imágenes a las que se hace referencia mediante un elemento no se pueden cambiar fácilmente a través de CSS, lo que provoca problemas con las presentaciones alternativas.<img>

Se idearon técnicas de reemplazo de imágenes, como el método de reemplazo de imágenes de Fahrner, para solucionar estos problemas.

La implementación original de reemplazo de imágenes ^{[ 1 ]} descrita por Douglas Bowman utilizaba un encabezado, dentro del cual había un elemento que contenía el texto del encabezado:<span>

< h3 id = "firHeader" >< span > Encabezado de ejemplo </ span ></ h3 >

A través de hojas de estilo, se le dio al encabezado un fondo que contenía la imagen deseada, y se ocultó estableciendo su propiedad CSS en :<span>displaynone

# firHeader { ancho : 300 px ; alto : 50 px ; fondo : #fff url ( firHeader.gif ) arriba izquierda sin repetir ; }# firHeader span { display : none ; }

Sin embargo, pronto se descubrió que este método provocaba que algunos lectores de pantalla omitieran por completo el encabezado, ya que no leían ningún texto que tuviera una displaypropiedad de none. El método Phark posterior , desarrollado por Mike Rundle en 2003, utilizó en cambio la text-indentpropiedad para desplazar el texto fuera del área de la imagen, solucionando así este problema:

# firHeader { ancho : 300 px ; alto : 50 px ; sangría de texto : -5000 px ; /* ← Phark */ }

Sin embargo, el método Phark tenía sus propios problemas; en los navegadores visuales donde CSS estaba activado pero las imágenes desactivadas, no se mostraba nada.

También en 2003, el método Shea de Dave Shea, que lleva su nombre , resuelve ambos problemas mencionados anteriormente, a costa de un costo adicional :<span>

< h3 id = "header" >< span ></ span > Reemplazo de imagen revisado </ h3 >

Al posicionar de forma absoluta un elemento vacío sobre el texto, este queda efectivamente oculto. Si la imagen no se carga, el texto que se encuentra detrás sigue siendo visible. Por este motivo, no se pueden utilizar imágenes con transparencia con el método Shea.<span>

# encabezado { ancho : 329 px ; alto : 25 px ; posición : relativa ; }# encabezado span { fondo : url ( firHeader.gif ) no-repeat ; posición : absoluta ; ancho : 100 % ; alto : 100 % ; }

Desde entonces se han desarrollado más de una docena de métodos diferentes con distintos grados de compatibilidad y complejidad. ^{[ 2 ]}

• Reemplazo de imágenes revisado  : una descripción general de las diversas técnicas FIR por Dave Shea
• Sustitución definitiva de imágenes  : una técnica integral de sustitución de imágenes por Jesse Schoberg.
• Nueve técnicas para la sustitución de imágenes en CSS  : una revisión de técnicas de 2008 realizada por la revista de diseño web CSS-Tricks.