emailhtml-emailemail-clientemail-templates

Email template not loading on iCloud client with embedded CSS


I am sending the following HTML template with styles, and i am not seeing styles, only the bare HTML.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      /* This class will provide override text size imposed by the inherited css.
        In this <style> this style will be loaded before
      */

      .my-class {
        background-color: red;
        font-size: 12px !important;
      }
    </style>
  </head>
  <body>
    <div class="my-class">Some text</div>
  </body>
</html>

Solution

  • The issue was the comment in the <style> tag, included word <style> in it.

    It seems that iCloud does not parse this well, and probably it cuts off the whole <style> section or parts of it and breaks the CSS.

    Conclusion:
    Don't have HTML tags or anything similar in the comments, just to be safe.

    This HTML was ok. I rephrase it just without <>:

    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
        <style>
          /* This class will provide override text size imposed by the inherited css.
            In this style tag this style will be loaded before
          */
    
          .my-class {
            background-color: red;
            font-size: 12px !important;
          }
        </style>
      </head>
      <body>
        <div class="my-class">Some text</div>
      </body>
    </html>