Saltar al contenido

Incrustador CSS para email

Traslada CSS de un bloque style a atributos style inline para que sobreviva en clientes de correo.

Entrada
Salida

Incrustador CSS para email

La mayoría de clientes de correo eliminan o ignoran CSS escrito en un bloque <style> — Gmail es el ejemplo más conocido. La solución es trasladar cada regla al elemento que apunta como atributo style="", y eso es exactamente lo que esta herramienta hace: pega HTML con un bloque <style> y obtén el mismo código con los estilos incrustados, listo para pegar en una campaña o plantilla transaccional.

La fusión respeta especificidad CSS por defecto, así que una regla como #footer vence a un selector a simple incluso si esa regla viene después en la hoja de estilos — desactiva "Respetar especificidad de selectores" para fusionar solo por orden de aparición. Las reglas que no se pueden incrustar — media queries, :hover, otras at-rules — nunca se descartan silenciosamente: "Mantener reglas que no se pueden incrustar" las deja en un bloque <style> recortado, mientras que "Eliminar bloque <style> original" decide si ese bloque se emite. "Añadir atributos width/bgcolor heredados" duplica width, height y background-color a los atributos simples que las versiones antiguas de Outlook esperan, "Eliminar clases e IDs no utilizados" limpia selectores que nada referencia, y "Minificar salida" colapsa espacios en blanco sobrantes.

Soporte de selectores cubre tipo, clase, ID y selectores de atributo, más combinadores descendientes e hijos — los patrones que usan las hojas de estilo de email reales. El atributo style="" existente de un elemento siempre vence sobre cualquier cosa fusionada, coincidiendo con cómo los navegadores aplican la cascada. Con "Mostrar advertencias de propiedades no compatibles" activado, propiedades que muchos clientes ignoran — float, position: fixed, transforms, box-shadow — se señalan en un comentario en la parte superior del resultado, para que las detectes antes de enviar una prueba.

Todo se ejecuta localmente en tu navegador: el HTML que pegas nunca se carga a ningún sitio. Copia el resultado, descárgalo como archivo .txt o envíalo directamente a otra herramienta para seguir limpiándolo.

Preguntas frecuentes

¿Por qué necesito incrustar CSS para email en primer lugar?
Muchos clientes de correo — especialmente la interfaz web de Gmail — eliminan bloques <style> del <head> o los ignoran completamente, pero sí respetan un atributo style="" en el elemento en sí. Incrustar es el workaround en el que confía toda la industria de HTML email.
¿Qué sucede con las media queries y las reglas :hover?
No pueden incrustarse en un elemento único, así que por defecto se mantienen en un bloque <style> recortado para los clientes que sí lo leen — desactiva "Mantener reglas que no se pueden incrustar" para descartarlas en su lugar.
¿Maneja la especificidad de selectores correctamente?
Sí. Un selector de ID supera un selector de clase, que supera un selector de tipo, independientemente del orden en que aparezcan las reglas — las mismas reglas que usa un navegador. Desactiva "Respetar especificidad de selectores" para fusionar solo por orden de aparición en su lugar.
¿Para qué sirven los atributos width/bgcolor?
Algunas versiones antiguas de Outlook renderizan tablas usando el motor de Word e ignoran CSS inline para fondos y tamaños. "Añadir atributos width/bgcolor heredados" duplica esos valores a los atributos HTML simples que esos clientes honran.
¿Mi HTML se carga a algún sitio?
No. Incrustar CSS se ejecuta completamente en tu navegador — tu plantilla de email nunca sale de tu dispositivo.