321 0

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

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

Если вы занимаетесь 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

Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Вотсапнуть
Запинить