outlook - online - Correos electrónicos HTML: ¿Fallback para mso condicional?

svg in email signatures

Question

Si eres como yo, tu ojo se contraerá al final de la lectura de esto. No te culpo

Nuestro cliente nos ha solicitado que desarrollemos una plantilla de correo electrónico HTML sensible, con dos especificaciones:

1. Usando la menor cantidad de imágenes posible
2. Usando tantas "funciones de lujo habilitadas para css" como sea posible. Sobre todo, esto solo significa esquinas redondeadas en las cajas.

Esta pregunta es específicamente sobre la ejecución de las esquinas redondeadas. Gmail y Apple admiten esquinas redondeadas de CSS, y Outlook requiere gráficos vectoriales. Para las plataformas restantes, están bien con el uso de bordes cuadrados.

Así es como estamos detectando y ejecutando Outlook:

<!--[if mso]><v:shape>...</v:shape><![endif]-->

Funciona como un encanto, incluso de vuelta a Outlook 2000. El problema es que no puedo descubrir cómo crear una reserva. La intuición dice esto:

<!--[if !mso]>...<![endif]-->

pero la mayoría de los otros clientes de correo electrónico lo ignoran como un comentario, y luego faltan esquinas en las casillas. Les pregunto, buenos miembros de la comunidad SO: ¿es posible implementar el marcado para todas las plataformas excepto para MSO? Tal vez haya una forma más inteligente de lograr esto que no haya considerado. ¿O es que el HTML del correo electrónico todavía es demasiado viejo para intentar algo como esto?

Answer 1

Aunque la solución de CodeMoose sí esconde el respaldo; en mis pruebas, dejó espacio para donde estaría el respaldo (leí que Outlook no hace desbordamiento: oculto). Eso no funcionó para mi diseño ya que golpeó otros elementos.

Después de una gran cantidad de búsquedas, descubrí que si realizas una pequeña modificación a la sugerencia de CodeMoose, ocultará tu reserva y no agregará ningún espacio innecesario :

<!--[if mso]>
<v:shape>...</v:shape>
<![endif]-->

<[fallback goes here] style="mso-hide:all;">

Añadiendo "mso-hide: todo;" Al estilo real de su reserva, Outlook colapsará e ignorará su código de reserva, preservando así su diseño. Y su reserva todavía se muestra bien en los clientes que pueden manejar el CSS complejo que utilizó VML para intentar replicar, como en Outlook para Mac.

Answer 2

Encontré una solución después de mucha angustia cerebral. En lugar de esto:

<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->

Esto funciona muy bien:

<!--[if mso]>
    <v:shape>...</v:shape>
    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->

    [fallback goes here]

<!--[if mso]></div><![endif]-->

Todo lo que hace es envolver el respaldo en una división invisible en MSO y, en su lugar, implementa la solución vectorial.

¡Espero que esto ayude a alguien en el futuro!

Answer 3

Esto también funciona, sin la necesidad de la div oculta.

 <!--[if mso]>
     Outlook content
 <![endif]-->
 <!--[if !mso]> <!---->
     Non-outlook content
 <!-- <![endif]-->

El truco es volver a abrir el comentario antes de cerrarlo en la cuarta línea: la

<!---->

poco. Si no lo hace, IE muestra "->" antes del contenido de Outlook. Otros navegadores no tienen ese problema.

Answer 4

Tuve algunos problemas con Outlook recurriendo a Times New Roman al usar una fuente personalizada con la declaración de @ font-face. No solo tuve que ocultar la declaración @ font-face de Outlook usando el condicional alrededor de su propio estilo de bloqueo. (Todos los demás estilos van en otro bloque). También tuve que envolver dos veces mi contenido textual en tramos con la etiqueta condicional. Solo para dar un ejemplo de cómo funciona esta técnica según lo publicado por @CodeMoose (arriba) mientras se usa una fuente personalizada.

<!--[if !mso]><!-->
    <style type="text/css">    
        @font-face {
            font-family: ''Museo100'';
            src: url(''http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot'');
            src: url(''http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix'') format(''embedded-opentype''),
                 url(''http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff'') format(''woff''),
                 url(''http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf'') format(''truetype''),
                 url(''http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100'') format(''svg'');
            font-weight: normal;
            font-style: normal;
        }
<!--<![endif]-->

Primero traté de poner el condicional alrededor de mi declaración de fuente "Museo300" dentro del estilo en línea, pero obviamente no funcionó, así que tuve que envolver mi contenido en dos span con declaraciones de estilo. El interno es condicional para no MSO.

<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
    <!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
    Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts  
    <!--[if !mso]><!--></span><!--<![endif]-->
</span> 

Esto funciona muy bien para hacer que Outlook muestre el texto en Arial, mientras que el correo de Apple mostrará el texto en fuente Museo. Otros clientes (como el correo en Android) tienen un comportamiento de respaldo normal y solo muestran Arial.