#frontend #qa
Мы уже рассказывали, как удобно организовать тестирование верстки писем в десктопном приложении MS Outlook. В этой заметке поговорим об особенностях верстки писем для веб-версии знаменитого почтового клиента и его расширенной версии, входящей в состав MS Office 365.
Наличие полноценного веб-движка позволяет корректно отрисовывать сложные письма, выгодно отличая эту версию от ее десктопного собрата. Это один из немногих почтовых веб-клиентов, который поддерживает темную тему, изменяя контент письма при переключении на нее.
Эта особенность, а также повышенные требования к безопасному содержимому веб-контента заставляют веб-версию Outlook достаточно сильно модифицировать верстку писем, добавляя собственные
!important-стили и удаляя сомнительные элементы.Перечислим несколько проблем верстки писем для веб-версии почтового клиента компании Microsoft из собственного опыта.
Проблема. Верстка не должна содержать ссылок-пустышек с атрибутом
href=#. Из соображений безопасности такие html-элементы будут заменены в DOM-дереве на статические альтернативы (div / span / table). На этапе отладки писем такое поведение может «сломать» верстку и внешний вид письма, например, если наша ссылка была стилизована под кнопку.Решение. Старайтесь всегда подставлять валидные и живые ссылки, даже на этапе отладки письма.
Проблема. При просмотре письма в мобильной версии почтового веб-клиента во все элементы попадает CSS-свойство
box-sizing: border-box. Его наличие может приводить к деформации изображений-иконок и прочих элементов.Решение. Добавьте стиль
box-sizing: content-box у проблемных элементов.Проблема. В мобильной версии веб-клиента тегу img добавляется стиль
max-width: 100%!important. В зависимости от DOM-структуры это может привести к деформации или полному удалению элемента из видимой контентной части письма. Решение. Определите стиль
max-width: <ширина_исходного_изобр.>px!important для элементов img.К счастью, последние две проблемы в мобильном приложении для устройств iOS и Android мы не встречали, а веб-версию всегда можно открыть в Chrome DevTools и упростить процесс отладки.