Css in email client

Гид по поддержке CSS и HTML в email-рассылках

Самый полный мануал по поддержке css и html-атрибутов в самых популярных мобильных, веб и десктопных почтовых клиентах.

Атрибут стиля

Outlook 2007/10/13 +

Outlook 03/Express/Mail

iPhone iOS 7/iPad

Outlook.com

Apple Mail 6.5

Yahoo! Mail

Google Gmail

Android 4 (Gmail) +

Атрибут стиля	Outlook 2007/10/13 +	Outlook 03/Express/Mail	iPhone iOS 7/iPad	Outlook.com	Apple Mail 6.5	Yahoo! Mail	Google Gmail	Android 4 (Gmail) +
Адаптивность
Адаптивность	Нет	Нет	Да	Нет	Да	Нет	Нет	Нет
Задание стилей
в	Да	Да	Да	Да	Да	Да	Нет	Да
в	Да	Да	Да	Да	Да	Да	Нет	Да
Ссылки на стили
в	Да	Да	Да	Нет	Да	Нет	Нет	Да
в	Да	Да	Да	Нет	Да	Нет	Нет	Да
Селекторы
*	Нет	Да	Да	Нет	Да	Нет	Информация	Да
E	Да	Да	Да	Да	Да	Да	Нет	Да
E[foo]	Нет	Да	Да	Да	Да	Нет	Нет	Да
E[foo=»bar»]	Нет	Да	Да	Да	Да	Нет	Нет	Да
E[foo~=»bar»]	Нет	Да	Да	Нет	Да	Нет	Нет	Да
E[foo^=»bar»]	Нет	Да	Да	Нет	Да	Нет	Нет	Да
E[foo$=»bar»]	Нет	Да	Да	Нет	Да	Нет	Нет	Да
E[foo*=»bar»]	Нет	Да	Да	Нет	Да	Нет	Нет	Да
E:nth-child(n)	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:nth-last-child(n)	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:nth-of-type(n)	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:nth-last-of-type(n)	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:first-child	Нет	Да	Да	Да	Да	Нет	Нет	Да
E:last-child	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:first-of-type	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:last-of-type	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:empty	Нет	Нет	Да	Да	Да	Нет	Нет	Да
E:link	Да	Да	Да	Нет	Да	Нет	Нет	Да
E:visited	Да	Нет	Да	Нет	Нет	Да	Нет	Да
E:active	Нет	Да	Нет	Да	Да	Да	Нет	Нет
E:hover	Нет	Да	Нет	Да	Да	Да	Нет	Нет
E:focus	Нет	Нет	Да	Да	Да	Да	Нет	Нет
E:target	Нет	Нет	Нет	Да	Нет	Нет	Нет	Нет
E::first-line	Нет	Да	Да	Да	Да	Да	Нет	Да
E::first-letter	Нет	Да	Да	Да	Да	Да	Нет	Да
E::before	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
E::after	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
E.classname	Да	Да	Да	Да	Да	Да	Нет	Да
E#id	Да	Да	Да	Нет	Да	Да	Нет	Да
E:not(s)	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
E F	Да	Да	Да	Да	Да	Да	Нет	Да
E > F	Нет	Да	Да	Да	Да	Да	Информация	Да
E + F	Нет	Да	Да	Да	Да	Да	Нет	Да
E ~ F	Нет	Да	Да	Да	Да	Нет	Нет	Да
Текст & Шрифты
@font-face	Нет	Нет	Да	Нет	Да	Нет	Нет	Нет
direction	Да	Да	Да	Да	Да	Да	Да	Да
font	Да	Да	Да	Да	Да	Да	Да	Да
font-family	Да	Да	Да	Да	Да	Да	Да	Да
font-style	Да	Да	Да	Да	Да	Да	Да	Да
font-variant	Да	Да	Да	Да	Да	Да	Да	Да
font-size	Да	Да	Info	Да	Да	Да	Да	Да
font-weight	Да	Да	Да	Да	Да	Да	Да	Да
letter-spacing	Да	Да	Да	Да	Да	Да	Да	Да
line-height	Да	Да	Да	Информация	Да	Да	Да	Да
text-align	Да	Да	Да	Да	Да	Да	Да	Да
text-decoration	Да	Да	Да	Да	Да	Да	Да	Да
text-indent	Да	Да	Да	Да	Да	Да	Да	Да
text-overflow CSS3	Нет	Да	Да	Информация	Да	Информация	Информация	Да
text-shadow CSS3	Нет	Нет	Да	Да	Да	Да	Нет	Да
text-transform	Да	Да	Да	Да	Да	Да	Да	Да
white-space	Нет	Да	Да	Да	Да	Да	Да	Да
word-spacing	Нет	Да	Да	Да	Да	Да	Да	Да
word-wrap CSS3	Нет	Информация	Да	Да	Да	Да	Нет	Нет
vertical-align +	Да	Да	Да	Да	Да	Да	Да	Да
text-fill-color CSS3	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
text-fill-stroke CSS3	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
Цвета & Фон
color	Да	Да	Да	Да	Да	Да	Да	Да
background	Информация	Да	Да	Информация	Да	Да	Да	Да
background CSS3	Нет	Нет	Да	Нет	Да	Нет	Нет	Да
background-color	Да	Да	Да	Да	Да	Да	Да	Да
background-image	Нет	Да	Да	Нет	Да	Да	Да	Да
background-position	Нет	Да	Да	Нет	Да	Да	Нет	Да
background-repeat	Нет	Да	Да	Нет	Да	Да	Да	Да
background-size CSS3	Нет	Нет	Да	Нет	Да	Информация	Нет	Информация
HSL Colors CSS3	Да	Да	Да	Да	Да	Да	Да	Да
HSLA Colors CSS3	Нет	Нет	Да	Нет	Да	Нет	Да	Да
Opacity CSS3	Нет	Нет	Да	Да	Да	Нет	Нет	Да
RGBA Colors CSS3	Нет	Нет	Да	Нет	Да	Нет	Да	Да
Блоковая модель
border	Да	Да	Да	Да	Да	Да	Да	Да
border-color	Нет	Нет	Да	Да	Да	Да	Да	Нет
border-image CSS3	Нет	Нет	Да	Нет	Да	Нет	Нет	Нет
border-radius CSS3	Нет	Нет	Да	Да	Да	Нет	Да	Нет
box-shadow CSS3	Нет	Нет	Да	Да	Да	Нет	Нет	Нет
height	Нет	Да	Да	Да	Да	Да	Да	Да
margin	Да	Да	Да	Нет	Да	Да	Да	Да
padding	Информация	Да	Да	Да	Да	Да	Да	Да
width	Информация	Да	Да	Да	Да	Да	Да	Да
max-width	Нет	Да	Да	Да	Да	Да	Да	Да
min-width	Нет	Да	Да	Да	Да	Да	Да	Да
Позиционирование & Отображение
bottom	Нет	Да	Да	Да	Да	Нет	Нет	Да
clear	Нет	Да	Да	Да	Да	Да	Да	Да
clip	Нет	Да	Да	Нет	Да	Нет	Нет	Да
cursor	Нет	Да	Да	Да	Да	Да	Нет	Нет
display	Нет	Да	Да	Да	Да	Да	Нет	Да
float	Нет	Да	Да	Нет	Да	Да	Да	Да
left	Нет	Да	Да	Нет	Да	Нет	Нет	Да
opacity	Нет	Нет	Да	Да	Да	Нет	Нет	Да
outline CSS3	Нет	Нет	Да	Информация	Да	Информация	Информация	Да
overflow	Нет	Да	Да	Информация	Да	Информация	Информация	Информация
position	Нет	Да	InfoИнформация/span>	Да	Да	Нет	Нет	Да
resize CSS3	Нет	Да	Да	Информация	Да	Информация	Нет	Нет
right	Нет	Да	Да	Да	Да	Нет	Нет	Да
top	Нет	Да	Да	Да	Да	Нет	Нет	Да
visibility	Нет	Да	Да	Да	Да	Да	Нет	Да
z-index	Да	Да	Да	Да	Да	Да	Нет	Да
Списки
list-style-image	Нет	Да	Да	Нет	Да	Да	Нет	Да
list-style-position	Нет	Да	Да	Нет	Да	Да	Да	Да
list-style-type	Да	Да	Да	Да	Да	Да	Да	Да
Таблицы
border-collapse	Да	Да	Да	Да	Да	Да	Да	Да
border-spacing	Нет	Нет	Да	Да	Да	Да	Да	Да
caption-side	Нет	Нет	Да	Да	Да	Да	Да	Да
empty-cells	Нет	Нет	Да	Да	Да	Да	Да	Да
table-layout	Да	Да	Да	Да	Да	Да	Да	Да
HTML 5
	Нет	Нет	Да	Да	Нет	Нет	Нет	Нет
	Нет	Нет	Да	Info	Да	Нет	Нет	Нет
	Нет	Нет	Да	Info	Да	Нет	Нет	Нет

Источник

The Ultimate Guide to CSS

A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients on the planet.

Desktop See all 11

Mobile See all 16

Webmail

Style Element

Link Element

Selectors See all 37

Media Queries See all 28

Text & Fonts See all 39

Color & Background See all 25

Box Model See all 44

Positioning & Display See all 20

Lists

Tables

Animations See all 9

Transforms

Transitions

Filters

Columns See all 13

Flexbox See all 13

Grid See all 24

Version history

14 November 2017

Outlook.com and the Outlook iOS app added support for CSS background images and some related properties, as well as certain Flexbox and Grid properties.

Also added iOS 11 Mail to the guide, with no noticeable differences from iOS 10.

22 September 2017

Microsoft updated the Outlook apps for iOS and Android with more consistent CSS support, including media queries.

13 September 2017

A complete rewrite and redesign of the guide, testing 278 different CSS properties and features across 35 email clients.

To accommodate the huge increase in content, we’ve added search functionality and the ability to link directly to individual the email clients and properties for easy sharing.
Discuss this on our blog.

2 May 2014

Removed support for various selector options (E) in Gmail and added support for direction , vertical-align and list-style-type in Outlook ’07/’10/’13.

19 September 2013

Added support for @font-face , @media and HTML 5 media tags in email clients, as well as email-relevant CSS properties. We re-tested all webmail clients and the latest versions of existing clients.

30 January 2013

Outlook.com no longer supports the margin CSS property, including margin-top , margin-right , margin-bottom and margin-left . float support has also been dropped.

17 July 2012

Added Outlook 2013 Preview. CSS test results are identical to Outlook 2007 and 2010.
See blog post for details.

1 February 2012

background-image is now supported in Gmail.

5 September 2011

Added email client results for max-width and min-width .
See blog post for details.

21 June 2011

Updated guide to CSS in email released.
See blog post for details.

10 December 2010

Updated to reflect margin support in Outlook.com.

22 April 2010

Updated the guide with the results of our CSS3 email client tests. 21 new properties were added, with varying levels of support observed across the popular email clients. Notably, Webkit clients were big winners, including Apple Mail, iPhone Mail and soon, the iPad. At this stage, CSS3 is recommended for decorative purposes in email (such as adding text-shadow ), due to poor support for layout and box-model properties.
Discuss this on our blog.

27 August 2009

Added test results for the just launched MySpace Mail.
Discuss this on our blog.

6 August 2009

A complete rewrite of the guide that included 7 new mobile email clients and a focus on the most popular email clients. The web-based version of the guide now features the 10 most popular email clients, while the PDF guide includes all 23 email clients tested.
Discuss this on our blog.

26 August 2008

Replaced .Mac results with MobileMe.
Discuss this on our blog.

11 June 2008

We increased the number of clients we tested, 21 in total now. Gmail and Outlook 2007 continue to be our primary focus since CSS support continues to be limited.

Positive signs from Microsoft though, Entourage 2008 was released with significantly better CSS support.
Discuss this on the blog

19 April 2007

Outlook 2007 was released with less CSS support than Outlook 2003. A major step back for HTML email design.

New Yahoo! mail was released with better support for CSS, a positive sign to say the least! Windows Live Mail replaced Hotmail and mixed some CSS support in the process.
Read the report

30 March 2006

This was our original test. We added Windows Live Mail for the first time and ran through tests on Outlook 2003, AOL 9, Lotus Notes and Eudora.
Read the report

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it’s never been easier to make an impact with email marketing.

Источник