<style> tag works in the <body> in Gmail when placed in a second <head> tag #350
Comments
|
What does this mean to the support data on here? Do you think this need to be updated? https://github.com/hteumeuleu/caniemail/blob/master/_features/html-style.md And does this apply to other email clients? It is common to include two <!DOCTYPE html>
<html lang="en">
<!-- dummy head -->
<head></head>
<!-- actual head -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ... */
</style>
</head>
<body>
</body>
</html> |
|
Hi, sorry. I should have left a description. This issue was opened because I had a Slack conversation with @hteumeuleu about it so he had the context he needed already which is why I was so short with it here. Full context is that while the |
jkupczak
changed the title
|
For reference, I first mentioned this hack in august 2021: https://twitter.com/HTeuMeuLeu/status/1430171434190508032 |
|
Yeah it makes sense to add that as a note. It would be good to also note any side effects that could occur on other email clients. e.g. Are email clients that support the following <body><style></style></body>ok with the same Gmail hack? <body><head><style></style></head></body> |
|
Hi, I've tried to reproduce this hack as I'm not able to get media queries to work on Gmail, but I can't. Any advice? Thanks. |
|
This hack is unnecessary to get media queries to work in Gmail. You can use media queries simply by including them in your normal <style> tag that is in the normal of your email code. If this isn't working for you then the most common reason is that you have a typo in your CSS code which causes Gmail to ignore all of your CSS. Consider sharing this on the Emailgeeks Slack https://email.geeks.chat/ |
|
Thanks for the answer! I just applied to join the Slack. I have tried this code and it doesn't work either: <html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<body>
<div id='body'>
<p>Hi Pierce,</p>
<p class='colored'>This text is blue.</p>
<p>Jerry</p>
</div>
</body>
</html>I'm going nuts. Are there any guidelines to write CSS the right way for Gmail? Again, thank you so much and sorry if I'm leaving the main topic for this thread. |
|
That code works perfectly fine for me. Be sure that you are view this test email with a Gmail address if you're looking at it on your iPhone or Android's Gmail app. The |
|
The only thing I may be doing differently is pasting that code into a local HTML file and using it as a signature on Thunderbird (115.4.1). I have both a Gmail and company domain address but none of those seems to work when sending a test email. I have sent that test to several addresses and <style> blocks just doesn't work when I open the email on any Gmail platform (iOS/Android/Webmail) I guess Thunderbird signature feature must be the point of failure. But every other email client renders the <style> blocks. What software do you use/suggest for HTML mail testing? |
|
Ah, I see. Well I tested your code exactly as shown. I modified it to include the You should download the .eml file from Gmail on desktop (three dots, 'Download message') and open it up in Parcel.io. You can see what the code looks like as Thunderbird sent it to confirm what happened between you pasting it in, and you receiving the test. |
|
So I downloaded the .eml, imported to Parcel.io (great platform! thanks for sharing) and saw the blue text in the preview box. Sent a test to a Gmail account and didn't apply the CSS. Thunderbird added a div with "moz-signature" class and some other stuff: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p><br>
</p>
<div class="moz-signature">
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
<div id="body">
<p>Hi Pierce,</p>
<p class="colored">This text is blue.</p>
<p>Jerry</p>
</div>
</div>
</body>
</html>Then I edited the content to include your (very clever) hack: <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p><br>
</p>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
</head>
<div class="moz-signature">
<div id="body">
<p>Hi Pierce,</p>
<p class="colored">This text is blue.</p>
<p>Jerry</p>
</div>
</div>
</body>
</html>And it worked! Now I can confirm it was all about Thunderbird. I re-downloaded the email and re-imported it to see the content, and looks like Thunderbird strips away additional head tags while Parcel.io keeps them: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p><br>
</p>
<div class="moz-signature">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<p><br>
</p>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style>
<div class="moz-signature">
<div id="body">
<p>Hi Pierce,</p>
<p class="colored">This text is blue.</p>
<p>Jerry</p>
</div>
</div>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
</style> </div>
</body>
</html>I know it's a mess but it has helped me to better understand everything. I think your hack won't work in this particular case as long as Thunderbird will only allow one head tag. Does anything come to your mind to solve this problem? |
|
That is not surprising to hear. And no, nothing comes to mind as far as workarounds. Unfortunately, this 'cleaning' of your code is very common. |
hteumeuleu
added
the
Data request
While the
<style>tag is not supported in Gmail when placed in the<body>tag, it IS supported if it's also in another<head>tag. So the following works but is not currently documented as a viable workaround on caniemail.com:The text was updated successfully, but these errors were encountered: