Pasa el CSS de un correo a estilos en línea
Outlook y varios webmails ignoran o eliminan el bloque <style>. Ponerlo en línea es el paso aburrido y mecánico entre un diseño que funciona en el navegador y otro que funciona en la bandeja de entrada.
- Funciona dentro de tu navegador
- Funciona sin conexión
- Sin subir archivos
- Sin registro
- Sin marca de agua
Cargando la herramienta…
Cómo funciona
- Pega el HTML con su bloque <style>.
- Pulsa «Inline the CSS» (pasar el CSS a línea).
- Copia o descarga el resultado, y compruébalo en la previsualización de abajo.
Por qué no se sube nada
Todo lo que hace esta página lo ejecuta código que corre dentro de la pestaña de tu navegador, con el mismo motor que dibuja las páginas web. El archivo se lee del disco a la memoria de la pestaña, se transforma ahí y se vuelve a escribir como descarga. No se envía a ninguna parte: ni a nosotros, ni a terceros.
Compruébalo tú mismo
- Abre las herramientas de desarrollo del navegador (F12) y elige la pestaña «Red».
- Carga tu archivo y ejecuta la herramienta.
- Las únicas peticiones que verás descargan el código de la propia herramienta —y, en unas pocas herramientas pesadas, su motor de código abierto desde un CDN público—, más un pequeño aviso de visita a loreatec.jp (dirección y título de la página, nada más). Ninguna lleva tu archivo.
Preguntas frecuentes
¿Por qué no se pueden poner en línea las media queries?
Porque un estilo en línea no lleva ninguna condición: se aplica siempre. Una media query es una condición, así que solo puede vivir en un bloque de estilos. Por eso un correo adaptable necesita las dos cosas: estilos en línea para el diseño base y un bloque para el diseño de móvil, asumiendo que los clientes que lo eliminan mostrarán el diseño base.
¿Qué pasa con :hover?
El mismo problema y la misma respuesta: se queda en el bloque de estilos. Trata los efectos al pasar el ratón como un extra para los clientes que los admiten, nunca como algo de lo que dependa el mensaje.
¿Cuál gana, mi estilo en línea o la hoja de estilos?
El tuyo. Todo lo que ya estaba en un atributo style se conserva y se coloca detrás de las reglas que vienen de la hoja de estilos, así que las sigue sobrescribiendo, igual que en un navegador.
¿Es lo mismo que hace mi herramienta de boletines?
La mayoría lo hace al enviar, sí. Esto es para cuando entregas el HTML a otra persona, envías por una API, o estás averiguando por qué una regla no ha sobrevivido.