Skip to content

This project may no longer be necessary #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
stevenvachon opened this issue Dec 2, 2016 · 4 comments
Closed

This project may no longer be necessary #14

stevenvachon opened this issue Dec 2, 2016 · 4 comments

Comments

@stevenvachon
Copy link

Gmail now supports <style>
https://litmus.com/blog/gmail-to-support-responsive-email-design

@maltsev
Copy link
Member

maltsev commented Dec 5, 2016

Good to know. Thanks for the article!

Though, there are many email clients around the world, where CSS inlining is still necessary.

@maltsev maltsev closed this as completed Dec 5, 2016
@stevenvachon
Copy link
Author

Possibly, but according to https://www.campaignmonitor.com/css/, only Gmail needed it.

@cossssmin
Copy link
Member

2020 update

While the vast majority of email clients now support CSS in a <style> tag inside the <head>, there is still one major issue: multiple classes and Outlook on Windows.

The problem is Outlook on Windows, with its Word rendering engine, will only read and apply the first class it encounters in a class="" attribute, discarding anything after it.

For example this:

<!DOCTYPE html>
<html>
<head>
  <style>
    .uppercase {text-transform: uppercase}
    .text-red {color: red}
  </style>
</head>
<body>
  <p class="uppercase text-red">Test</p>
</body>

Will render as black, uppercased text in Outlook on Windows (2007-2019) - the text-red class will not be applied.

Currently, the only way around this for Outlook on Windows is to always use a single class:

<!DOCTYPE html>
<html>
<head>
  <style>
    .content {
      text-transform: uppercase; 
      color: red;
    }
  </style>
</head>
<body>
  <p class="content">Test</p>
</body>

... or to inline the CSS 🤷‍♂️

@maltsev
Copy link
Member

maltsev commented Oct 25, 2020

I added a link to this discussion to README.md, so a developer could decide themselves whether they need CSS inlining or not.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants