Estoy generando un correo electrónico html que usa una hoja de estilo interna, es decir
<!doctype html>
<html>
<head>
<style type="text/css">
h2.foo {color: red}
</style>
</head>
<body>
<h2 class="foo">Email content here</foo>
</body>
</html>Cuando se ve en Gmail, parece que se ignoran todos los estilos de la hoja de estilo interna. Parece que Gmail ignora todos los estilos excepto las reglas en línea, p. Ej.
<h2 style="color: red">Email content here</foo>¿Es esta mi única opción para diseñar correos electrónicos HTML cuando se visualizan con Gmail?
html
css
gmail
html-email
Dónal
fuente
fuente
<html>etiqueta de apertura ;)Respuestas:
Las respuestas aquí están desactualizadas, a partir de hoy, 30 de septiembre de 2016. Actualmente, Gmail está implementando soporte para la
styleetiqueta enhead, así como para las consultas de medios. Si Gmail es su única preocupación, ¡puede usar las clases con seguridad como un desarrollador moderno!Como referencia, puede consultar los documentos CSS oficiales de gmail .
Como nota al margen, Gmail fue el único cliente importante que no admitió
style( referencia , hasta que se actualicen de todos modos). Eso significa que puede dejar de poner estilos de forma casi segura. Es posible que algunos de los clientes más desconocidos aún los necesiten.fuente
bodyetiqueta en lugar de laheadetiqueta.Use estilos en línea para todo. Este sitio convertirá sus clases a estilos en línea: http://premailer.dialect.ca/
fuente
Gmail inició el soporte básico para etiquetas de estilo en el área principal. No encontré nada oficial todavía, pero puedes probarlo tú mismo fácilmente.
Parece ignorar los selectores de clase e identificación, pero los selectores de elementos básicos funcionan.
creará una etiqueta de estilo en su propia área principal limitada al div que contiene el cuerpo del correo
fuente
Estoy de acuerdo con todos los que apoyan las clases Y los estilos en línea. Es posible que ya hayas aprendido esto, pero si hay un solo error en tu hoja de estilo, Gmail lo ignorará.
Podrías pensar que tu CSS es perfecto, porque lo has hecho tan a menudo, ¿por qué tendría errores en mi CSS? Ejecútelo a través del Validador de CSS (por ejemplo, http://www.css-validator.org/ ) y vea qué sucede. Hice eso después de encontrar algunos problemas de visualización de Gmail y, para mi sorpresa, varias declaraciones de estilo específicas de Microsoft Outlook aparecieron como errores.
Lo cual tenía sentido para mí, así que los eliminé de la hoja de estilo y los puse en un
only for Microsoftbloque de código, así:Este es solo un ejemplo simple, pero, quién sabe, podría ser útil en algún momento.
fuente
Como han dicho otros, algunos programas de correo electrónico no leerán los estilos CSS. Si ya tiene un correo electrónico web escrito, puede usar la siguiente herramienta de zurb para integrar todos sus estilos:
http://zurb.com/ink/inliner.php
Esto resulta extremadamente útil cuando se utilizan plantillas como las mencionadas anteriormente de mailchimp, monitor de campaña, etc., ya que, como ha descubierto, no funcionarán en algunos programas de correo electrónico. Esta herramienta deja su sección de estilo para los programas de correo que la leerán y pone todos los estilos en línea para obtener una legibilidad más universal en el formato que desea.
fuente
Tenga en cuenta que los servicios y herramientas para enviar correos electrónicos pueden incorporar su CSS por usted, permitiendo que CSS en las
<style>etiquetas funcione en Gmail.Por ejemplo, si envía correos electrónicos con MailChimp, el CSS de las
<style>etiquetas se incluirá automáticamente de forma predeterminada. Con Mandrill, puede habilitar esta funcionalidad (aunque está deshabilitada de manera predeterminada por razones de rendimiento ) marcando la casilla "Estilos CSS en línea en correos electrónicos HTML" en la sección "Enviar valores predeterminados" de la pestaña Configuración:fuente
Tuve el mismo problema al diseñar una plantilla en Mailjet. La solución del problema fue el código CSS minimizado dentro de las
<style>etiquetas.fuente