Why are the <style> tags in the <head>? Shouldn't they be in the <body>?
marcelgruber opened this issue · 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?
No worries, questions are always welcome.
Can you think of any reason we shouldn't move the <style> content inside of the email body?
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.
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...
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.
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?
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!
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 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?