Un mejor uso de la imágenes con CSS
Hace unos meses Monitotxi ha dado un buena idea para aprovechar la semántica de las imágenes con CSS, a partir un otra técnica que había explicado usando un blockquote, utilizando la misma técnica, un poco de CSS 2 podemos ponerle un pie de texto a todas las fotos, imágenes que usamos en la web.
Por supuesto esto funciona en la mayoría de los navegadores que soportan bien CSS 2, Opera para generar contenido y auto numeración de elementos es el mejor y el más completo, le sigue Mozilla, Firebird, y al final de todo IE.
Para que entiendan un poco el efecto final, pueden ver este post de Porrons i Calçots, donde sale una imagen y debajo de la misma sale una descripción.
Lo primero que tenemos que hacer es ir a nuestra plantilla de CSS y crear una clase para las fotografías por ejemplo img.foto, luego abrimos llaves para copiar y pegar lo que he escrito abajo:
img.foto:after {
display: block;
content: attr(alt);
font: 9px geneva, tahoma, verdana, arial, sans-serif;
color: #666;
}
Ese fue el primer paso, ahora pasamos al código en XHTML de vuestra página:
<h3>Este es un titular</h3> <p>Este es un texto de prueba como pueden observar, es un texto muy simple, como el de un post.</p> <p><img src="aquawindow.png" alt="Ventana Aqua" class="foto" /></p>
Muy bien, era fácil, ahora viene la explicación técnica de todo esto. El texto en XHTML representa básicamente la estructura de un post, por ejemplo el tag <h3> representa el titulo de un blog y el tag <p> el texto que escribimos, y la imagen es el tag que escribimos en un nuevo párrafo, por eso está también encerrado en un <p>.
La imagen tiene que tener si o si la llamada a la clase, por ejemplo, en este caso cuando habíamos escrito en el css img.foto, foto es el nombre de la clase así que en el XHTML escribiremos class="foto", luego para comprender el efecto del CSS tenemos que remitirnos a este comando llamado content:, que es un tag que genera contenido a partir de un atributo de un tag de XHTML o un contenido que nosotros escribimos, de modo que si esta línea content: attr(alt); hace todo el trabajo de extracción del contenido del atributo alt="…" y lo escribe en la página cada vez que se cargue, si mágico.
El comando content: como había explicado anteriormente genera contenido, es por eso que yo he puesto que me genere el contenido (content: attr(alt);) a partir de el atributo alt="…" que yo escriba en cada imagen que yo suba a mi weblog.
Luego puede ir viendo otras propiedades que yo le he dado a la imagen para que llegue a tener un pie de página, una de ellas es la propiedad de visualización display: block, he usado block por que al ser una imagen de bloque por la fuerza creará una línea nueva cada vez que un objeto le siga, entonces si la lógica dice que un elemento en línea como la imagen le sigue un texto este saldría uno al lado del otro, pero si la imagen es de bloque, saldría la imagen primero alineada a la izquierda y luego en una nueva línea el texto generado.
Yo he logrado experimentar bastante con el tema de centrar imágenes, lo cual es muy fácil cuando tienen la propiedad por defecto de display: inline;, pero cuando las convertimos a bloque display: block;, la imagen por defecto se lanza hacia la izquierda… de modo que podemos hacer un hack bonito:
img.foto {
padding: 3px;
display: block;
<strong>margin-left: auto;
margin-right: auto;</strong>
}
He hecho que el elemento en bloque se mantuviera en el medio con márgenes automáticos, por que mi sitio tiene un diseño líquido, entonces el cuerpo de las notas puede variar, con margin-left: auto; y margin-right: auto;, soluciono este otro problema y ya puedo centrar las imágenes.
Ahora, esto está hecho para funcionar en un weblog, ¿Se imaginan todas las aplicaciones que puede tener esto? Pues yo me estoy imaginando unas cuantas… además de ahorrarnos escribir 2 veces lo mismo para tener un pie de página esto ya sirve y haciéndolo una sola vez.
Por cierto, si tienen algunas dudas, pueden mirar mi hoja de estilos y verificar alguno de los hacks escritos en esta nota.
Este truco no funciona en Internet Explorer, de modo que las imágenes quedarán como siempre. Otra cosa importante es: no se olviden de escribir alt="" bien descriptivos, no sólo para que tengan buenos pies de fotos, sino también para mejorar la comprensión de la imagen.
Si quieren más información sobre la propiedad content deben ir a al punto 12.2 La propiedad ‘content’ de la especificación oficial de CSS 2 traducido por SIDAR.
16 Respuestas a la entrada “Un mejor uso de la imágenes con CSS”
Escrito por Lander
Julio 3rd, 2003 at 12:30 pm
Interesante propuesta, si señor.
Escrito por Miguel A. Molina - jurbo
Julio 3rd, 2003 at 5:00 pm
a mi me encanta ver este tipo de hacks, disfruto mucho viendo este tipo de ideas de la gente.
me parece una buenísima idea, pero me he encontrado con 2 detallitos que no me han terminado de convencer:
- se pierde el alt, vamos, q al posicionar el puntero sobre la imagen ya no nos muestra la descripcion. sí, ya se que “para que la quieres si ya va en el pié de la imagen”, pero como estoy acostumbrado a ponerme sobre las imagenes para ver el alt, pues se me hace eso, “raro”.
- y el otro detallito: pues que en mozilla lo veo perfecto, pero parece ser que en IE 6.0 _no_ se ve
o al menos yo no lo veo.
saluditos.
Escrito por sysifus
Julio 3rd, 2003 at 9:56 pm
Sólo una matización. ¿No sería más lógico utilizar el atributo title en lugar del atributo alt?
Me parece más lógico, porque el atributo alt es para cuando no se ver la imagen, mientras que el atributo title contiene información complementaria.
Pero vamos, que realmente lo importante es la utilización del contenido generado en combinación con los pseudo-elementos after o before. Una pena que el navegador de moda no ofrezca soporte para selectores CSS de nivel 2.
Con todo, es una técnica con muchas más posibilidades todavía en el módulo correspondiente de CSS3 (en borrador).
Escrito por Fabio
Julio 3rd, 2003 at 11:50 pm
En IE 5.5 no se ve ese efecto, simplemente sale el ALT, pero no el texto al pie de la imagen.
Escrito por Miguel
Julio 4th, 2003 at 12:21 am
Son fascinantes las hojas de estilo
Escrito por Alex
Julio 4th, 2003 at 3:48 am
# Esta es la clase de artículos por las cuales uno regresa a Mini-D! Muy interesante, de veras.
# Ahora, tanto hablar de usabilidad, de estándares y que la pan con queso y se terminan c*** en los usuarios de IE?
y digo esto no por este bonito hack sino porque el tono en que todos -o casi- están hablando del IE es algo así como el mismo discurso que tienen los usuarios de Linux en contra de Windows, o los usuarios de Mac en contra de los de PC … una verdadera estupidez!
Y lo peor de todo es que todos tienen razón!!!
Pero vamos, como ya se dijo infinidad de veces: … lo que importa es lo que se hace con la herramienta! de nada sirve una Silicon Graphics en manos de un inútil … o lo que es peor, en manos de un mediocre!
Y a ver si funciona la enumeración.
Escrito por mini-d
Julio 4th, 2003 at 10:30 am
*sysifus:*
bq. Sólo una matización. ¿No sería más lógico utilizar el atributo title en lugar del atributo alt?
Según la especificación de la W3C, el elemento imagen -no- posee atributo @title=”…”@, entonces, para que todo esto quede claro, puedes ir a la sección de la especificación de la W3C donde explica el “elemento imagen (Objects, Images, and Applets in HTML documents)”:http://www.w3.org/TR/html4/struct/objects.html#h-13.2.
Escrito por sysifus
Julio 4th, 2003 at 11:49 am
Pues según la especificación HTML 4.01, el atributo title es admitido por la práctica totalidad de los elementos HTML, incluido, lógicamente el elemento IMG.
Escrito por mini-d
Julio 4th, 2003 at 1:29 pm
Pues más abajo dice que el elemento @img@ soporta @id@, @title@, etc… pero bien creo:
Creo que la mejor práctica siempre es usar alternative text para las imágenes, ya que no todos los browsers despliegan la información como un “tooltip text” usando title.
Usar title para los enlaces, es mejor, se pueden usar title y alt combinados, alt en las imágenes y title en los enlaces… además el lector para ciegos lee los alt, y sería muy confuso tener que leer dos descripciones distintas o iguales.
De todos modos es un tema interesante para debatir… creo que usar alternative text es mejor para las imágenes, me quedo con el indicio que me ha llevado a esta conclusión.
bq. @alt %Text; #REQUIRED — short description –@
También tenemos la posibilidad de ofrecer una mejor descripción, usando @longdesc@, por ejemplo… creo que es mejor combinar @alt@ y @longdesc@ por que simplemente para eso estuvieron hechos, el tema es que desde CSS no podría imprimir lo que está escrito en un @longdesc@.
Siguiendo, @longdesc@ nos permite escribir descripciones detalles con lujos mientras que @title@ nos deja solo describir un poco.
Yo sigo votando por la dupla @alt@ y @longdesc@.
Escrito por sysifus
Julio 4th, 2003 at 4:04 pm
En mi opinión el atributo alt contiene información alternativa, esto es, información útil cuando la imagen, por la razón que sea, no puede verse, mientras que el atributo title sí que puede agregar, en cierto modo, información a la imagen. Por ejemplo “Imagen de un barco” es un buen atributo alt para la imagen de un barco (valga la redundancia), mientras que el title podría ser “Mi regalo de cumpleaños” (qué más quisiera yo).
Por otro lado, el atributo title es de uso más general, no sólo se refiere a enlaces e imágenes. Y no es obligatorio, como el alt, pero eso, en mi opinión, no quiere decir nada. El atributo alt existe por un sabio criterio de accesibilidad, pero creo que su contenido debería ser irrelevante cuando la imagen se ve. El atributo title, por su parte, existe, como tantos otros, para aumentar la riqueza semántica del lenguaje.
Por cierto, una regla interesante:
*[title] { cursor:help; }
Escrito por mini-d
Julio 4th, 2003 at 6:35 pm
Según el spec el alt es una “descripción corta”, pero bien puede ser un reemplazo dependiendo la accesibilidad, por ejemplo si tengo que ponerle un alt a una flecha lo normal sería escribir alt=”→” y no poner alt=”Esta es una flecha”.
Por cierto, interesante regla, un poco arriesgada por el selector universal…
Escrito por sysifus
Julio 4th, 2003 at 7:30 pm
En ese caso que comentas, cualquiera de las dos opciones, tanto Â→Â como “esto es una flecha” sobraría cuando ya se ve una flecha. No me parece lógico que aparezca un “tooltip” con el alt (como hace IE por ejemplo).
Respecto a lo arriesgado de la regla, es fácil machacarla en ciertos elementos. Por ejemplo:
img[title], a[title] { cursor:auto; }
*[title] { cursor:help; }
Escrito por Monitotxi
Julio 4th, 2003 at 7:31 pm
En las especificaciones del W3C dice que el atributo
longdesctiene que ser del tipo URI (que apunte a la descripción larga de la imagen).Realizé una prueba con CSS para mostrar el valor de
longdescy resultó muy curioso porque si ponia un texto me añadia al principio la URL donde me encontraba.Escrito por mini-d
Julio 6th, 2003 at 3:14 pm
sysifus también puedes macharla con !important.
Escrito por sysifus
Julio 6th, 2003 at 7:48 pm
Si, es posible machacar cualquier regla utilizando !important, pero me resulta un método demasiado agresivo, que rompe con la lógica general de la hoja de estilos. Siempre prefiero utilizar cualquier otro método de cascada. Sólo utilizo reglas !important como usuario, nunca como autor.
En este caso a[title] tiene siempre más peso que *[title] esté donde esté, por especificidad.
Escrito por neural
Septiembre 3rd, 2003 at 10:48 pm
interesante usarlo con los acrónimos de minid.net
acronym:after { display: block; content: attr(title); padding-left:5px; font: 9px geneva, tahoma, verdana, arial, sans-serif; color: #999; }