Cerberus icon indicating copy to clipboard operation
Cerberus copied to clipboard

Why are the <style> tags in the <head>? Shouldn't they be in the <body>?

Open marcelgruber opened this issue 4 years ago • 7 comments

Please consider this a general question. In my experience, some clients will ignore what's in the <head>, and in some cases they will nuke the entire contents of the head; particularly when emails are forwarded.

Can you think of any reason we shouldn't move the <style> content inside of the email body?

marcelgruber avatar Apr 07 '21 21:04 marcelgruber

No worries, questions are always welcome.

Can you think of any reason we shouldn't move the

If it ain't broke, don't fix it. Honestly I've never come across a scenario or email client that hasn't applied styles in the <head>. If you can produce a scenario where this approach doesn't work, I'm open to changing things.

TedGoas avatar Apr 07 '21 23:04 TedGoas

I certainly agree with your statement, and now I'm going to take this somewhere that might be out of scope entirely: forwarding emails! Of course at that point it's mostly out of our control and we're at the mercy of individual clients, but in all of the testing I've done lately, they nuke the <head> and a whole bunch of other things as well. IMO, it seems to be an easy win to move the styles somewhere in the body that might be "guarded" by the body content wrappers. I don't have any definitive experiments to back up my claim that it will help, but all I know is that <head>s will get nuked, and that many ESPs won't really let you touch the head to begin with...

marcelgruber avatar Apr 09 '21 21:04 marcelgruber

Further, there are certainly some opportunities within this repo to move some of the non-media specific styles directly into the inline styles. But perhaps the goal with the styles in this repo was to be more of a reference than the end all be all of placement.

marcelgruber avatar Apr 09 '21 21:04 marcelgruber

Hey Marcel, I did some digging and learned that Gmail won’t render styles included in the body. So styles would need to be doubled up (or maybe just include some fixes in the body version). Is that your experience?

TedGoas avatar Apr 12 '21 21:04 TedGoas

Gmail renders styles in the body with no issue. I believe they added support for that in 2016. I've been doing extensive testing after having moved the styles into the body area, and everything is looking good!

marcelgruber avatar Apr 13 '21 22:04 marcelgruber

Gmail does not support styles in the <body> tag:

https://www.caniemail.com/features/html-style/

forwarding emails

Moving styles into the body of the email does not guarantee they'll work when the email is forwarded. Things like classes are often rewritten, rendering your CSS useless. Inlining is still the best we can do about that.

cossssmin avatar Jun 30 '21 10:06 cossssmin

@cossssmin In Cerberus most of the CSS is already inlined. In your experience, what sort of styles should be inlined and sometimes appear in the <head> that cause trouble with email forwarding?

TedGoas avatar Jun 30 '21 21:06 TedGoas