Estilos en línea para correo electrónico

Muchos clientes de correo — sobre todo Gmail web antes de mayo de 2016 y varias aplicaciones móviles todavía hoy — eliminan o reescriben los bloques <style> y las hojas de estilo externas. Los atributos en línea style="..." son el único CSS que tiene garantizado sobrevivir en todos los clientes.

Escribir estilos en línea manualmente resulta difícil de mantener. Escriba el correo con etiquetas <style> normales y nombres de clase, y después ejecute un inliner (Juice, Premailer, mjml) durante la compilación para copiar cada regla en el atributo style del elemento correspondiente antes de enviarlo.

Los estilos en línea tienen la especificidad más alta, salvo !important. Una media query que quiera sobrescribir un valor en línea debe utilizar !important en cada propiedad, porque de lo contrario la declaración en línea prevalece independientemente del contexto de @media.

Los inliners solo copian las reglas que coinciden con elementos individuales; los bloques @media permanecen dentro de la etiqueta <style> porque no se pueden aplanar. No hay problema: Gmail y otros clientes que eliminan estilos mantienen intactos los estilos en línea, y los clientes que respetan las etiquetas <style> aplican las media queries por encima de ellos.

Algunos clientes fallan con la sintaxis abreviada: font: 14px/1.4 Arial puede ignorarse por completo. Use la forma extendida (font-family, font-size, line-height) para que cada propiedad funcione o falle de forma independiente.

El modo oscuro invierte automáticamente los colores en muchos clientes. Establecer explícitamente color y background-color en los contenedores de texto evita catástrofes de texto negro sobre fondo negro. Combine siempre ambos.

Limítese a px para los tamaños. rem, vh y vw tienen una compatibilidad irregular. Los porcentajes funcionan en las tablas para diseños de ancho completo; los anchos absolutos en píxeles de las tablas y celdas internas se renderizan de forma idéntica en todos los clientes.

Las fuentes web mediante @font-face funcionan en Apple Mail, iOS Mail y Thunderbird, pero no en Outlook ni Gmail. Use una pila de fuentes seguras para la web como valor en línea (Arial, Helvetica, sans-serif) y reserve @font-face exclusivamente como mejora progresiva para los clientes que la admitan.

La propiedad background-image en línea sobre un div funciona en los clientes modernos, pero Outlook la ignora. Use bgcolor como alternativa y VML condicional <v:rect> para Outlook, de modo que todos los clientes representen un fondo visualmente equivalente incluso cuando no sea posible lograr una fidelidad total.

Los estilos en línea pueden verse bien en la vista previa de un navegador, pero aun así mostrarse de forma diferente en Gmail, Outlook o iOS Mail. Use Litmus, Email on Acid o las vistas previas gratuitas de Mailtrap para verificar cada cliente importante antes de enviar la campaña.

Añada un pequeño restablecimiento en la etiqueta <style> (margin: 0 en body, line-height: 100% en tablas, border: none en imágenes) para neutralizar los estilos predeterminados de los clientes. Envuélvalo en una media query si desea aplicarlo solo donde se respete <style>.

¿Por qué las media queries en el correo HTML requieren !important en cada propiedad?

El correo electrónico necesita estilos en línea para que sobrevivan a la eliminación de estilos por parte de los clientes, pero normalmente genere los estilos del autor en <style> y en línea durante la compilación. Use !important dentro de las media queries para superar la especificidad de los estilos en línea, prefiera propiedades desarrolladas en lugar de abreviaturas, establezca explícitamente color y background-color, limítese a unidades px y pruebe en clientes reales antes de enviar.