Upcoming topics

Гид по поддержке 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	Да	Нет	Нет	Нет

Источник

How to send emails in .NET part 7: adding style to HTML contents

In this post we saw how to build a simple HTML email with no styling. It looked a bit bleak so we’ll “dress it up” a little.

You cannot simply add a reference to an external CSS file like you would on a normal HTML web page. External references are ignored in the email body as they can can contain malicious material and code.

You can place CSS code directly in the HTML code in the following ways:

• Using the style tag within the head section
• Using the style attribute on individual elements
• Using old-style attributes, such as cellspacing, border, width etc. on individual elements

All of these should be familiar from general web UI programming. Here’s an example of an embedded style tag in the head section:

string from = "andras.nemes@company.com"; string to = "john.smith@company.com"; string subject = "Testing html body"; string htmlBody = @"     HTML .courses-table .courses-table .description .courses-table td .courses-table th .green  
  
 
 
5
 
 
 
5
 
 
 
   "; MailMessage mailMessage = new MailMessage(from, to, subject, htmlBody); mailMessage.IsBodyHtml = true; string smtpServer = "mail.company.com"; SmtpClient client = new SmtpClient(smtpServer); client.Send(mailMessage);

The above message is rendered as follows in my MS outlook client:

It’s still not very corporate looking but now you at least know how to add styles to a HTML message in .NET.

Keep in mind that email clients are not as up-to-date with CSS code as modern web browsers, so not everything will work in an email.

Read all posts related to emailing in .NET here.

Источник