badsender logo

Beware of too generic CSS styles

06/11/2019

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 ? This makes sense. So, rather than designing the Emoji "????" as an image, I can insert it as such, as "????" in a text. So that's what I decide to do when I redesign the trigger emails for the Badsender newsletter...

You'll notice that the design rocks, frankly, huh? In all modesty... Without advertising, subscribe to our newsletter, if only to receive this confirmation email.

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...

But what is happening to us?

It's not Rock'n'Roll at all

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!

Ch'bim, in my rind...

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?

After the absorption of the Gibolin. Oh yes, there is a little bit of bleach...

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.

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

Leave a Reply

Your email address will not be published.