Quel titre intrigant, non ? On dirait qu’on va parler de médicament… « Le style CSS est un anti inflammatoire utilisé dans le traitement des douleurs légères à modérées, dans les états fébriles et dans le traitement de certaines maladies rhumatismales ».
Par générique, j’entends « Se dit d’un mot de sens suffisamment général pour englober une classe naturelle d’objets ». Autrement dit, un style appliqué de manière un peu générale, sur plusieurs éléments… Les styles CSS que vous déclarez en tête de votre code, dans la balise <style> elle-même présente dans la balise <head> en font parfois partie et sont généralement là pour pallier à toute déconvenue de rendu. C’est clair pour vous, vous me suivez ? Par exemple :
img {display:block;}Appliquer un display:block sur toutes les images devraient permettre, en principe, de contrer l’apparition de « cassures », de légers espaces sous les images présentes dans un email sur Outlook.com et Gmail. Tous les navigateurs créent cet espace, excepté IE7 et ses versions inférieures… Cela est dû au DOCTYPE. Je ne vais pas rentrer dans le détail du problème, l’excellent article d’EmailonAcid est là pour ça…
Et pourtant…
Tout intégrateur emailing connaît normalement ce « workaround » majeur. Avec le temps, on a parfois pris l’habitude, par souci d’omission, de renseigner donc le style img {display:block;} dans la balise <style> présente dans le <head>, et non plus de renseigner un style="display:block;" sur chaque image. Ainsi, le correctif s’appliquera bien à toutes les images.
Cependant, j’ai toujours eu un doute sur cette méthode, puisqu’il pourrait être parfois judicieux de passer des images en display:inline s’il s’agit, par exemple, d’emoji dans un texte…
Pour éviter cela, on peut concevoir nos Emojis non pas en images mais bien en Emoji, non ?
C’est le raisonnement que j’ai depuis peu. Je me dis qu’après tout, un Emoji peut être retranscrit comme tel dans un texte ! Why not ? C’est plutôt logique. Ainsi, plutôt que de concevoir l’Emoji « » en image, je peux l’insérer comme tel, comme « » dans un texte. C’est donc ce que je décide de faire lors de la refonte des emails trigger de l’inscription à la newsletter de Badsender…
Je pensais avoir trouvé une bonne solution, j’étais fier comme un pinson. J’avais donc laissé en place mon style générique dans le code HTML de l’email, pour toutes les autres images. Je lance un BAT sur mon adresse Gmail. Et pif paf pouf…
Mais qu’est-ce qui nous arrive ?
J’avoue, je m’y attendais pas… On n’est pas du tout sur le même rendu que ce qui était prévu, c’est quoi cette merde ? Je procède à un petit F12 des familles, pour jeter un œil au code. Ô surprise !
Besoin d'aide ?
Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.
Gmail, cette garce, a converti mon Emoji en un Goomoji (des Emoji made in Google). Et ce, sans demander ma permission ! Non mais ho, c’est la fête du slip ou quoi ? Bon, sur le principe, ça ne me pose pas de souci, je sais bien que chaque système d’exploitation proposera sa propre version de l’emoji…
Mais le souci, c’est qu’il ne s’agit donc plus d’un élément texte, mais bien d’une image ! Vous pourrez constater la création d’une balise <img> avec les attributs goomoji="1f609". Si la caméra de Gilbert Larriaga peut zoomer…
« Gmail dit au revoir aux Goomojis«
Litmus, 25 avril 2018
Comme dirait Bigard… Non, quand même pas… Enfin on en est loin quoi !
Le hic, et vous l’aurez bien compris, c’est que : comme i’ s’agit d’une balise <img>, le style="display:block;" lui est attribué. Je l’avais pas vu venir celle-là. Du coup, je supprime ce style « générique » donc, et j’attribue bien un style="display:block" directement inline à mes images.
Le résultat ?
Il est comme une classe multiniveau de Maubeuge, il est sans APEL. Tout cela, grâce à Monsieur Saladin, et au Gibolin… Merci Monsieur Saladin.
