Từ điển hỗ trợ CSS trong thiết kế Email Marketing template mẫu

Cường (LinkLeads)No CommentsMẫu Email Marketing Template

Thiết kế Email Marketing Template mẫu - Bảng từ điển CSS trong Email HTML

Khó khăn về CSS trong thiết kế Email Marketing mẫu

[LinkLeads] Khi thiết kế Email Marketing template, việc sử dụng CSS để format email HTML là việc mà bất cứ Email Marketer nào cũng phải thực hiện. Tuy nhiên, trong thế giới mà phần mềm nhận mail ngày càng đa dạng (trên Desktop, trên smartphone hay máy tính bảng), việc viết được mã CSS phù hợp và hiển thị tốt trên mọi phần mềm nhận mail ngày càng trở nên phức tạp và khó khăn.

Theo thống kê của LinkLeads, đa số người dùng Việt Nam nhận mail qua 3 phần mềm chính là Outlook, Gmail và Yahoo.

Bảng từ điển khả năng hỗ trợ CSS trong Email HTML

Tổng hợp từ các nguồn tin cậy, LinkLeads xin gửi tới quý khách hàng và các Email Marketer Việt Nam bảng từ điển hỗ trợ CSS trên 10 phần mềm nhận mail phổ biến nhất trên thế giới. Bảng từ điển được cập nhật tới tháng 5/2014

Style Element 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) +

Responsive
Responsive No No Yes No Yes No No No

Style Element
<style> in <head> Yes Yes Yes Yes Yes Yes No Yes
<style> in <body> Yes Yes Yes Yes Yes Yes No Yes

Link Element
<link> in <head> Yes Yes Yes No Yes No No Yes
<link> in <body> Yes Yes Yes No Yes No No Yes

Selectors
* No Yes Yes No Yes No Info Yes
E Yes Yes Yes Yes Yes Yes No Yes
E[foo] No Yes Yes Yes Yes No No Yes
E[foo=”bar”] No Yes Yes Yes Yes No No Yes
E[foo~=”bar”] No Yes Yes No Yes No No Yes
E[foo^=”bar”] No Yes Yes No Yes No No Yes
E[foo$=”bar”] No Yes Yes No Yes No No Yes
E[foo*=”bar”] No Yes Yes No Yes No No Yes
E:nth-child(n) No No Yes Yes Yes No No Yes
E:nth-last-child(n) No No Yes Yes Yes No No Yes
E:nth-of-type(n) No No Yes Yes Yes No No Yes
E:nth-last-of-type(n) No No Yes Yes Yes No No Yes
E:first-child No Yes Yes Yes Yes No No Yes
E:last-child No No Yes Yes Yes No No Yes
E:first-of-type No No Yes Yes Yes No No Yes
E:last-of-type No No Yes Yes Yes No No Yes
E:empty No No Yes Yes Yes No No Yes
E:link Yes Yes Yes No Yes No No Yes
E:visited Yes No Yes No No Yes No Yes
E:active No Yes No Yes Yes Yes No No
E:hover No Yes No Yes Yes Yes No No
E:focus No No Yes Yes Yes Yes No No
E:target No No No Yes No No No No
E::first-line No Yes Yes Yes Yes Yes No Yes
E::first-letter No Yes Yes Yes Yes Yes No Yes
E::before No No Yes No Yes No No Yes
E::after No No Yes No Yes No No Yes
E.classname Yes Yes Yes Yes Yes Yes No Yes
E#id Yes Yes Yes No Yes Yes No Yes
E:not(s) No No Yes No Yes No No Yes
E F Yes Yes Yes Yes Yes Yes No Yes
E > F No Yes Yes Yes Yes Yes Info Yes
E + F No Yes Yes Yes Yes Yes No Yes
E ~ F No Yes Yes Yes Yes No No Yes

Text & Fonts
@font-face No No Yes No Yes No No No
direction Yes Yes Yes Yes Yes Yes Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Info Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Info Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-overflow CSS3 No Yes Yes Info Yes Info Info Yes
text-shadow CSS3 No No Yes Yes Yes Yes No Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
white-space No Yes Yes Yes Yes Yes Yes Yes
word-spacing No Yes Yes Yes Yes Yes Yes Yes
word-wrap CSS3 No Info Yes Yes Yes Yes No No
vertical-align + Yes Yes Yes Yes Yes Yes Yes Yes
text-fill-color CSS3 No No Yes No Yes No No Yes
text-fill-stroke CSS3 No No Yes No Yes No No Yes

Color & Background
color Yes Yes Yes Yes Yes Yes Yes Yes
background Info Yes Yes Info Yes Yes Yes Yes
background CSS3 No No Yes No Yes No No Yes
background-color Yes Yes Yes Yes Yes Yes Yes Yes
background-image No Yes Yes No Yes Yes Yes Yes
background-position No Yes Yes No Yes Yes No Yes
background-repeat No Yes Yes No Yes Yes Yes Yes
background-sizeCSS3 No No Yes No Yes Info No Info
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes
HSLA Colors CSS3 No No Yes No Yes No Yes Yes
Opacity CSS3 No No Yes Yes Yes No No Yes
RGBA Colors CSS3 No No Yes No Yes No Yes Yes

Box Model
border Yes Yes Yes Yes Yes Yes Yes Yes
border-color No No Yes Yes Yes Yes Yes No
border-image CSS3 No No Yes No Yes No No No
border-radius CSS3 No No Yes Yes Yes No Yes No
box-shadow CSS3 No No Yes Yes Yes No No No
height No Yes Yes Yes Yes Yes Yes Yes
margin Yes Yes Yes No Yes Yes Yes Yes
padding Info Yes Yes Yes Yes Yes Yes Yes
width Info Yes Yes Yes Yes Yes Yes Yes
max-width No Yes Yes Yes Yes Yes Yes Yes
min-width No Yes Yes Yes Yes Yes Yes Yes

Positioning & Display
bottom No Yes Yes Yes Yes No No Yes
clear No Yes Yes Yes Yes Yes Yes Yes
clip No Yes Yes No Yes No No Yes
cursor No Yes Yes Yes Yes Yes No No
display No Yes Yes Yes Yes Yes No Yes
float No Yes Yes No Yes Yes Yes Yes
left No Yes Yes No Yes No No Yes
opacity No No Yes Yes Yes No No Yes
outline CSS3 No No Yes Info Yes Info Info Yes
overflow No Yes Yes Info Yes Info Info Info
position No Yes Info Yes Yes No No Yes
resize CSS3 No Yes Yes Info Yes Info No No
right No Yes Yes Yes Yes No No Yes
top No Yes Yes Yes Yes No No Yes
visibility No Yes Yes Yes Yes Yes No Yes
z-index Yes Yes Yes Yes Yes Yes No Yes

Lists
list-style-image No Yes Yes No Yes Yes No Yes
list-style-position No Yes Yes No Yes Yes Yes Yes
list-style-type Yes Yes Yes Yes Yes Yes Yes Yes

Tables
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
border-spacing No No Yes Yes Yes Yes Yes Yes
caption-side No No Yes Yes Yes Yes Yes Yes
empty-cells No No Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes

HTML 5
<canvas> No No Yes Yes No No No No
<audio> No No Yes Info Yes No No No
<video> No No Yes Info Yes No No No