Des bordures CSS sur des tableaux et des images dans Outlook 2007/10/13

Ayant récemment dû intégrer une newsletter HTML, je me suis heurté à un soucis de bordures de tableaux et d’images sous Outlook 2007, Outlook 2010 et Outlook 2013.

Des bordures CSS sur les tableaux HTML dans Outlook

Lorsque l’on style un email HTML, le peu de propriétés CSS supportées doivent être présentes dans l’attribut « style » de l’élément à styler.
Voici le code original utilisé pour créer un tableau avec une bordure. Ce code fonctionne parfaitement sous Gmail, Thunderbird, Yahoo! et bien d’autres, excepté sur les différentes versions d’Outlook citées plus haut :

<table cellpadding="0" cellspacing="0" bgcolor="#dbd7d4" border="0" style="border:2px solid #816d5b;" width="550" align="center">

Après quelques essais il s’avère que l’attribut « border » prend le pas sur la déclaration CSS inline lorsque sa valeur est à 0. Pour remédier à ce problème il suffit simplement d’enlever cet attribut :

<table cellpadding="0" cellspacing="0" bgcolor="#dbd7d4" style="border:2px solid #816d5b;" width="550" align="center">

Cela semble logique. Après tout si l’élément voit son attribut « border » égal à 0 alors il ne semblerait pas normal qu’une bordure CSS s’ajoute à cet élément.
Seulement voilà, il n’y a que Outlook 2007/2010/2013 qui se comportent de cette façon, tous les autres clients affichent correctement la bordure définie en CSS même si l’attribut « border » de l’élément est égal à 0.
En étudiant d’un peu plus près les spécifications CSS, voici ce que l’on trouve, au premier paragraphe de la dernière section des spécifications sur la cascade CSS :

The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet. They may therefore be overridden by subsequent style sheet rules. In a transition phase, this policy will make it easier for stylistic attributes to coexist with style sheets.

Ce paragraphe explique que s’il existe des attributs permettant de styler des éléments (tels que « border  » ou « bordercolor »), ces attributs sont convertis en CSS puis sont traités comme si ils étaient ajoutés au début de la CSS de la page. Ces attributs se font donc écraser par n’importe quel style et sont donc censés être écrasés par un style inline qui a la priorité la plus élevée (si l’on omet le « !important »).

Comme on pouvait ici s’en douter, c’est Outlook qui interprète mal le code.

Des bordures CSS sur les images dans Outlook

Lorsqu’il s’agit d’appliquer dans un email HTML une règle CSS à un élément, la première chose à vérifier est la compatibilité de cette règle avec les principaux clients mails. Une des référence en la matière est le guide de compatibilité CSS de Campaign Monitor qui nous indique que la propriété « border » est compatible avec tous les clients listés, dont Outlook 2007/10/13.

Le code HTML est tout simple :

<img src="#" style="display: block; border: 1px solid black">

Cependant, rien ne s’affiche.

Un petit coup d’oeil à la documentation officielle d’Outlook qui indique également le support complet de cette propriété pour la balise « img ».

Une recherche rapide me conforte dans mon idée. Bien que le support de la propriété CSS « border » sur les balises « img » dans Outlook 2007/10/13 est annoncé sur la doc officielle et dans d’autres tableaux de compatibilité des emails HTML (qui doivent en fait reprendre la documentation), celle-ci ne l’est pas.

La parade pour contourner cette limitation est d’englober l’image dans un tableau :

<table cellpadding="0" cellspacing="0" style="border:1px solid #b53b32;" bgcolor="#f6f6f6" width="217" align="center">
  <tr>
    <td width="217">
      <img src="#" alt="" width="215" border="0" style="display:block" />  
    </td>
  </tr>
</table>

Il faut additionner à la largeur de la cellule et du tableau le nombre de pixels supplémentaires de la bordure.
La seule contrainte de cette méthode étant la taille fixe sur la largeur de l’image.