Esta técnica es de esas cosas que habitualmente solo aprendes pegándote día a día con CSS. Fontanería pura y dura, pero que, a pesar de su extrema sencillez, tiene su encanto para enseñarte el poder del aparentemente inofensivo CSS. Es de esas ñapas (dicho con cariño) para usar CSS como una navaja suiza y que te pueden resolver la papeleta cuando ya lo das todo por perdido.
Pongámonos en situación. Tienes que modificar una página web donde hay imágenes insertadas en el html con la etiqueta <img>. Esas imágenes podrían unos ser iconos que te horrorizan y quieres modificarlos, pero tú solo puedes tocar la CSS, no tienes acceso al HTML. ¡Terror!
¿Cuándo podría darse esto? Vale, no es muy habitual, pero puede darse cuando contratas algún tipo software SAAS que gestiona algún tipo de contenido y tú no puedes modificar directamente el HTML generado. No es algo que te vaya a ocurrir todos los días, pero antes o después te encontrarás alguna situación extraña de estas que puedes solucionar solo con CSS y un poco de imaginación.
¿Cómo lo hacemos?
Manos a la obra. Al final del post te podrás descargar el código, pero ahora mismo lo veremos por partes. El truco pasa por usar box-sizing y un padding lateral para echar a un lado a la imagen original, que queda fuera de su propio contenedor para así mostrar la imagen de fondo.
En el ejemplo tenemos esta imagen:
<img class="original" src="img/logo-campusmvp.png" />
A la que le aplicaremos el siguiente CSS:
.sustituida {
box-sizing:border-box;
display:block;
width:115px; /*Ancho de la imagen nueva, aunque en este caso son iguales.*/
height:115px; /*Alto de la imagen nueva, aunque en este caso son iguales.*/
padding-left:115px; /*Padding igual al ancho de la imagen nueva*/
background: url(img/logo-campusmvp-fondo-blanco.png)
}
Y quedará así:
Como comentamos antes, la clave de esta técnica está en usar box-sizing para que el navegador no tenga en cuenta el padding lateral al calcular el ancho de la imagen. Puedes comprobarlo desactivando el box-sizing en las herramientas para desarrolladores del navegador (F12):
También es importante darle a la imagen unas dimensiones iguales a la imagen que vamos a usar de fondo para sustituir a la original, aunque en este ejemplo son iguales.
¡Eh! ¡Estás haciendo trampa! ¡Le has cambiado la clase a la imagen!
Bueno, sí, efectivamente. Estoy haciendo trampa. En el ejemplo le estoy cambiando la clase a la imagen para que se vea más claro qué es cada cosa. En el MundoReal™ no vas a poder hacerlo.
Es más, si tienes que usar este truco probablemente te encuentres incluso con una imagen sin class ni id, que ya sabemos que las desgracias nunca vienen solas...
Si Murphy te tiene ojeriza y te encuentras en este caso, no te quedará más remedio que recorrer el DOM desde la clase (o ID) más cercana usando selectores avanzados de CSS. Pero no pasa nada, los sabes usar perfectamente ¿verdad?.
¿Qué? ¿Que no sabes de que te hablo? Bien, en ese caso me veo en la obligación de recomendarte nuestro curso de HTML y CSS ;-) . Antes de aprender a correr hay que aprender a andar, y este curso te servirá para construir unos cimientos sólidos como la roca en lo que se refiere a HTML y CSS.
El detalle final
Volviendo al tema principal del post, todavía nos falta un pequeño detalle para prevenir que se nos descubra el truco. Si la imagen original no se carga por cualquier extraña razón ajena a nosotros, se nos va a ver el plumero porque el navegador nos va a delatar sin piedad... así:
¿Te parece poco probable esto? Sí, lo es. Pero también te digo, con la mano en el corazón, que estoy escribiendo este post porque conozco a alguien al que le ha pasado (y no fui yo), así que no está de más mencionar esta posibilidad. Esto lo podemos evitar usando un simple overflow:hidden :
.sustituida-modificada {
box-sizing:border-box;
display:block;
width:115px; /*Ancho de la imagen nueva, aunque en este caso son iguales.*/
height:115px; /*Ancho de la imagen nueva, aunque en este caso son iguales.*/
padding-left:115px; /*Padding igual al ancho de la imagen nueva*/
background: url(img/logo-campusmvp-fondo-blanco.png);
overflow:hidden;
}
Y quedará perfecto:
Puntos a favor de este truco:
- Te puede sacar las castañas del fuego en medio de un marrón.
- Podrás quedar como un auténtico héroe o heroína ante tus compañeros de departamento (si no lo saben, claro).
- Lo puedes usar con otros elementos de HTML, no solo con imágenes.
- Es compatible con todos los navegadores, incluido Internet Explorer desde la versión 8.
Y puntos en contra:
- Piénsatelo dos veces antes de usarlo y valora si realmente es necesario. ¿Qué ocurriría si te cambian el HTML de la noche a la mañana y sin previo aviso?
- En términos de buenas prácticas, el truco está en una zona gris. Al fin y al cabo CSS debería ser para modificar presentación, no para modificar contenido.
Como siempre, déjate guiar por el sentido común y usa sabiamente tus superpoderes de CSS. ;-)
Ah, ¡por supuesto!, el código de ejemplo lo puedes descargar haciendo clic en este enlace.
Fecha de publicación: