Фоновые изображения в CSS теперь поддерживаются Outlook.com

Отличные новости! 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

Google My Business начал тестирование продвинутой верифиакции

3 совета по оптимизации YouTube видео для маркетологов

7 инструментов для идеального сочетания шрифтов на вашем сайте

Традиционный PR уже не работает. Настала эра inbound PR.

Получай лучшие статьи по
интернет-маркетингу на
свою почту