Reemplazo de imagen CSS
| Hojas de estilo en cascada |
|---|
| Conceptos |
| Filosofías |
| Instrumentos |
| Comparaciones |
El reemplazo de imágenes CSS es una técnica de diseño web que utiliza hojas de estilo en cascada para reemplazar el texto de una página web con una imagen que contiene ese texto. Su objetivo es mantener la página accesible para los 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, al tiempo que permite que la imagen difiera entre estilos. También llamado reemplazo de imagen de Fahrner para Todd Fahrner, una de las personas a las que originalmente se le atribuyó la idea del reemplazo de imagen en 2003. [1]
Motivación
El método típico de insertar una imagen en un documento HTML es a través de la <img>etiqueta. Este método tiene sus inconvenientes con respecto a la accesibilidad y la flexibilidad, sin embargo:
- Si bien el
altatributo está diseñado para proporcionar una representación textual del contenido de la imagen, esto excluye el uso de marcado HTML en la representación textual y causa problemas [se necesita un ejemplo ] con algunos robots de búsqueda. - Usar la
<img>etiqueta para mostrar texto es una presentación; muchos diseñadores web argumentan que los elementos de presentación deben separarse del contenido HTML colocando los primeros en una hoja de estilo CSS. - Las imágenes a las que se hace referencia mediante una
<img>etiqueta no se pueden cambiar fácilmente mediante CSS, lo que provoca problemas con las hojas de estilo alternativas.
El reemplazo de la imagen de Fahrner se diseñó para corregir estos problemas.
Implementaciones
La implementación de Reemplazo de imagen original [1] descrita por Douglas Bowman usó un encabezado, dentro del cual había un <span>elemento que contenía el texto del encabezado:
< h3 id = "firHeader" > < span > Título de muestra </ span > </ h3 >A través de las hojas de estilo, al encabezado se le dio un fondo que contenía la imagen deseada y se <span>ocultó estableciendo su displaypropiedad CSS en none:
# firHeader { ancho : 300 px ; altura : 50 px ; fondo : #fff url ( firHeader.gif ) arriba a la izquierda sin repetición ; }# firHeader span { display : none ; }Sin embargo, pronto se descubrió que este método provocaba que algunos lectores de pantalla se saltaran el título por completo, ya que no leerían ningún texto que tuviera la displaypropiedad de none. El último método de Phark , desarrollado por Mike Rundle en 2003, usó la text-indentpropiedad para empujar el texto fuera del área de la imagen, abordando este problema:
# firHeader { ancho : 300 px ; altura : 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 del mismo nombre de Dave Shea resuelve los dos problemas mencionados anteriormente, con el costo de un extra :<span>
< h3 id = "header" > < span > </ span > Reemplazo de imagen revisado </ h3 >Al colocar absolutamente un vacío <span>sobre el elemento de texto, el texto se oculta de manera efectiva. Si la imagen no se carga, el texto detrás de ella todavía se muestra. Por esta razón, las imágenes con transparencia no se pueden utilizar con el método Shea.
# encabezado { ancho : 329 px ; altura : 25 px ; posición : relativa ; }# intervalo de encabezado { fondo : url ( firHeader.gif ) sin repetición ; posición : absoluta ; ancho : 100 % ; altura : 100 % ; } Desde entonces, se han desarrollado más de una docena de métodos diferentes con diversos grados de compatibilidad y complejidad. [2]
Referencias
- ↑ a b Bowman, Douglas (7 de marzo de 2003). "Uso de la imagen de fondo para reemplazar el texto" . Stopdesign . Consultado el 5 de abril de 2011 .
- ↑ Mosley, Marie (3 de noviembre de 2015). "El Museo de Reemplazo de Imágenes" . Trucos CSS . Consultado el 30 de marzo de 2019 .
enlaces externos
- Reemplazo de imagen revisado : una descripción general de las diversas técnicas FIR por Dave Shea
- Reemplazo de imágenes definitivo : una técnica integral de reemplazo de imágenes de Jesse Schoberg
- diseño web
- Hojas de estilo en cascada
