Hangi e-posta sağlayıcısı hangi CSS özelliklerini destekliyor

Güzel bir konuya parmak bastığımı düşünüyorum. Çünkü mail hazırlarken bu konuyu tasarımcının mutlaka aklının bir kenarında tutması gerek.

Örneğin geçenlerde PlayStation’dan bana gelen mailin üst bölümünü inceleyelim.

Bu bölümü kodlarken Renkli oynayın yazan mavi kutucuğun arkasındaki renkli kapaklı PlayStation görselini, CSS’in background-image özelliği ile vermekten başka çareniz yok. Eğer e-posta sağlayıcılarının CSS desteklerini incelemeden bu şekilde kodlamayı yapıp müşterilere maili gönderirseniz, bu maili Outlook 2007/2010/2013’te açanlar bu sağlayıcılar background-image özelliğini desteklemediği için mailin arkaplan rengi neyse onu görecekler. Bu tasarım için bu durum idare edilebilir gibi olsa da bazen yazıyı okunmaz hale getiren sonuçlarla karşılaşılabilir.

Bu yüzden aşağıdaki muhteşem tabloyu mail kodlarken browserınızın bir sekmesinde açık tutun ve şüphe duyduğunuz yerler için gerekli kontrollerinizi mutlaka yapın.

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	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Hayır
Style Element
<style> in <head>	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
<style> in <body>	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
Link Element
<link> in <head>	Evet	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
<link> in <body>	Evet	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
Selectors
*	Hayır	Evet	Evet	Hayır	Evet	Hayır	Info	Evet
E	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E[foo]	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
E[foo=”bar”]	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
E[foo~=”bar”]	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
E[foo^=”bar”]	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
E[foo$=”bar”]	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
E[foo*=”bar”]	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
E:nth-child(n)	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:nth-last-child(n)	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:nth-of-type(n)	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:nth-last-of-type(n)	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:first-child	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
E:last-child	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:first-of-type	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:last-of-type	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:empty	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
E:link	Evet	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
E:visited	Evet	Hayır	Evet	Hayır	Hayır	Evet	Hayır	Evet
E:active	Hayır	Evet	Hayır	Evet	Evet	Evet	Hayır	Hayır
E:hover	Hayır	Evet	Hayır	Evet	Evet	Evet	Hayır	Hayır
E:focus	Hayır	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır
E:target	Hayır	Hayır	Hayır	Evet	Hayır	Hayır	Hayır	Hayır
E::first-line	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E::first-letter	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E::before	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
E::after	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
E.classname	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E#id	Evet	Evet	Evet	Hayır	Evet	Evet	Hayır	Evet
E:not(s)	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
E F	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E > F	Hayır	Evet	Evet	Evet	Evet	Evet	Info	Evet
E + F	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
E ~ F	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
Text & Fonts
@font-face	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Hayır
direction	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
font	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
font-family	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
font-style	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
font-variant	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
font-size	Evet	Evet	Info	Evet	Evet	Evet	Evet	Evet
font-weight	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
letter-spacing	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
line-height	Evet	Evet	Evet	Info	Evet	Evet	Evet	Evet
text-align	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
text-decoration	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
text-indent	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
text-overflow CSS3	Hayır	Evet	Evet	Info	Evet	Info	Info	Evet
text-shadow CSS3	Hayır	Hayır	Evet	Evet	Evet	Evet	Hayır	Evet
text-transform	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
white-space	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
word-spacing	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
word-wrap CSS3	Hayır	Info	Evet	Evet	Evet	Evet	Hayır	Hayır
vertical-align +	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
text-fill-color CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
text-fill-stroke CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
Color & Background
color	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
background	Info	Evet	Evet	Info	Evet	Evet	Evet	Evet
background CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Evet
background-color	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
background-image	Hayır	Evet	Evet	Hayır	Evet	Evet	Evet	Evet
background-position	Hayır	Evet	Evet	Hayır	Evet	Evet	Hayır	Evet
background-repeat	Hayır	Evet	Evet	Hayır	Evet	Evet	Evet	Evet
background-size CSS3	Hayır	Hayır	Evet	Hayır	Evet	Info	Hayır	Info
HSL Colors CSS3	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
HSLA Colors CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Evet	Evet
Opacity CSS3	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
RGBA Colors CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Evet	Evet
Box Model
border	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
border-color	Hayır	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır
border-image CSS3	Hayır	Hayır	Evet	Hayır	Evet	Hayır	Hayır	Hayır
border-radius CSS3	Hayır	Hayır	Evet	Evet	Evet	Hayır	Evet	Hayır
box-shadow CSS3	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Hayır
height	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
margin	Evet	Evet	Evet	Hayır	Evet	Evet	Evet	Evet
padding	Info	Evet	Evet	Evet	Evet	Evet	Evet	Evet
width	Info	Evet	Evet	Evet	Evet	Evet	Evet	Evet
max-width	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
min-width	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
Positioning & Display
bottom	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
clear	Hayır	Evet	Evet	Evet	Evet	Evet	Evet	Evet
clip	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
cursor	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Hayır
display	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
float	Hayır	Evet	Evet	Hayır	Evet	Evet	Evet	Evet
left	Hayır	Evet	Evet	Hayır	Evet	Hayır	Hayır	Evet
opacity	Hayır	Hayır	Evet	Evet	Evet	Hayır	Hayır	Evet
outline CSS3	Hayır	Hayır	Evet	Info	Evet	Info	Info	Evet
overflow	Hayır	Evet	Evet	Info	Evet	Info	Info	Info
position	Hayır	Evet	Info	Evet	Evet	Hayır	Hayır	Evet
resize CSS3	Hayır	Evet	Evet	Info	Evet	Info	Hayır	Hayır
right	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
top	Hayır	Evet	Evet	Evet	Evet	Hayır	Hayır	Evet
visibility	Hayır	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
z-index	Evet	Evet	Evet	Evet	Evet	Evet	Hayır	Evet
Lists
list-style-image	Hayır	Evet	Evet	Hayır	Evet	Evet	Hayır	Evet
list-style-position	Hayır	Evet	Evet	Hayır	Evet	Evet	Evet	Evet
list-style-type	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
Tables
border-collapse	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
border-spacing	Hayır	Hayır	Evet	Evet	Evet	Evet	Evet	Evet
caption-side	Hayır	Hayır	Evet	Evet	Evet	Evet	Evet	Evet
empty-cells	Hayır	Hayır	Evet	Evet	Evet	Evet	Evet	Evet
table-layout	Evet	Evet	Evet	Evet	Evet	Evet	Evet	Evet
HTML 5
<canvas>	Hayır	Hayır	Evet	Evet	Hayır	Hayır	Hayır	Hayır
<audio>	Hayır	Hayır	Evet	Info	Evet	Hayır	Hayır	Hayır
<video>	Hayır	Hayır	Evet	Info	Evet	Hayır	Hayır	Hayır