[\] guilhermegrillo.com.br [archives]

home / responsive e-mail hacks n prefixes

Common CSS Prefixes

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

Hack para evitar a linha font resize no gmail app

<td style="min-width: 600px">

Hack para evitar a linha entre tabelas no iphone

<img src="images/star.gif" alt="" style="display:block; background:#ffc200; transform:scale(1.00001); -webkit-transform:scale(1.00001);" />

CSS Fixa o tamanho da fonte menor que 14px no ambiente mobile

-ms-text-size-adjust:none;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
text-size-adjust:none;

CSS para evitar o link azul em dispositivos Apple

a[x-apple-data-detectors=true] {
 color: inherit !important;
 text-decoration: inherit !important;
}

Para aplicar em todos os textos mobile

//deixa a fonte menos serrilhada no ambiente mobile
-webkit-font-smoothing: antialiased;

META para mobile

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width" />

Hack para webmail do @terra

//evita os problemas de espaços em branco
.print-message, .messageBody {
	white-space: normal!important;
}

Resolve problemas de line-height no Outlook

mso-line-height-rule: exactly;

CSS inline para TDs só com imagens

//usando esse código na <td> o display: block na imagem é desnecessário
line-height:0; font-size:0; margin: 0;

Bordas arredondadas

-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;

Evitar espaçamento diferenciado no Outlook

border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;

Para aumentar o espaçamentos entre células da tabela

cellspacing="5" style="border-spacing: 5px 5px;border-collapse: separate;"

Para background na TD (e-mail responsivo com troca de imagem)

style="background-image:url(url-da-imagem.jpg); background-position: center top; background-repeat:no-repeat;" background="url-da-imagem.jpg"

Centralizar a tabela do e-mail no Yahoo.com

table {	margin: 0px auto !important; }

Media Query para IE10

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */
}

Texto de Preview (e-mail mobile)

<!-- aplicar no começo do e-mail -->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
TEXTO DE PREVIEW         
</div>

Bordas Arredondadas

<td style="-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;border: 1px solid #333333;"></td>

CSS para tabelas em e-mail responsivo (padrão)

Estilo padrão para texto

<td style="font-family:Verdana, Geneva, sans-serif; font-size: 11px; line-height: 15px; color: #333333;-ms-text-size-adjust:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing: antialiased;mso-line-height-rule: exactly;text-align: left!important;">

Tabela simples ou com colunas que caem

table.deviceWidth
{
	width: 100%!important;
	min-width: 100%!important;
	border-spacing: 0px!important;
}
table.deviceWidth td
{
	display: block!important;
	width: 100%!important;
	text-align:center!important;
	padding: 5px 0!important;
	min-width: 100%!important;
	height: auto!important;
}

Tabela com colunas que não quebram (mantém o formato tabela)

table.tableType
{
	min-width: 270px !important;
	width: 270px !important;
	margin: 0 auto !important;
}
	
table.tableType td
{
	display: table-cell !important;
	min-width: auto !important;
	width: auto !important;
}