« Hay que renovar anualmente los .com.ar!! | Página de inicio | Algo de economia argentina »
16.04.2005
Usar background-image para reemplazar texto
Si, si, llegué tardisimo a esta tecnica, pero no deja de sorprenderme lo simple y eficaz que es!
La técnica
Estoy leyendo "The Zen of CSS design" y uno de los puntos mas importantes del CSS Zen garden es justamente la capacidad de reeemplazar un texto en HTML por una imagen, y esto se logra de la siguiente manera:
<h1><span>Título a ser reemplazado</span></h1>Hasta ahi no hay nada raro, solo un h1 cuyo contenido está encerrado en un span. Ahora bien si le agregamos el siguiente estilo:
h1 {
background: #ccc url(image.png);
width: 100px;
height: 50px;
}
h1 span {
display: none;
}
Entonces ahora esta todo mas claro :). A lo que esta contenido dentro del span del h1, le digo que desaparezca (display:none;) y al h1 le doy la ruta y tamaño de la imágen que quiero :D.
Ventajas
Es accesible!, pensemos que al desactivar los estilos, se va a ver el h1 con el texto incluido, ahora, si existe un problema...
Desventajas
¿Qué pasa si desactivo la carga de imágenes? Bueno, he aqui un grave problema :S. El texto no va a parecer porque estamos renderizando con nuestro CSS, y la imagen tampoco se va a ver porque le dijimos al browser que no la descargue ... Como se extraña el atributo alt en el CSS!
A priori y hasta que se me ocurra algo mejor, decidí incluir en el CSS, además del a imagen de fondo, un color para que el usuario al menos vea que hay algo. No es bueno ni mucho menos esta solución, pero en mi caso va a ser efectiva.
Acerca del inventor de esto
Como dije al principio es una técnica que esta en "The Zen of CSS design", pero el verdadero creador es Stop Design. Por mi parte me decidí a postear esto porque la vez que necesite de algo similar inventé otra cosa que también tenia una falencia (no se veía la imagen si se desactivaba el CSS, pero si tenia un alt) nadie me sugirió esto, asi que creo que no es tan famoso por estas latitudes.
14:40 Anotado en Web semántica | Permalink | Enviar a Email
Comentarios
Es algo viejo, y facil de usar. Yo lo aprendi solo xD
Las diferencias entre display:hidden; y display:none; es que hidden no lo muestra, pero sus estilos permanecen, digamos el margin y padding. Pero con el none, desaparece el archivo de la pagina, no lo ves, sus estilos desaparecen, simplemente.. ya no esta.
Es util para la accesibilidad cuando tienes webs grandes, les pones h3 con eso, y cuando uno no usa estilos aparecen.
Por ejemplo. navegacion , y luego le pones la navegacion por listas debajo. Igual con el contenido.
Un saludo!
Anotado por: NEO_JP | 16.04.2005
Si si, es viejo y simple, ahi esta su encanto :). Pero lo que aun no me gusta es que si navego con CSS activado sin descargar las imágenes, no veo nada... :S.
Anotado por: Diego | 16.04.2005
No lo entiendo. No entiendo para que sirve.
Anotado por: Javier | 16.04.2005
Mmm si, la verdad que la culpa es mia por no haber puesto un ejemplo! Aca te dejo el del articulo original ;).
http://www.stopdesign.com/articles/replace_text/ex_hello.html
Ahora te entiendo como te sentias Federico!! :P.
Anotado por: Diego | 16.04.2005
Hola.
Estoy impresionado, y gratamente sorprendido por todo lo que sabes sobre diseño web y el entusiasmo en ponerlo en común con el resto de navegantes, así que seguiré con más interés aún si cabe tu blog, por ver si aprendo algo. De todos modos, quizás puedas aclararme una duda, que si es como yo pienso, hasta podría ser una sugerencia: ¿no había un atributo title que actuaba parecido al alt? Lo que no sé es si puedes incluirlo en tu CSS, o cómo hacerlo, así que como ya me he arriesgado suficiente a parecer un ignorante, me despido.
Saludos desde España,
M@k
Anotado por: Mak | 16.04.2005
me pregunto ... de donde habras sacado ese libro ??? ¬¬ :P
Anotado por: gringo | 16.04.2005
Esa técnica segun A list apart, tiene graves problemas de accesibilidad.
Anotado por: Federico | 16.04.2005
Pues claro, no tiene alt, pero acaso existe alguna alternativa real, sin incluir la imagen en el HTML??
Anotado por: Diego | 16.04.2005
Ahh por cierto M@k, no lo que vos decis (alt o title) Solo funciona en HTML, no es un atriburo válido en CSS (1 y 2 al menos).
Anotado por: Diego | 16.04.2005
Lo que sucede es que como carga al estilo "background", pues la barra de carga no nos muestra que aun sigue cargando, pero lo esta.
Además es útil para accesibilidad, solo depende de Cómo lo uses ;)
En fin, un saludo, y muy bien con esos animos por el CSS, ya es hora que pongamos el CSS a trabajar, y a gritarle a los del MSN7_devBlog, que le pongan el CSS2 o los patearemos! XD
Anotado por: NEO_JP | 17.04.2005
Lo decía porque los lectores de pantalla tienden a no leer el texto oculto.
Anotado por: Federico | 17.04.2005
Malditos screen readers!! Primero era que no separaban links espaciados por caracteres que no fuesen espacios, y ahora no leen texto oculto! :@
¿Quien fabrica esas cosas?
Anotado por: Diego | 17.04.2005