¿Odias los anuncios? Ir Sin publicidad Hoy 

Inliner de correo CSS (Inliner de atributo de estilo)

DesarrolladorTexto

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

HTML con

Guía

CSS Email Inliner (Style Attribute Inliner)

Inliner de correo CSS (Inliner de atributo de estilo)

Convierta HTML con un bloque en marcado listo para correos electrónicos, moviendo cada regla de CSS a atributos de estilo inline. Los clientes de correo eliminan o ignoran los bloques , por lo que la inlinización es la única forma confiable de mantener su diseño intacto en Gmail, Outlook, Yahoo y Apple Mail.

Pegue su HTML completo en la izquierda; la herramienta analiza cada selector, resuelve la especificidad exactamente como lo hacen los navegadores, y escribe las declaraciones ganadoras en cada elemento correspondiente. Las reglas de pseudo-clase como :hover y cualquier consulta @media se mantienen en un bloque residual, ya que los clientes de correo que los soportan aún necesitan que estén allí.

Cómo Usar

Pegue su HTML — documento completo o fragmento con un bloque — en el campo de entrada.
Decida si mantener las consultas de medios y las reglas de pseudo-clase (recomendado para correos electrónicos responsivos).
Opcionalmente, elimine los atributos class del resultado una vez que las estilos estén inlaid.
Active o desactive el formato legible según lo que desee: resultado legible o compacto.
Copie el HTML inlaid o descárguelo como archivo, luego péguelo directamente en su proveedor de correos electrónicos.

Características

Mezcla consciente de especificidad – Resuelve IDs, clases, atributos y tipos de elementos exactamente como el cascado del navegador.
!important handling – Las declaraciones !important externas se mantienen correctamente por encima de estilos inline simples, siguiendo la especificación de CSS.
Preservación de consultas de medios – Las reglas @media responsivas se mantienen intactas para que sus puntos de ruptura móviles sigan funcionando.
Fallo de pseudo-clase – Las reglas :hover, :focus y ::before no pueden inlaid; la herramienta las mantiene en un bloque reducido.
Múltiples bloques – Maneja documentos con varias etiquetas de estilo en el <head> o <body>.
Eliminación opcional de clases – Elimina los atributos class=”” ahora redundantes para un payload más ligero.
Salida en formato legible – HTML indentado y legible o salida compacta en una sola línea.
100% del lado del cliente – Su HTML nunca abandona el navegador. No hay subida, no hay procesamiento en servidor.

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Por qué los correos electrónicos HTML necesitan CSS inlaid en lugar de usar un bloque de estilo?

Muchos clientes de correo — sobre todo versiones antiguas de Outlook y varios proveedores de correo web — eliminan completamente el elemento head o lo sandblan, ignorando así los estilos externos e integrados. Los atributos de estilo inline en cada elemento son la única forma de declaración que todos los principales clientes de correo respetan, por lo que el paso de inlinización es una exigencia dura para diseños que deben parecerse en Gmail, Outlook, Yahoo y Apple Mail.
¿Qué es la especificidad de CSS y por qué el orden del cascado importa para la inlinización?

La especificidad es el peso que CSS asigna a un selector basado en sus IDs, clases, atributos, pseudo-clases y tipos de elementos. Cuando dos reglas apuntan a la misma propiedad en el mismo elemento, el navegador mantiene el valor de la regla con mayor especificidad; en caso de empate, se resuelve por orden de origen, con la regla posterior ganando. Un inliner debe reproducir ese algoritmo declaración por declaración, de lo contrario una regla de baja especificidad podría sobrescribir una de alta especificidad y el diseño renderizado cambiaría silenciosamente.
¿Cómo interactúa la bandera !important con los estilos inline?

En el cascado estándar, los estilos inline se encuentran en una posición más alta que los estilos de autor, por lo que normalmente superan cualquier regla de clase o de elemento. La bandera !important es la excepción: una declaración !important desde un archivo de autor supera una declaración inline sin !important. Por eso, un botón coloreado blanco !important en una clase seguirá mostrándose blanco incluso si el elemento tiene style="color: blue".
¿Por qué no se pueden inlaid reglas de pseudo-clase como :hover o pseudo-elementos como ::before?

El atributo style contiene declaraciones que se aplican incondicionalmente al elemento en el que se encuentra. Las reglas de pseudo-clase describen un estado — hover, focus, checked — y los pseudo-elementos describen contenido generado que no tiene un nodo DOM real para atacharse. Ninguna de estas conceptos tiene una forma correspondiente en inline, por lo que cualquier inliner debe dejar esas reglas en un bloque residual para los pocos clientes de correo que los soportan.
¿Qué ocurre con las consultas @media durante el proceso de inlinización?

Las consultas de medios son reglas condicionales cuyas declaraciones solo se aplican cuando el viewport cumple una restricción. Como el atributo style no puede expresar una aplicación condicional, las consultas de medios deben conservarse verbatim dentro de un bloque . Los diseños responsivos dependen de consultas min-width y max-width para cambiar el diseño en móviles, por lo que eliminarlas eliminaría completamente el comportamiento responsive.