Подтвердить что ты не робот

HTML-письма: резервное копирование для mso условно?

Если вы похожи на меня, ваш глаз будет подергиваться к концу этого. Я не виню тебя.

Наш клиент попросил нас разработать гибкий шаблон электронной почты HTML с двумя характеристиками:

  • Использование как можно большего количества изображений
  • Использование как можно большего количества "полезных функций с поддержкой CSS". В основном это означает округленные углы на коробках.

Этот вопрос касается выполнения закругленных углов. Gmail и Apple поддерживают скругленные углы CSS, а Outlook требует векторной графики. Для остальных платформ они подходят с использованием квадратных ребер.

Здесь мы обнаруживаем и выполняем внешний вид:

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

Работает как шарм, даже обратно в Outlook 2000. Проблема в том, что я не могу понять, как создать резервную копию. Интуиция говорит об этом:

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

но он просто игнорируется в качестве комментария большинства других почтовых клиентов, а затем углы отсутствуют в коробках. Я прошу вас, прекрасные участники сообщества SO: можно ли развернуть разметку для всех платформ, кроме MSO? Может быть, есть более умный способ сделать это, что я не рассматривал? Или электронная почта HTML еще слишком каменна, чтобы попробовать что-то вроде этого?

4b9b3361

ОТВЕТЫ

Ответ 1

Нашел решение после большого размывания мозгов. Вместо этого:

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

Это работает очень хорошо:

<!--[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]-->

Все, что он делает, это обернуть резервную копию невидимого div в MSO и вместо этого развернуть векторное решение.

Надеюсь, это поможет кому-то в будущем!

Ответ 2

Это также работает без необходимости скрытого div.

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

Трюк состоит в том, чтобы повторно открыть комментарий, прежде чем закрывать его на 4-й строке -

<!---->

немного. Если вы этого не сделаете, IE отобразит "- > " перед содержимым без внешнего вида. Другие браузеры не имеют этой проблемы.

Ответ 3

Хотя решение CodeMoose скрывает резервную копию; в моих тестах он оставил место для того, где будет резерв (я читал, что Outlook не отображает переполнение: скрыто). Это не сработало для моего макета, так как он ударил другие элементы.

После большого поиска я обнаружил, что если вы сделаете небольшую модификацию предложения CodeMoose, он скроет ваш резерв и не добавит лишнего интервала:

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

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

Добавив "mso-hide: all;" к реальному стилю вашего резерва, Outlook рухнет и проигнорирует ваш резервный код, тем самым сохранив ваш макет. И ваш резерв все еще отлично отображает клиентов, которые могут обрабатывать сложный CSS, который вы использовали VML, чтобы попытаться реплицировать, например, в Outlook для Mac.

Ответ 4

У меня возникли проблемы с Outlook, обратившись к Times New Roman при использовании специального шрифта с объявлением @font-face. Мне не только пришлось скрывать декларацию @font-face из Outlook, используя условное выражение вокруг своего собственного блока стиля. (все остальные стили идут в другом блоке). Мне также пришлось дважды обмотать текстовое содержимое в промежутках с условным тегом. Просто чтобы привести пример того, как этот метод, опубликованный @CodeMoose (см. Выше), работает при использовании пользовательского шрифта.

<!--[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]-->

Сначала я попытался поместить условное выражение вокруг моего объявления шрифта "Museo300" внутри встроенного стиля, но это явно не сработало, поэтому мне пришлось дважды переносить содержимое на два диапазона с объявлениями стиля. Внутренний является условным для не 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>

Это отлично работает в том, чтобы Outlook отображал текст в Arial, а Apple mail отображал текст в шрифте Museo. Другие клиенты (например, почта на Android) имеют нормальное поведение при резервном копировании и просто показывают Arial.