4171
Отличные новости! Outlook.com и Office 365 (так же известный как OWA), теперь поддерживает фоновые изображения в CSS. До этого момента, веб-почта от Microsoft поддерживала только табличные атрибуты фоновых изображений и даже не смотрела в сторону фоновых изображений. Эти ограничения заставляли разработчиков писем использовать табличные фоны атрибутов для того, чтобы фоновые изображения показывались в Outlook.com.
Но теперь это поддерживается, как и классическим, так и бета-версией веб-клиента Outlook. Так же это изменение распространилось на Outlook iOS и Android.
В чем польза фоновых изображений CSS?
Ключевым преимуществом фоновых изображений в CSS над фоном через табличный атрибут является возможность выставлять размеры и позиционирование для фонового изображения. Это позволяет разработчикам устанавливать размеры для фонов, чтобы выставлять размер контейнера или использовать большие изображения по ретину как фоновые, чтобы придать письму безупречный вид на всех устройствах.
Фоновые изображения, как атрибуты в таблице
<table width="500"><tr><td background="bgimage.jpg"> ... </td></tr></table>
В CSS это бы выглядело таким образом
background-image: url('/bgimage.jpg')
Фоновые изображения еще не всегда поддерживаются
Всё ещё существует несколько клиентов, которые не поддерживают фоновую графику через CSS или вообще любые фоновые изображения, так что в зависимости от вашей аудитории, вам всё же стоит продолжать использовать фоновые атрибуты вместе с CSS для почтовых клиентов, которые это поддерживают. В любом случае, всегда проверяйте, что вы выбрали подходящий фоновый цвет для тех случаев, когда фоновые изображения не поддерживаются.
Например, Outlook 2007 – 2016 для Windows требует VML, а Gmail App для аккаунтов не в Google не поддерживают фоновые изображения. IBM Lotus Notes 8.5 – 9 поддерживают только атрибуты фоновых изображений.
Поддерживаемые фоновые свойства в outlook.com
Outlook.com поддерживает фоновые изображения в CSS, как в коротком варианте, так и в отдельных свойствах.
background: url('/bgimage.jpg') center / cover no-repeat #888888;
Учитывая причуды таких почтовых клиентов как Yahoo! Mail с короткими стилями, мы советуем вам всё же использовать отдельные свойства фона для изображений. Следующие фоновые свойства теперь поддерживаются в Outlook.com
background-image background-repeat background-size background-position background-color background-origin background-attachment
