Outlook.com How To Target Css At A Specific Class
Solution 1:
I'd strongly suggest you remove the margins from your email and use padding or empty (nbsp) table cells instead. Both are 100% supported, and as you're beginning to discover, jumping through hoops for certain clients can get really messy really quickly. Empty table cells with nbsp's in them are the best option as sometimes padding can get removed if your subscriber forwards the email to someone else.
That being said, if you want to target Outlook and not other clients, there are conditional mso tags that can be used.
Not sure if it works for Outlook.com, but give this a try:
<!--[if gte mso 15]><!-->
// This will only be seen by Outlook 2013
<![endif]-->
Solution 2:
CSS is a different ball game for Outlook. As I'm sure you've come across in coding for email, there are severe limitations and it's often better to scale back your expectations than try and make something work.
Here is a link to what CSS styles will work for various email clients http://www.campaignmonitor.com/css/
Solution 3:
Outlook.com will eat conditional comments, so none of the above will work properly.
Solution 4:
The mso tags doesn't work anymore apparently, try this css hack instead
<!DOCTYPE html><html><head><styletype="text/css">/* This will be specific to outlook.com */span[class~=x_outlook] {
color: #26d0ae;
}
/* This styling will work on the mobile apps of Microsoft Outlook (both ios and android) */body[data-outlook-cycle].outlook {
color: #26d0ae;
}
</style></head><bodyclass="body">
Neutral
<spanclass="outlook">
This span is a chameleon
</span></body></html>
Post a Comment for "Outlook.com How To Target Css At A Specific Class"