Crear emails interactivos en Gmail con selectores CSS

Cada vez más nos acercamos al ideal que pretendemos a la hora de desarrollar correos electrónicos, o por lo menos en algunos clientes de correo. Hace no mucho, los amigos de Gmail se han dispuesto a renderizar los selectores en css, es decir, la utilización de clases en emails. Pasamos a explicar en el siguiente código de ejemplo.

<html>
<head>
<style>
.divbox,
* [lang~="x-divbox"]:hover{
background-color: green !important;
color: white;
}
</style>
</head>
<body>
<div class="divbox" lang="x-divbox" style="padding:10px;width:100px;height:40px;background-color:#eeeeee;">Divbox Content</div>
</body>
</html>
Gmail Hover
Ejemplo Gmail Hover

 

 

 

 

 

 

 

 

 

Con la combinación de clases y selectores, tenemos ahora la libertad de crear emails con contenido interactivo para la mayoría de clientes, excepto las versiones de Outlook 2007-2013.

Como se puede ver, Gmail es muy estricto con los selectores simples, pseudo-clases o selectores de attributos. De todas maneras, si añadimos el selector universal “*” antes de nuestro estilo, podremos utilizar las pseudo-clases como :hover u otros selectores de atributos.

Aquí un resumen de como Gmail procesa el estilo CSS en el <head> del email

.divbox {..} //Permitido pero inútil - Gmail quita los atributos de clase de los elementos
#divbox {..} //Permitido pero inútil - Gmail quita los id de clase de los elementos
[class~="divbox"] {...} //Removido por Gmail
* [class~="divbox"] {...} //Permitido pero inútil - No antributos de clases
div {...} //Permitido pero muy generico para ser útil
div:hover {...} //Removido por Gmail
* div:hover {...} //Permitido!!!
* [lang~="x-divbox"] {...} //Permitido!!!
* [lang~="x-divbox"]:hover {...} //Permitido!!!
Gmail Rollover
Ejemplo Gmail Rollover

 

 

 

 

 

 

 

 

 

 

 

 

Imágenes de freshinbox.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *