Comment créer des coins arrondis dans les e-mails Outlook : une solution CSS et VML ?

Coins arrondis dans Outlook : une solution CSS et VML

Créer des e-mails visuellement attrayants peut être un défi, surtout lorsqu'il s'agit de concevoir des éléments comme boutons. Bien que CSS vous permette d'obtenir des coins arrondis dans de nombreux clients de messagerie, il peut ne pas fonctionner comme prévu dans Outlook.

Problème :

Code CSS standard pour créer des coins arrondis, tels que -moz-border-radius et border-radius, ne s'affichent pas correctement dans Outlook.

Solution :

Un moyen efficace de créer des coins arrondis dans Outlook sans utiliser des images consiste à combiner les commentaires conditionnels Outlook avec VML (Vector Markup Language). VML est une technologie plus ancienne utilisée pour dessiner des formes dans les pages Web, mais elle est toujours prise en charge dans Outlook.

Code :

Voici un exemple de code qui crée un bouton avec coins arrondis dans Outlook 2010 :

<code class="html"><div>
    <!-- Outlook conditional comments for VML -->
    <!--[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]-->
    <!-- Non-Outlook fallback -->
    <!--[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></code>

Dans Outlook 2010, le code VML créera les coins arrondis, tandis que les navigateurs non Outlook afficheront la conception basée sur un tableau de secours avec des coins arrondis à l'aide de CSS.

Remarque : Cette solution a été testée dans Outlook 2010 et les principaux navigateurs uniquement, et peut ne pas fonctionner dans Outlook Web App (OWA), Outlook.com ou les navigateurs mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!