viernes, 27 de marzo de 2026

Previsualización de correo electrónico que no se ve en el cuerpo del mensaje

Hace algún tiempo me di cuenta de que en algunos mensajes de correo electrónico, al leerlos en la interfaz web de Gmail, en el modo lista, se previsualiza un texto que luego, cuando entro al cuerpo del mensaje específico, no encuentro por ningún lado...
   

¿Cómo se hace eso? 

Pues tras investigar un poco, he descubierto que la técnica es sencilla, pero ingeniosa. 

Ese "texto de avance" o "preheader", que es como lo suelen llamar, se consigue simplemente introduciendo un bloque de texto que se hace invisible con CSS. En el formato de lista, Gmail previsualiza ese texto, porque no aplica las propiedades CSS, pero luego, al entrar al cuerpo del mensaje, la lectura con formato ya hace que no se visualice el texto por tener esas características. 

 Las formas de hacer ese texto invisible con CSS son varias, por ejemplo: display:none, visibility:hidden (no son exactamente lo mismo, pruébalo), texto blanco (color:#ffffff) sobre fondo blanco o poner la opacidad a 0 (opacity:0). 

En cuanto a la fuente, aunque técnicamente poner una fuente de tamaño 0 es un error de sintaxis (la especificación dice una "longitud positiva"), he comprobado que en varios navegadores, si se pone un tamaño de 0 (font-size:0px), en vez de dar error, el efecto es que simplemente no se muestra el texto, sin dar errores en la consola. Así que también valdría (aunque no lo aconsejo, por violar la sintaxis de la especificación de esa propiedad). 

Y, dada la versatilidad de CSS, seguramente haya algunas cuantas formas más de conseguir esto mismo. 

He puesto este texto en un fichero HTML y al abrirlo con el navegador he podido ir jugando con todas esas propiedades y viendo el efecto. Por si te interesa, aquí lo tienes:

<span style="display:none; visibility:hidden; font-size:1px; color:#ffffff; opacity:0">Este texto no se ve al abrir el correo, pero sí en la previsualización.</span>

<span style="font-size:30px; color:#0000ff">
Y esto es el resto del mensaje
</span>
Related Posts Plugin for WordPress, Blogger...