Add inline CSS for better display into different webmail

Hi,

This is very hard to correctly display an email in all webmail. The best solution today is put your CSS in the HTML, example :

Instead of having :

h2.title {
  font-weight:bold;
  color:#FF0000;
}
<h2 class="title">My title</h2>

You will have a better support declaring like that :

<h2 style="font-weight:bold; color:#FF0000;">My title</h2>

For example, Gmail only accept inline CSS. So, if you want your mail correctly appear to gmail, you have to use the second solution.

But putting an inline CSS is very time consuming. In addition, there is lot of chances that the inline CSS break your website design, so, it's ok in your webmail but this is your website that become altered.

I think a solution would be to create a jquery routine to mimemail that convert external CSS into inline CSS. I think this should be doable using jquery.

The role of the function would be to read your external CSS file (example : mail.css), and to read the HTML of your email. Then, if a tag have a class that is defined in the CSS, replace it with inline style.

What about this idea ?

zmove