Inliner CSS en línea
Convierte CSS de bloques style a estilos en línea en HTML. Pega tu código, opcional CSS extra, y obtén el resultado listo para email. El procesamiento se rea…
Empezar a usar
¿Qué hace esta herramienta?
Cuando pega HTML con estilos en bloque, muchos clientes de correo los ignoran. Esta herramienta toma las reglas CSS de los elementos <style> y las aplica directamente a cada elemento mediante el atributo style. Por ejemplo, si su HTML es:
<style>p{color:red}</style>
<p>Hola</p>El párrafo recibirá style="color: red;" en el resultado.
Procesamiento y limitaciones
La conversión se realiza localmente: no se cargan hojas de estilo externas ni recursos remotos. El navegador analiza el HTML y concatena el texto de todos los elementos <style> seguido del CSS adicional que usted haya provisto. Luego busca bloques de reglas simples (selector seguido de llaves) y aplica las declaraciones coincidentes a cada elemento. Los selectores no válidos se omiten.
Esta herramienta es liviana: no implementa completamente la cascada CSS, especificidad, consultas de medios, animaciones, pseudo-elementos, CSS anidado, hojas de estilo enlazadas externas ni estilos calculados. El navegador puede normalizar el HTML durante el análisis, así que inspeccione el resultado en su cliente de correo o navegador de destino. No es un saneador ni garantiza que la representación visual sea idéntica.
Ejemplo práctico
Supongamos que pega el HTML anterior y deja marcada la opción de quitar estilos. El resultado será un documento completo que comienza con <!DOCTYPE html>, sin el bloque <style>, y con el párrafo modificado a:
<p style="color: red;">Hola</p>Preguntas frecuentes
¿Qué sucede si mi CSS contiene selectores como :hover o @media?
Esos selectores no se aplican porque la herramienta solo reconoce selectores simples (por ejemplo, p, .clase, #id). Las reglas con pseudo-clases o consultas de medios se ignoran.
¿Puedo usar esta herramienta para CSS externo?
No. Solo procesa los estilos que están dentro de etiquetas <style> en el HTML pegado, más el CSS adicional que usted escriba en el segundo editor. No carga archivos .css externos.
¿El resultado es seguro para enviar como correo?
La herramienta no es un saneador ni un probador de compatibilidad. Convierte estilos, pero no elimina contenido malicioso ni garantiza que el correo se vea igual en todos los clientes. Siempre pruebe el resultado final en su cliente de correo.
Lista de verificación
- Pegue el HTML completo, no solo fragmentos.
- Si usa CSS adicional, asegúrese de que no contenga selectores complejos.
- Decida si desea eliminar los bloques
<style>del resultado. - Copie el resultado y pruébelo en su cliente de correo.
El procesamiento se realiza localmente en tu navegador.