Coins arrondis dans Outlook sans images
Je peux créer des coins arrondis chez de nombreux clients avec
style="-moz-border-radius: 15px; border-radius: 15px;"
Cependant, cette CSS ne crée pas de coins arrondis dans Outlook. Existe-t-il un moyen simple de créer des angles arrondis sans images dans Outlook?
http://www.campaignmonitor.com/css/ affiche tous les CSS pris en charge par les principaux clients de messagerie. les bordures arrondies ne l'ont même pas fait à la liste. Sur la page, un lien vers un fichier PDF complet indique que le rayon de bordure n’est pris en charge que par Thunderbird 2.
veuillez noter que vous devez incorporer les styles dans les éléments HTML pour prendre en charge un large éventail de clients de messagerie.
Ce code génère des boutons aux coins arrondis dans Outlook 2010 à l'aide des commentaires conditionnels Outlook () et VML:
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
Button Text Here!
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
Button Text Here!
</a>
</td>
</tr> </table>
<!-- <![endif]-->
</div>
Testé dans Outlook 2010 et les principaux navigateurs uniquement, pas dans OWA, Outlook.com ni dans aucun autre navigateur mobile. Ça vaut le coup d'oeil. Le crédit est dû - http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/
Je suggère simplement de ne pas utiliser les coins arrondis… après de longues périodes d’essais, à la fois avec Litmus, sur plusieurs clients - coins arrondis en utilisant les méthodes suggérées, telles que:
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<![if !mso]>
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
S'arrêtera sur GMAIL lors du transfert, lors du transfert de ce type de code vers GMAIL - il tentera de le recréer car il ne contiendra plus la condition et générera le code suivant à titre d'exemple:
<div style="margin-top:36.0pt">
<p class="MsoNormal" align="center" dir="RTL" style="text-align:center;direction:rtl;unicode-bidi:embed">
<span dir="LTR" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a">
<u></u>
<span>
<map name="m_3406853463519709989_MicrosoftOfficeMap0">
<area shape="Polygon" coords="38, 2, 13, 12, 3, 37, 13, 62, 38, 72, 228, 72, 253, 62, 263, 37, 253, 12, 228, 2, 38, 2" href="https://local.greeninvoice.co.il/app/account/verify?key=001dEbYWSscdPxI8xt6BcS%2B%2BrA%3D%3D" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://local.greeninvoice.co.il/app/account/verify?key%3D001dEbYWSscdPxI8xt6BcS%252B%252BrA%253D%253D&source=gmail&ust=1520336994067000&usg=AFQjCNE1iYP97qNrlsCccYFgDyRW3iVPRw">
</map>
<img border="0" width="264" height="74" src="?ui=2&ik=4e1d22bf20&view=fimg&th=161f5fb79e36447b&attid=0.1&disp=emb&attbid=ANGjdJ_3ejUStIrGp0uslTPSXPSph1LGDDnyTH2gHxWhcMpCHN_CjO4ZYsqbvqZJ9gXCxQ7e3KHV2CAn0f-FWPYH7w7lTM9ym54909Upm-h_G9W--o_I431bc9U3icg&sz=w528-h148&ats=1520250594056&rm=161f5fb79e36447b&zw&atsh=1" usemap="#m_3406853463519709989_MicrosoftOfficeMap0" alt="Rounded Rectangle: הפעלת החשבון " class="CToWUd">
</span>
<u></u>
</span>
<span lang="HE" style="font-size:11.5pt;font-family:"Arial",sans-serif;color:#2d3b4a"><u></u><u></u></span>
</p>
</div>
Comme vous pouvez le constater, la largeur, la hauteur, le texte, le centre des éléments sont brisés, car VML est un langage propriétaire de Microsoft et Outlook le convertit en carte lors du transfert.
Suite à @VanAlberts réponse qui montre le grand travail d'Eli Dickinson. Voici un lien vers le dépôt Git d’Eli https://Gist.github.com/elidickinson/9424116
Je pensais partager mes améliorations par rapport au code d'Eli, qui permet l'utilisation d'un bouton de largeur dynamique basé sur le texte contenu à l'intérieur.
J'ai trouvé ceci https://litmus.com/community/discussions/538-vml-Outlook-07-10-13-unwanted-20px-padding-at-the-bottom qui montre comment utiliser mso-fit-shape-to-text:true
Et ceci https://litmus.com/community/discussions/1269-flexible-multi-line-bulletproof-buttons qui montre comment éviter certains bourrages non désirés.
C'est mon résultat final
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-Microsoft-com:vml" xmlns:w="urn:schemas-Microsoft-com:office:Word" href="http://www.EXAMPLE.com/" style="mso-wrap-style:none; mso-position-horizontal: center" arcsize="10%" strokecolor="#0368d4" strokeweight="1px" fillcolor="#d62828">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">Button Text Here!</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<![if !mso]>
<table cellspacing="0" cellpadding="0"> <tr>
<td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href="http://www.EXAMPLE.com/" style="font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
<span style="color: #ffffff;">
Button Text Here!
</span>
</a>
</td>
</tr> </table>
<![endif]>
</div>
Semble fonctionner parfaitement dans Outlook 2016, qui utilise Word pour rendre le code HTML