The Android Mail App and CSS “Class” Declarations
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.
Author: Kyle Lapaglia
Author: Kyle Lapaglia
10 thoughts on “The Android Mail App and CSS “Class” Declarations”
Comments are closed.
I’m trying to test this, and also in conjunction with your recent post on media queries in mobile HTML clients (https://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
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.
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.
What a frankly amazing piece.
You are totally right on this blog post!!
You are quite correct on this writing!!!
I am in accordance completely…
Very instructional blog!!
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.
Not working any more 🙁