Михаил Терентьев

08.05.2019

Всё о поддержке CSS email-клиентами

6 652

У провайдеров электронной почты сложные отношения с каскадными таблицами стилей (CSS). Провайдер Gmail в браузере и клиент Outlook для Mac могут по-разному реагировать на одно и то же свойство. Адаптивная вёрстка в таких условиях — адская работа.

Михаил Терентьев

Основатель Mailfit & Letteros

Если вы занимаетесь email-рассылками, то сейчас ваша жизнь упростится. Предлагаем сводные таблицы свойств CSS, поддерживаемых email-клиентами.

1. <style> и <link>

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
<style> внутри <head>	yes	yes	no	yes
<style> внутри <body>	yes	yes	no	yes
<link> внутри <head>	no	no	no	no
<link> внутри <body>	no	no	no	no

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
<style> внутри <head>	yes	yes	yes	yes	yes
<style> внутри <body>	yes	yes	yes	yes	yes
<link> внутри <head>	yes	yes	yes	yes	yes
<link> внутри <body>	yes	yes	yes	yes	yes

Мобильный клиент

	iOS 6	Android 4.2	Android 2.3	Gmail App
<style> внутри <head>	yes	yes	yes	no
<style> внутри <body>	yes	yes	yes	no
<link> внутри <head>	yes	yes	yes	no
<link> внутри <body>	yes	yes	yes	no

2. CSS-селекторы элементов

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
*	no	no	no	no
E	yes	yes	no	yes
E[$attribute]	no	no	no	yes
E[$attribute=”$value”]	no	no	no	yes
E F	yes	yes	no	yes
E > F	no	yes	no	no
E + F	no	yes	no	yes
E ~ F	no	no	no	yes
E:link	yes	no	no	yes
E:visited	yes	yes	no	no
E:active	yes	yes	no	yes
E:hover	yes	yes	no	yes
E:focus	no	no	no	no
E:target	no	no	no	no
E:nth-child(n)	no	no	no	yes
E:nth-last-child(n)	no	no	no	yes
E:nth-of-type(n)	no	no	no	yes
E:nth-last-of-type(n)	no	no	no	yes
E:first-child	no	no	no	yes
E:last-child	no	no	no	yes
E:first-of-type	no	no	no	yes
E:last-of-type	no	no	no	yes
E::first-line	no	yes	no	yes
E::first-letter	no	yes	no	yes
E::before	no	no	no	yes
E::after	no	no	no	yes
E.classname	yes	yes	no	yes
E#id	no	yes	no	yes
E:not(s)	no	no	no	yes

Десктоп-клиенты

	Outlook 2007 — 2013	Outlook 2000 — 2003	Apple Mail	Windows Live Mail	Outlook для Mac
*	no	yes	yes	yes	yes
E	yes	yes	yes	yes	yes
E[$attribute]	no	no	yes	yes	yes
E[$attribute=”$value”]	no	yes	yes	yes	yes
E F	yes	yes	yes	yes	yes
E > F	no	no	yes	yes	yes
E + F	no	no	yes	yes	yes
E ~ F	no	yes	yes	yes	yes
E:link	yes	yes	yes	yes	yes
E:visited	yes	no	no	yes	no
E:active	no	yes	yes	yes	yes
E:hover	no	yes	yes	yes	yes
E:focus	no	no	yes	no	no
E:target	no	no	no	no	no
E:nth-child(n)	no	no	yes	no	yes
E:nth-last-child(n)	no	no	yes	no	yes
E:nth-of-type(n)	no	no	yes	no	yes
E:nth-last-of-type(n)	no	no	yes	no	yes
E:first-child	no	yes	yes	yes	yes
E:last-child	no	no	yes	no	yes
E:first-of-type	no	no	yes	no	yes
E:last-of-type	no	no	yes	no	yes
E::first-line	no	yes	yes	no	yes
E::first-letter	no	yes	yes	no	yes
E::before	no	no	yes	no	yes
E::after	no	no	yes	no	yes
E.classname	yes	yes	yes	yes	yes
E#id	yes	yes	yes	yes	yes
E:not(s)	no	no	yes	no	yes

Мобильные приложения

	iOS 6	Android 4.2	Android 2.3	Gmail App
*	yes	yes	yes	no
E	yes	yes	yes	no
E[$attribute]	yes	yes	yes	no
E[$attribute=”$value”]	yes	yes	yes	no
E F	yes	yes	yes	no
E > F	yes	yes	yes	no
E + F	yes	yes	yes	no
E ~ F	yes	yes	yes	no
E:link	yes	yes	yes	no
E:visited	yes	yes	yes	no
E:active	no	no	no	no
E:hover	no	no	no	no
E:focus	yes	no	no	no
E:target	no	no	no	no
E:nth-child(n)	yes	yes	yes	no
E:nth-last-child(n)	yes	yes	yes	no
E:nth-of-type(n)	yes	yes	yes	no
E:nth-last-of-type(n)	yes	yes	yes	no
E:first-child	yes	yes	yes	no
E:last-child	yes	yes	yes	no
E:first-of-type	yes	yes	yes	no
E:last-of-type	yes	yes	yes	no
E::first-line	yes	yes	yes	no
E::first-letter	yes	yes	yes	no
E::before	yes	yes	yes	no
E::after	yes	yes	yes	no
E.classname	yes	yes	yes	no
E#id	yes	yes	yes	no
E:not(s)	yes	yes	yes	no

3. Блоковая модель

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
border	yes	yes	yes	yes
border-radius [CSS3]	yes	no	yes	yes
box-shadow [CSS3]	yes	no	no	yes
height	yes	yes	yes	yes
margin	no	yes	yes	yes
padding	yes	yes	yes	yes
width	yes	yes	yes	yes
max-width	Частичная поддержка IE	Частичная поддержка IE	Частичная поддержка IE	Частичная поддержка IE
min-width	Частичная поддержка IE	Частичная поддержка IE	Частичная поддержка IE	Частичная поддержка IE

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
border	yes	yes	yes	yes	yes
border-radius [CSS3]	no	no	yes	no	yes
box-shadow [CSS3]	no	no	no	no	no
height	no	yes	yes	yes	yes
margin	yes	yes	yes	yes	yes
padding	Частичная поддержка	yes	yes	yes	yes
width	yes	yes	yes	yes	yes
max-width	no	no	yes	no	yes
min-width	no	no	yes	no	yes

Мобильная версия

	iOS 6	Android 4.2	Android 2.3	Gmail App
border	yes	yes	yes	yes
border-radius [CSS3]	yes	yes	yes	yes
box-shadow [CSS3]	no	no	no	no
height	yes	yes	yes	yes
margin	yes	yes	yes	yes
padding	yes	yes	yes	yes
width	yes	yes	yes	yes
max-width	yes	yes	yes	yes
min-width	yes	yes	yes	yes

4. Таблицы

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
border-collapse	yes	yes	yes	yes
border-spacing	yes	yes	yes	yes
caption-side	yes	yes	yes	yes
empty-cells	yes	yes	yes	yes
table-layout	yes	yes	yes	yes

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
border-collapse	yes	yes	yes	yes	yes
border-spacing	no	no	yes	no	yes
caption-side	no	no	no	no	yes
empty-cells	no	no	yes	no	yes
table-layout	yes	yes	yes	yes	yes

Мобильные приложения

	iOS 6	Android 4.2	Android 2.3	Gmail App
border-collapse	yes	yes	yes	yes
border-spacing	yes	yes	yes	yes
caption-side	no	yes	yes	yes
empty-cells	yes	yes	yes	yes
table-layout	yes	yes	yes	yes

5. Шрифты

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
direction	yes	yes	yes	yes
font	yes	yes	yes	yes
font-family	yes	yes	yes	yes
font-style	yes	yes	yes	yes
font-variant	yes	yes	yes	yes
font-size	yes	yes	yes	yes
font-weight	yes	yes	yes	yes
letter-spacing	yes	yes	yes	yes
line-height	yes	yes	yes	yes
text-align	yes	yes	yes	yes
text-decoration	yes	yes	yes	yes
text-indent	yes	yes	yes	yes
text-overflow [CSS3]	Частичная поддержка	Частичная поддержка	Частичная поддержка	Частичная поддержка
text-shadow [CSS3]	yes	yes	no	Кроме IE
text-transform	yes	yes	yes	yes
white-space	yes	yes	yes	yes
word-spacing	yes	yes	yes	yes
word-wrap [CSS3]	yes	yes	no	yes
vertical-align	yes	yes	yes	yes

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
direction	no	yes	yes	yes	yes
font	yes	yes	yes	yes	yes
font-family	yes	yes	yes	yes	yes
font-style	yes	yes	yes	yes	yes
font-variant	yes	yes	yes	yes	yes
font-size	yes	yes	yes	yes	yes
font-weight	yes	yes	yes	yes	yes
letter-spacing	yes	yes	yes	yes	yes
line-height	yes	yes	yes	yes	yes
text-align	yes	yes	yes	yes	yes
text-decoration	yes	yes	yes	yes	yes
text-indent	yes	yes	yes	yes	yes
text-overflow [CSS3]	no	yes	yes	yes	yes
text-shadow [CSS3]	no	no	yes	no	yes
text-transform	yes	yes	yes	yes	yes
white-space	yes	no	yes	yes	yes
word-spacing	no	yes	yes	yes	yes
word-wrap [CSS3]	no	yes	yes	yes	yes
vertical-align	no	yes	yes	yes	yes

Мобильный клиент

	iOS 6	Android 4.2	Android 2.3	Gmail App
direction	yes	yes	yes	yes
font	yes	yes	yes	yes
font-family	yes	yes	yes	yes
font-style	yes	yes	yes	yes
font-variant	yes	yes	yes	yes
font-size	yes	yes	yes	yes
font-weight	yes	yes	yes	yes
letter-spacing	yes	yes	yes	yes
line-height	yes	yes	yes	yes
text-align	yes	yes	yes	yes
text-decoration	yes	yes	yes	yes
text-indent	yes	yes	yes	yes
text-overflow [CSS3]	yes	yes	yes	yes
text-shadow [CSS3]	yes	yes	yes	yes
text-transform	yes	yes	yes	yes
white-space	yes	yes	yes	yes
word-spacing	yes	yes	yes	yes
word-wrap [CSS3]	yes	yes	yes	no
vertical-align	yes	yes	yes	yes

6. Цвет и фон

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
color	yes	yes	yes	yes
background	Не поддерживает изображения	yes	yes	yes
background-color	yes	yes	yes	yes
background-image	yes	yes	yes	yes
background-position	no	yes	yes	yes
background-repeat	no	yes	no	yes
HSL Colors [CSS3]	yes	yes	yes	yes
HSLA Colors [CSS3]	no	no	no	Кроме IE
Opacity [CSS3]	yes	no	no	Кроме IE
RGBA Colors [CSS3]	no	no	no	Кроме IE

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
color	yes	yes	yes	yes	yes
background	Кроме изображений	yes	yes	yes	yes
background-color	yes	yes	yes	yes	yes
background-image	no	yes	yes	yes	yes
background-position	no	yes	yes	yes	yes
background-repeat	no	yes	yes	yes	yes
HSL Colors [CSS3]	yes	yes	yes	yes	yes
HSLA Colors [CSS3]	no	no	yes	no	yes
Opacity [CSS3]	no	no	yes	no	yes
RGBA Colors [CSS3]	no	no	yes	no	yes

Мобильный клиент

	iOS 6	Android 4.2	Android 2.3	Gmail App
color	yes	yes	yes	yes
background	yes	yes	yes	Кроме изображений
background-color	yes	yes	yes	yes
background-image	yes	yes	yes	no
background-position	yes	yes	yes	no
background-repeat	yes	yes	yes	no
HSL Colors [CSS3]	yes	yes	yes	yes
HSLA Colors [CSS3]	yes	yes	yes	no
Opacity [CSS3]	yes	yes	yes	no
RGBA Colors [CSS3]	yes	yes	yes	no

7. Позиционирование и отображение

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
bottom	yes	no	no	yes
clear	yes	yes	yes	yes
clip	no	no	no	yes
cursor	yes	yes	no	yes
display	yes	yes	no	yes
float	no	yes	yes	yes
left	no	no	no	yes
opacity	yes	no	no	yes
outline [CSS3]	Частично	Частично	Частично	Частично
overflow	Частичная поддержка свойства	Частичная поддержка свойства	Частичная поддержка свойства	yes
position	yes	no	no	yes
resize [CSS3]	yes	yes	no	yes
right	yes	no	no	yes
top	yes	no	no	yes
visibility	yes	yes	no	yes
z‑index	no	no	no	yes

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
bottom	no	yes	yes	yes	yes
clear	no	yes	yes	yes	yes
clip	no	yes	yes	yes	yes
cursor	no	yes	yes	yes	yes
display	no	yes	yes	yes	yes
float	no	yes	yes	yes	yes
left	no	yes	yes	yes	yes
opacity	no	no	yes	no	yes
outline [CSS3]	no	no	yes	no	yes
overflow	no	yes	yes	yes	yes
position	no	yes	yes	yes	yes
resize [CSS3]	no	yes	yes	no	yes
right	no	yes	yes	yes	yes
top	no	yes	yes	yes	yes
visibility	no	yes	yes	yes	yes
z‑index	yes	yes	yes	yes	yes

Мобильный клиент

	iOS 6	Android 4.2	Android 2.3	Gmail App
bottom	yes	yes	yes	no
clear	yes	yes	yes	yes
clip	yes	yes	yes	no
cursor	yes	no	no	no
display	yes	yes	yes	no
float	yes	yes	yes	yes
left	yes	yes	yes	no
opacity	yes	yes	yes	no
outline [CSS3]	yes	yes	yes	no
overflow	yes	Частичная поддержка свойства	Частичная поддержка свойства	Частичная поддержка свойства
position	yes	yes	yes	no
resize [CSS3]	yes	no	no	no
right	yes	yes	yes	no
top	yes	yes	yes	no
visibility	yes	yes	yes	no
z‑index	yes	yes	yes	no

8. Списки

Веб-клиент

	Outlook.com	Yahoo!	Gmail	AOL
list-style-image	no	yes	no	yes
list-style-position	no	yes	no	yes
list-style-type	yes	yes	yes	yes

Десктоп-клиент

	Outlook 2007–2013	Outlook 2000–2003	Apple Mail	Windows Live Mail	Outlook для Mac
list-style-image	no	yes	yes	yes	yes
list-style-position	no	yes	yes	yes	yes
list-style-type	no	yes	yes	yes	yes

Мобильный клиент

	iOS 6	Android 4.2	Android 2.3	Gmail App
list-style-image	yes	yes	yes	no
list-style-position	yes	yes	yes	no
list-style-type	yes	yes	yes	no

По материалам: templates.mailchimp.com

6 653

Мы в рассылке

Мы в соцсетях