Search code examples
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>