Search code examples
htmlcsshtml-emailthunderbirdhtml-templates

Why does thunderbird move the style of the html header?

I am creating responsive email templates, I use Thunderbird to send some tests.

In most email clients it works very well. However in Gmail the styles are not applied.

Checking the CSS support I found that gmail only supports <style> inside the <head> tag. MailChimp

Css Support in gmail

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

Knowing this, I implanted my styles inside the head, however, the styles were not applied in GMAIL.

After researching on various forums and breaking my head I couldn't find the solution, so I checked the obvious, it turns out that Thunderbird moves the <style> from <head> to <body>

When I send the template through Thunderbird and see the source of the mail, I get this:
Link

User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Thunderbird/78.7.1

<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div id="body">
      <p>Hi Pierce,</p>
      <p class="colored"> This text is blue if the window width is below
        500px and red otherwise. </p>
      <p>Jerry</p>
    </div>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </body>
</html>

When I send the template through mailutils, the behavior is as expected and the styles work correctly in gmail

Link

X-Mailer: mail (GNU Mailutils 3.7)

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

View of gmail:
Link

How to prevent thunderbird from moving the style to the body?
I am using Thunderbird 78.7.1, Ubuntu 20.04.2 LTS

Solution

  • Apparently this strange behavior occurs when the HTML code is inserted from the thunderbird options
    enter image description here

    To avoid this behavior you must use the plugin ThunderHTMLedit and insert the HTML template from the HTML tab when composing the email
    enter image description here