search

hteumeuleu / caniemail

Can I email… Support tables for HTML and CSS in emails.
https://www.caniemail.com
MIT License
806 stars 69 forks source link

<style> tag works in the <body> in Gmail when placed in a second <head> tag #350

Open jkupczak opened 1 year ago

jkupczak commented 1 year ago

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:

<body>

  <head>
    <style>
      /* */
    </style>
  </head>

</body>
husseinalhammad commented 1 year ago

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 https://www.caniemail.com/features/html-style/

And does this apply to other email clients? It is common to include two <head>s now to support Yahoo Android. As far as I know this doesn't break anything on other email clients.

<!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>
jkupczak commented 1 year ago

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

<body>

  <head>
    <style>
      /* */
    </style>
  </head>

</body>
hteumeuleu commented 1 year ago

For reference, I first mentioned this hack in august 2021: https://twitter.com/HTeuMeuLeu/status/1430171434190508032

husseinalhammad commented 1 year ago

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>
sssalv commented 11 months ago

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.

jkupczak commented 11 months ago

This hack is unnecessary to get media queries to work in Gmail. You can use media queries simply by including them in your normal