Email clients ignoring internal style sheet

Question

Best practices in normal web development call for putting your styles between style tags or loading a style sheet; however, I've found out that several email clients will ignore any style tags and only execute inline styles (www.campaignmonitor.com). I can deal with that, but I'm not sure if CSS supports inline media queries. I would like my email to display a little different on the desktop. Is something similar to this supported?:

<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>

Answer 1

I don't think they work inline like that, you would probably have to embed the stylesheet in the HTML email template itself (e.g. <style>@media {...}</style>).

Even that seems like a VERY dodgy thing to rely on. HTML emails are a huge pain in the ass because standards and CSS support are about a decade behind and there is massive variation among popular email clients in terms of which properties and types of styling are supported.

In general keeping it simple and using old school table based layouts with all inline CSS is the way to go. Campaign Monitor has a great chart of support for various CSS properties in major email clients and devices.

Answer 2

A common workaround to the problem of HTML not rendering correctly in email clients is to do the best you can and have a prominent link at the top that says: "Email not displaying correctly? View it in your browser."

Ray Kurzweil's weekly newsletter blast does this, and it's very well formed, and well done, and I always read it. (It's a brilliant blend of content and presentation).

Answer 3

HTML emails are an entirely different beast. You need to code them like it is 1999. Use a very limited set of tags and make sure all or your styles are inline. Use tables for your layouts.

To make use of media queries you need to do both.

What I recommend doing is to first create your email with all inline styles. Then when you are happy with it you can add support for mobile.

To add support for mobile add the media queries to the head tag and use !important to override any inline styles.

Here is an example: Optimizing for mobile email

Here is a helpful chart that details which css support for email clients. http://www.campaignmonitor.com/css/