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:

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:

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:

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.