Блог Верстка
77 минут на чтение
2489
0

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

77 минут на чтение
2489
0

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

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

1. <style> и <link>

Веб-клиент

Outlook.comYahoo!GmailAOL
<style> внутри <head>yesyesnoyes
<style> внутри <body>yesyesnoyes
<link> внутри <head>nononono
<link> внутри <body>nononono

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

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

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

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

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

Веб-клиент

Outlook.comYahoo!GmailAOL
*nononono
Eyesyesnoyes
E[$attribute]nononoyes
E[$attribute=”$value”]nononoyes
E Fyesyesnoyes
E > Fnoyesnono
E + Fnoyesnoyes
E ~ Fnononoyes
E:linkyesnonoyes
E:visitedyesyesnono
E:activeyesyesnoyes
E:hoveryesyesnoyes
E:focusnononono
E:targetnononono
E:nth-child(n)nononoyes
E:nth-last-child(n)nononoyes
E:nth-of-type(n)nononoyes
E:nth-last-of-type(n)nononoyes
E:first-childnononoyes
E:last-childnononoyes
E:first-of-typenononoyes
E:last-of-typenononoyes
E::first-linenoyesnoyes
E::first-letternoyesnoyes
E::beforenononoyes
E::afternononoyes
E.classnameyesyesnoyes
E#idnoyesnoyes
E:not(s)nononoyes

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

Outlook 2007 — 2013Outlook 2000 — 2003Apple MailWindows Live MailOutlook для Mac
*noyesyesyesyes
Eyesyesyesyesyes
E[$attribute]nonoyesyesyes
E[$attribute=”$value”]noyesyesyesyes
E Fyesyesyesyesyes
E > Fnonoyesyesyes
E + Fnonoyesyesyes
E ~ Fnoyesyesyesyes
E:linkyesyesyesyesyes
E:visitedyesnonoyesno
E:activenoyesyesyesyes
E:hovernoyesyesyesyes
E:focusnonoyesnono
E:targetnonononono
E:nth-child(n)nonoyesnoyes
E:nth-last-child(n)nonoyesnoyes
E:nth-of-type(n)nonoyesnoyes
E:nth-last-of-type(n)nonoyesnoyes
E:first-childnoyesyesyesyes
E:last-childnonoyesnoyes
E:first-of-typenonoyesnoyes
E:last-of-typenonoyesnoyes
E::first-linenoyesyesnoyes
E::first-letternoyesyesnoyes
E::beforenonoyesnoyes
E::afternonoyesnoyes
E.classnameyesyesyesyesyes
E#idyesyesyesyesyes
E:not(s)nonoyesnoyes

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

iOS 6Android 4.2Android 2.3Gmail App
*yesyesyesno
Eyesyesyesno
E[$attribute]yesyesyesno
E[$attribute=”$value”]yesyesyesno
E Fyesyesyesno
E > Fyesyesyesno
E + Fyesyesyesno
E ~ Fyesyesyesno
E:linkyesyesyesno
E:visitedyesyesyesno
E:activenononono
E:hovernononono
E:focusyesnonono
E:targetnononono
E:nth-child(n)yesyesyesno
E:nth-last-child(n)yesyesyesno
E:nth-of-type(n)yesyesyesno
E:nth-last-of-type(n)yesyesyesno
E:first-childyesyesyesno
E:last-childyesyesyesno
E:first-of-typeyesyesyesno
E:last-of-typeyesyesyesno
E::first-lineyesyesyesno
E::first-letteryesyesyesno
E::beforeyesyesyesno
E::afteryesyesyesno
E.classnameyesyesyesno
E#idyesyesyesno
E:not(s)yesyesyesno

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

Веб-клиент

Outlook.comYahoo!GmailAOL
borderyesyesyesyes
border-radius [CSS3]yesnoyesyes
box-shadow [CSS3]yesnonoyes
heightyesyesyesyes
marginnoyesyesyes
paddingyesyesyesyes
widthyesyesyesyes
max-widthЧастичная поддержка IEЧастичная поддержка IEЧастичная поддержка IEЧастичная поддержка IE
min-widthЧастичная поддержка IEЧастичная поддержка IEЧастичная поддержка IEЧастичная поддержка IE

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
borderyesyesyesyesyes
border-radius [CSS3]nonoyesnoyes
box-shadow [CSS3]nonononono
heightnoyesyesyesyes
marginyesyesyesyesyes
paddingЧастичная поддержкаyesyesyesyes
widthyesyesyesyesyes
max-widthnonoyesnoyes
min-widthnonoyesnoyes

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

iOS 6Android 4.2Android 2.3Gmail App
borderyesyesyesyes
border-radius [CSS3]yesyesyesyes
box-shadow [CSS3]nononono
heightyesyesyesyes
marginyesyesyesyes
paddingyesyesyesyes
widthyesyesyesyes
max-widthyesyesyesyes
min-widthyesyesyesyes

4. Таблицы

Веб-клиент

Outlook.comYahoo!GmailAOL
border-collapseyesyesyesyes
border-spacingyesyesyesyes
caption-sideyesyesyesyes
empty-cellsyesyesyesyes
table-layoutyesyesyesyes

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
border-collapseyesyesyesyesyes
border-spacingnonoyesnoyes
caption-sidenonononoyes
empty-cellsnonoyesnoyes
table-layoutyesyesyesyesyes

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

iOS 6Android 4.2Android 2.3Gmail App
border-collapseyesyesyesyes
border-spacingyesyesyesyes
caption-sidenoyesyesyes
empty-cellsyesyesyesyes
table-layoutyesyesyesyes

5. Шрифты

Веб-клиент

Outlook.comYahoo!GmailAOL
directionyesyesyesyes
fontyesyesyesyes
font-familyyesyesyesyes
font-styleyesyesyesyes
font-variantyesyesyesyes
font-sizeyesyesyesyes
font-weightyesyesyesyes
letter-spacingyesyesyesyes
line-heightyesyesyesyes
text-alignyesyesyesyes
text-decorationyesyesyesyes
text-indentyesyesyesyes
text-overflow [CSS3]Частичная поддержкаЧастичная поддержкаЧастичная поддержкаЧастичная поддержка
text-shadow [CSS3]yesyesnoКроме IE
text-transformyesyesyesyes
white-spaceyesyesyesyes
word-spacingyesyesyesyes
word-wrap [CSS3]yesyesnoyes
vertical-alignyesyesyesyes

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
directionnoyesyesyesyes
fontyesyesyesyesyes
font-familyyesyesyesyesyes
font-styleyesyesyesyesyes
font-variantyesyesyesyesyes
font-sizeyesyesyesyesyes
font-weightyesyesyesyesyes
letter-spacingyesyesyesyesyes
line-heightyesyesyesyesyes
text-alignyesyesyesyesyes
text-decorationyesyesyesyesyes
text-indentyesyesyesyesyes
text-overflow [CSS3]noyesyesyesyes
text-shadow [CSS3]nonoyesnoyes
text-transformyesyesyesyesyes
white-spaceyesnoyesyesyes
word-spacingnoyesyesyesyes
word-wrap [CSS3]noyesyesyesyes
vertical-alignnoyesyesyesyes

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

iOS 6Android 4.2Android 2.3Gmail App
directionyesyesyesyes
fontyesyesyesyes
font-familyyesyesyesyes
font-styleyesyesyesyes
font-variantyesyesyesyes
font-sizeyesyesyesyes
font-weightyesyesyesyes
letter-spacingyesyesyesyes
line-heightyesyesyesyes
text-alignyesyesyesyes
text-decorationyesyesyesyes
text-indentyesyesyesyes
text-overflow [CSS3]yesyesyesyes
text-shadow [CSS3]yesyesyesyes
text-transformyesyesyesyes
white-spaceyesyesyesyes
word-spacingyesyesyesyes
word-wrap [CSS3]yesyesyesno
vertical-alignyesyesyesyes

6. Цвет и фон

Веб-клиент

Outlook.comYahoo!GmailAOL
coloryesyesyesyes
backgroundНе поддерживает изображенияyesyesyes
background-coloryesyesyesyes
background-imageyesyesyesyes
background-positionnoyesyesyes
background-repeatnoyesnoyes
HSL Colors [CSS3]yesyesyesyes
HSLA Colors [CSS3]nononoКроме IE
Opacity [CSS3]yesnonoКроме IE
RGBA Colors [CSS3]nononoКроме IE

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
coloryesyesyesyesyes
backgroundКроме изображенийyesyesyesyes
background-coloryesyesyesyesyes
background-imagenoyesyesyesyes
background-positionnoyesyesyesyes
background-repeatnoyesyesyesyes
HSL Colors [CSS3]yesyesyesyesyes
HSLA Colors [CSS3]nonoyesnoyes
Opacity [CSS3]nonoyesnoyes
RGBA Colors [CSS3]nonoyesnoyes

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

iOS 6Android 4.2Android 2.3Gmail App
coloryesyesyesyes
backgroundyesyesyesКроме изображений
background-coloryesyesyesyes
background-imageyesyesyesno
background-positionyesyesyesno
background-repeatyesyesyesno
HSL Colors [CSS3]yesyesyesyes
HSLA Colors [CSS3]yesyesyesno
Opacity [CSS3]yesyesyesno
RGBA Colors [CSS3]yesyesyesno

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

Веб-клиент

Outlook.comYahoo!GmailAOL
bottomyesnonoyes
clearyesyesyesyes
clipnononoyes
cursoryesyesnoyes
displayyesyesnoyes
floatnoyesyesyes
leftnononoyes
opacityyesnonoyes
outline [CSS3]ЧастичноЧастичноЧастичноЧастично
overflowЧастичная поддержка свойстваЧастичная поддержка свойстваЧастичная поддержка свойстваyes
positionyesnonoyes
resize [CSS3]yesyesnoyes
rightyesnonoyes
topyesnonoyes
visibilityyesyesnoyes
z‑indexnononoyes

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
bottomnoyesyesyesyes
clearnoyesyesyesyes
clipnoyesyesyesyes
cursornoyesyesyesyes
displaynoyesyesyesyes
floatnoyesyesyesyes
leftnoyesyesyesyes
opacitynonoyesnoyes
outline [CSS3]nonoyesnoyes
overflownoyesyesyesyes
positionnoyesyesyesyes
resize [CSS3]noyesyesnoyes
rightnoyesyesyesyes
topnoyesyesyesyes
visibilitynoyesyesyesyes
z‑indexyesyesyesyesyes

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

iOS 6Android 4.2Android 2.3Gmail App
bottomyesyesyesno
clearyesyesyesyes
clipyesyesyesno
cursoryesnonono
displayyesyesyesno
floatyesyesyesyes
leftyesyesyesno
opacityyesyesyesno
outline [CSS3]yesyesyesno
overflowyesЧастичная поддержка свойстваЧастичная поддержка свойстваЧастичная поддержка свойства
positionyesyesyesno
resize [CSS3]yesnonono
rightyesyesyesno
topyesyesyesno
visibilityyesyesyesno
z‑indexyesyesyesno

8. Списки

Веб-клиент

Outlook.comYahoo!GmailAOL
list-style-imagenoyesnoyes
list-style-positionnoyesnoyes
list-style-typeyesyesyesyes

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

Outlook 2007–2013Outlook 2000–2003Apple MailWindows Live MailOutlook для Mac
list-style-imagenoyesyesyesyes
list-style-positionnoyesyesyesyes
list-style-typenoyesyesyesyes

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

iOS 6Android 4.2Android 2.3Gmail App
list-style-imageyesyesyesno
list-style-positionyesyesyesno
list-style-typeyesyesyesno

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