¿Por qué falla el diseño flexbox o grid en mi email?

La mayoría de los clientes de correo, especialmente Outlook en escritorio, utilizan motores de renderizado antiguos que no soportan CSS moderno como flexbox o grid.

¿Qué diferencia hay entre los niveles de severidad?

El nivel estricto muestra todas las advertencias e información de accesibilidad, el equilibrado filtra avisos menores y el indulgente solo reporta errores críticos.

¿Este linter renderiza el correo en dispositivos reales?

No, realiza un análisis estático de reglas de compatibilidad de código HTML y CSS sin ejecutar ni previsualizar el correo en clientes reales.

¿Por qué es necesario usar estilos inline en los correos?

Clientes como Gmail para móviles suelen eliminar las etiquetas de estilo en el encabezado, por lo que los estilos inline garantizan que el diseño se mantenga.

¿Qué es una trampa de Outlook en HTML de email?

Son fallos de renderizado causados por el motor de Word en Outlook, como la falta de comentarios condicionales MSO o imágenes sin un ancho explícito.

Elysia Tools

Navegación

Development

Linter de HTML para Email

Verifica la compatibilidad entre clientes de plantillas HTML de email: flex/grid no soportado, CSS no inline, trampas de renderizado Word de Outlook, problemas de layout con tablas y falta de accesibilidad. Cubre las limitaciones conocidas de Gmail/Outlook/Apple Mail.

Detalles

Qué te ayuda a hacer esta herramienta

Atrapa los bugs de HTML-email que solo aparecen en Outlook, Gmail y Apple Mail — antes de enviar.

Por qué el HTML de email es diferente. El email sigue siendo en gran parte HTML de los 90 procesado por motores inconsistentes: Outlook usa Microsoft Word, Gmail elimina la mayoría de los <style>, Apple Mail es el más indulgente. Flexbox, grid y position:fixed fallan en la mayoría de clientes.

Qué revisa. CSS no soportado, CSS no inline, trampas de Outlook (VML), layout con tablas (role/cellpadding), imágenes (alt/width), accesibilidad (lang, contraste, formularios/script).

Niveles. 🔴 Error, 🟡 Warning, 🔵 Info. Strict muestra info; Lenient solo errores y warnings clave.

Limitaciones. Es un comprobador de reglas estático — no puede ejecutar el email en clientes reales.

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejecuciones de ejemplo preparadas

Haz clic en un ejemplo para completar el formulario automáticamente. Los archivos aún deben subirse.

2 ejemplos

CSS moderno en email (flex + grid)

Plantilla con flexbox y grid — ambos no soportados en Outlook. El linter los marca como error con alternativas basadas en tablas.

<div class="em-root">2 errors: display:flex and display:grid unsupported in Outlook. Fix: use tables or inline-block.

Email con tabla a prueba de fallos (limpio)

Un email bien construido con tablas: role=presentation, cellpadding=0, imágenes con alt y width, estilos inline. El linter no encuentra problemas.

<div class="em-root em-clean">✓ No issues found.</div>

Entradas

Completa los campos necesarios y ejecuta la herramienta.

2 opciones

ContenidoPega o escribe los valores principales.1

HTML del correotextareaObligatorio

AjustesAjusta formatos, rangos, números y modos.1

SeveridadselectOpcional

Resultado

Listo para ejecutar

Al ejecutar la herramienta, aquí verás archivos, texto, datos estructurados o salida en streaming.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Linter de HTML para Email

Qué te ayuda a hacer esta herramienta

Ejecutar esta herramienta

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Ejemplos que encajan con esta herramienta

Continuar con herramientas y temas relacionados

Ejecuciones de ejemplo preparadas

Entradas

Resultado

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Ejemplos

1. Detección de CSS moderno no compatible

2. Validación de estructura de tabla limpia

Preguntas frecuentes

Muestras de HTML con Imágenes

Muestras HTML

Muestras PDF

Muestras de Comunicación en Tiempo Real WebRTC

Verificador de accesibilidad

Generador de Data URI

Generador de informes de auditoria de accesibilidad

Extractor de imagenes y captions PDF

Herramientas de conversion de formatos de imagen y exportacion animada

Herramientas de limpieza, acabado y preparacion por lotes de imagenes

Herramientas de extracción, limpieza y exportación HTML a Markdown/PDF

Herramientas de metadatos de imagen, EXIF y limpieza de privacidad