What an intriguing title, right? Looks like we're going to talk about medicine... "CSS style is an anti-inflammatory drug used in the treatment of mild to moderate pain, febrile conditions and in the treatment of certain rheumatic diseases.".
By generic, I mean "Said of a word of sufficiently general meaning to encompass a natural class of objects". In other words, a style applied in a general way, on several elements... The CSS styles that you declare at the top of your code, in the <style> itself present in the <head> are sometimes part of it and are usually there to make up for any rendering disappointment. It's clear to you, do you follow me? For example:
img {display:block;}Applying a display:block on all images should allow, in principle, to counteract the appearance of "breaks", slight spaces under the images present in an email on Outlook.com and Gmail. All browsers create this space, except IE7 and its lower versions... This is due to the DOCTYPE. I won't go into the details of the problem, the excellent article by EmailonAcid is there for that…
And yet...
Any emailing integrator normally knows this "workaround major. With time, we have sometimes taken the habit, for the sake of omission, to inform therefore the style img {display:block;} in the tag <style> present in the <head>and no longer inform a style="display:block;" on each image. Thus, the patch will be applied to all images.
However, I've always had a doubt about this method, since it could sometimes be wise to put images in display:inline if they are, for example, emoji in a text...
To avoid this, we can design our Emojis not in pictures but in Emoji, right?
That's the reasoning I've been having lately. I say to myself that after all, an Emoji can be transcribed as such in a text! Why not ? It's quite logical. So, rather than designing the " " Emoji as an image, I can insert it as such, as " " in a text. So that's what I decided to do when redesigning the trigger emails for the Badsender newsletter...
I thought I had found a good solution, I was proud as a lark. So I left my generic style in place in the HTML code of the email, for all the other images. I launch a proof on my Gmail address. And pif paf pouf...
Need help?
Reading content isn't everything. The best way is to talk to us.
But what is happening to us?
I admit, I didn't expect it... We are not at all on the same rendering as what was planned, what is this shit? I proceed to a small F12 of the families, to take a look at the code. O surprise!
Gmail, that bitch, converted my Emoji into a Goomoji (Emoji made in Google). And without asking my permission! But ho, is this the "panty party" or what? Well, in principle, I don't mind, I know that each operating system will have its own version of the emoji...
But the concern is thatit is no longer a text element, but an image! You can see the creation of a <img> with the attributes goomoji="1f609". If Gilbert Larriaga's camera can zoom in...
" Gmail says goodbye to Goomojis"
Litmus, April 25, 2018
As Bigard would say... No, not really... Well, we are far from it !
The problem, as you will have understood, is that: as this is a <img>the style="display:block;" is attributed to him. I didn't see that one coming. So, I remove this "generic" style, and I assign a style="display:block" directly inline to my images.
The result?
It is like a multi-level class in Maubeuge, it is without APEL. All this, thanks to Mister Saladin, and to Gibolin... Thank you Mister Saladin.
