Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

The Android Mail App and CSS “Class” Declarations

Posted February 10, 2011 by John Thies

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

While testing the native Android email application we found that it does not support embedded or linked CSS class declarations. For example, the following CSS declaration will not be displayed within the mail application:

.test { background-color: red}

This may not be a major issue since its better to use inline CSS wherever possible but we found a work around just in case you have no choice but to use some embedded CSS in your HTML email.

We discovered this solution while testing the @media query support on the Android device. As it turns out - if you wrap a CSS class declaration within a "@media all" block it will render the CSS. Here is an example:

@media all { .test {background-color: red; } }

The great thing about this work-around is that the "@media all" CSS block is supported in every email client that currently supports embedded CSS (argh Gmail!). To get the best intended display results, wrap all of your embedded class declarations within a @media query block.

I also tested this fix for linked CSS. Although linked style sheets are not recommended for all email clients, it will work for the native Android email application. All you need to do is include the "media" attribute with a value of "all" like this example:

<link rel="stylesheet" media="all" href="http://www.domain.com/example.css" />

So from now on remember to wrap all your embedded CSS within a media query block (@media all) and include the "media" attribute in linked CSS tags. That way all of your CSS class declarations will be rendered, barring you don't have any unsupported CSS properties within the declaration.

Comments

Porter pic
Porter
I'm trying to test this, and also in conjunction with your recent post on media queries in mobile HTML clients (http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails).

I'm not having much luck. I'm trying to show/hide desktop and smartphone versions of content using these things, and this code doesn't work for me in Gmail web, Gmail Android, or the Android Email client:

<style type="text/css">
@media all {
p#desktop {display:none !important;}
p#smartphone {display:block !important;}
}
</style>

Combining it with a media query, then, also did not work:

<style type="text/css">
@media all and (max-device-width: 480px) {
p#desktop {display:none !important;}
p#smartphone {display:block !important;}
}
</style>

In Android Email, I see nothing (even without those styles) making me think my company's HTML email is just bad on the Android client.

In Gmail on web and the Android Gmail client, those rules appear to just be ignored.

Any thoughts? See anything I'm doing wrong there?

Porter
Posted 03/22/2011

Avatar
John Thies
Hey Porter, Gmail does not support any embedded CSS styles so the @media trick will not work for any Gmail clients.

As far as the Android device, you might want to run some simple tests to make sure it supports what you are trying to do with the CSS styles.
Posted 03/23/2011

Porter pic
Porter
John, thanks.

Ultimately, what I'm after is being able to deliver a desktop-optimized HTML email that also has mobile content in it, and have the mobile client hide the desktop content and show the mobile content - at least for iPhone and Android.

Still hacking away, but not looking good, or at least not crystal clear.
Posted 03/23/2011

Dripable Service pic
Dripable Service
What a frankly amazing piece.
Posted 11/03/2011

Tutorial Autoblog Blogspot pic
Tutorial Autoblog Blogspot
You are totally right on this blog post!!
Posted 11/14/2011

murah pic
murah
You are quite correct on this writing!!!
Posted 11/20/2011

venezia pic
venezia
I am in accordance completely...
Posted 12/06/2011

Hit Promotional Products pic
Hit Promotional Products
Very instructional blog!!
Posted 12/17/2011

Keiron pic
Keiron
I read your emailology tricks guide and it states: "iPhone native email clients. ALWAYS USE IDs!!! The
Android does not support “class” declarations." However I have elements of our emails that are repeated and coded the HTML where we can add or remove elements. I understand that IDs are meant to be used once whereas Class are designed to be used multiple times. If I use IDs to overcome Android issue can I repeat the use of the same ID (as if it was a class declaration) or will this break the code. Please offer insight before I decide on my course of action.
Posted 05/07/2013

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!