Inliner de CSS
Pega un email HTML que use un bloque <style> y obtén el mismo email con cada regla escrita en atributos style en línea, el formato que mejor manejan Gmail, Outlook y otros clientes de correo. Las media queries y las reglas :hover se quedan en un bloque style, y una vista previa en vivo muestra el resultado.
Última actualización:
Cómo usar Inliner de CSS
- Pega tu email HTML o abre un archivo .html. Haz clic en Ejemplo para probarlo.
- Elige las opciones: eliminar los bloques style, conservar las media queries, conservar !important, añadir atributos width.
- Haz clic en Pasar CSS a línea; la salida se actualiza mientras escribes.
- Revisa la vista previa en ancho de escritorio y de móvil.
- Copia o descarga el HTML resultante y pégalo en tu plataforma de email.
Antes y después de pasar a línea
El inliner lee cada regla CSS, encuentra todos los elementos que coinciden con ella y escribe las declaraciones ganadoras en el atributo style de ese elemento.
| Entrada | Salida |
|---|---|
<style> p { font-size: 16px; } .muted { color: #666; } </style><p class="muted">Hola</p> | <p class="muted" style="font-size: 16px; color: #666;">Hola</p> |
img.logo { width: 120px; } | <img class="logo" style="width: 120px;" width="120"> |
a:hover { color: red; } | Se conserva en un bloque <style> (no se puede pasar a línea) |
@media (max-width: 600px) { … } | Se conserva en un bloque <style> para los clientes adaptables |
La especificidad, en resumen
| Selector | Especificidad (id, clase, tipo) |
|---|---|
p | 0, 0, 1 |
.card td | 0, 1, 1 |
a.btn | 0, 1, 1 |
#footer p | 1, 0, 1 |
Atributo style="…" | gana a cualquier selector (salvo que la regla sea !important) |
Consejos para emails HTML
- Usa tablas con
role="presentation"para el diseño; flexbox y grid no son compatibles con muchos clientes de correo. - Escribe los colores en HEX de 6 dígitos y los tamaños en px; los valores abreviados y las unidades rem son menos fiables en clientes antiguos.
- Mantén el tamaño total del email por debajo de unos 100 KB: Gmail recorta los mensajes más largos y oculta el resto detrás de un enlace.
- Envía siempre una prueba a bandejas de entrada reales después de pasar a línea, porque cada cliente tiene sus propias rarezas.
Preguntas frecuentes
¿Por qué los emails HTML necesitan CSS en línea?
Muchos clientes de correo eliminan o ignoran los bloques style en algunas situaciones, por ejemplo en ciertas vistas de Gmail, versiones antiguas de Outlook y algunas apps de webmail al reenviar un email. Los estilos escritos directamente en el atributo style de cada elemento son los mejor admitidos, así que pasarlos a línea hace que el email se vea igual en todas partes.
¿Qué reglas no se pueden pasar a línea?
Las media queries, los estados :hover y :focus, los pseudoelementos como ::before, @font-face y @keyframes no tienen equivalente en línea. Con la opción de conservarlas activada se agrupan en un único bloque style en el head, para que los clientes que las admiten las sigan usando.
¿Cómo decide el inliner qué estilo gana?
Sigue la cascada de CSS: las declaraciones !important ganan a las normales, después gana la mayor especificidad (id sobre clase sobre etiqueta) y luego la regla posterior. Un atributo style que ya tenga el elemento cuenta como el más específico, así que tus ajustes manuales se conservan.
¿Debo conservar !important en los estilos en línea?
Normalmente no. Una vez que un estilo está en línea ya tiene la máxima prioridad, y algunos clientes manejan mal !important en línea. Deja la opción desactivada salvo que lo necesites para ganar a los estilos propios de un cliente. Las reglas !important dentro de media queries siempre se conservan, porque deben sobrescribir los estilos en línea.
¿Se sube mi plantilla de email a algún sitio?
No. El análisis y el paso a línea se ejecutan completamente en tu navegador con su analizador HTML integrado, y la vista previa se muestra en un marco aislado con los scripts desactivados. No se envía nada a ningún servidor.
¿Por qué se añaden atributos width y height?
Algunas versiones de Outlook ignoran los anchos CSS de imágenes y tablas, pero respetan los atributos HTML width y height. El inliner copia los valores en píxeles del CSS a esos atributos para que el diseño se mantenga.
¿Admite hojas de estilo externas?
Las hojas de estilo enlazadas no se pueden obtener desde el navegador por motivos de privacidad y seguridad. Copia el contenido del archivo CSS en un bloque style del head y vuelve a ejecutar el inliner.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.