Grâce aux « media queries », il est facile de modifier l’apparence d’un email en fonction de la résolution de l’écran. Par exemple, on peut jouer avec deux blocs qui seront côte-à-côte sur une résolution « Desktop » et l’un en dessous de l’autre sur une résolution « Mobile ». Pour cela il faut utiliser des éléments « DIV » et la propriété « display » avec la valeur « inline-block ».
En théorie, c’est facile mais j’ai tout de même été confronté à un problème. Sur certains outils de messagerie, mes blocs se plaçaient l’un en dessous de l’autre alors qu’ils avaient assez de place pour rester l’un à côté de l’autre.
Après quelques recherches, j’ai fini par trouver la raison et surtout une solution donc je vous la partage dans cet article.
Le comportement du « inline-block » en cause
Ce mauvais placement s’explique par l’interprétation non souhaitée d’espaces superflus. « inline-block » modifie la valeur par défaut de l’élément « DIV » (à savoir « block ») par la valeur « inline ». Une des caractéristiques de « inline » est qu’il respecte tous les espaces dans le code HTML et ceux sont donc les espaces entre les éléments « inline-block » qui créés ce souci de rendu non voulu.
font-size:0 et suppression des espaces
J’ai conjugué deux solutions pour corriger ce phénomène.
La première consiste à modifier le style « font-size » de l’élément qui contient les blocs « inline-block ». Dans un élément « inline », le style « font-size » définit la taille des espaces donc il suffit de mettre ce style à la valeur 0 dans le bloc parent. Ensuite il faut juste spécifier la bonne valeur « font-size » dans chacun des éléments « DIV ».
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="display: block; max-width:700px;" class="w">
<tr>
<td width="700" align="center" style="font-size: 0;">
<!-- Les blocs "inline-block" -->
</td>
</tr>
</table>
La seconde solution est de coller les différents tags HTML pour supprimer ces espaces superflus.
<table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" style="display: block; max-width:700px;" class="w">
<tr>
<td width="700" align="center" style="font-size: 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="right">
<![endif]-->
<div style="width:350px; display: inline-block; padding:0;">
BLOC 1
</div><!-- Espaces supprimés --><!--[if (gte mso 9)|(IE)]>
</td><td align="left">
<![endif]--><!-- Espaces supprimés --><div style="width:350px; height:494px; display: inline-block; padding:0;">
BLOC 2
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
J’espère que ces explications pourront vous aider.
L’article ne répond pas à toutes vos questions ? N’hésitez pas à nous contacter pour avoir plus d’informations.