It’s all really in the headline. If you want to target the Outlook app, use [data-outlook-cycle] selector. If you apply it to the <body>, then it will cover everything.
body[data-outlook-cycle] .outlookApp_show {display:block !important;color:#ff0000;}
body[data-outlook-cycle] .outlookApp_hide {display:none !important;}
I’m going to just post an example instead of going into all the detail, but here is some detail.
This hack only works in Webkit email clients, which is pretty much IOS devices, Outlook on the Mac, Apple mail, and maybe others, but doesn’t work in Outlook in general, Gmail, Yahoo, etc.
To target Webkit email clients, we use this media query:
@media screen and (-webkit-min-device-pixel-ratio: 0)
In this example, we are using the CSS Psudo element :checked to create a click event listener. Part of the hack is that we can use the <label> tag to wrap around content we want clickable. The actual form element being clicked stays hidden.
Styles
input, .webkit_content {display: none;}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.webkit-hide {display:none;}
#A1_result {display:none;}
#A1:checked ~ #A1_result {display:block}
}
HTML
<div class="webkit-hide">
Show this if it is not a Webkit email client
</div>
<!-- [if (gte mso 9)|(IE)]>
<!-->
<form class="webkit_content">
<label for="A1">
<input id="A1" name="radio_btn" type="radio" value="">
Click here!
</label>
<div id="A1_result">
Show this content when you click on "Click here!" above.
</div>
</form>
<!--<![endif]-->
This is some next level stuff right here….
Using you phone’s camera in an email????
If you just want the answer to fixing this issue, go down to “The Solution” section.
(Hint: replace <td> with <th>)
A common technique for making a multi-column desktop layout magically transform to a one-column layout for mobile is to stack the table columns by changing the TD display to “block” in a media query. You are changing a table cell into a block-level element, like a DIV or P.
The following code is an example of how that happens. The styles below will only be applied to screens that are 500px wide or smaller, meaning most cell phones. The “stack_mobile” class is applied to all the <TD> elements we want to stack.
@media only screen and (max-width: 500px) {
td[class="stack_mobile"] {
display: block !important;
width: 100% !important;
}
}
This works on all devices that recognize media queries, or so I thought. For some reason we were not checking Litmus results for the Outlook app. I really started paying attention to the Outlook app results when I started using the app myself a while back. The problem was that I am on an Android phone, and although there were some Outlook app specific issues I caught by looking at my phone, I had never looked at any results for the Outlook app on iPhones, which was pretty amazing as most people that were proofing the emails, had iPhones, but not sure if any were using the Outlook app, so my/our bad.
I immediately added the Outlook app for IOS to my Litmus results, and dang it if my Responsive, Adaptive, or whatever you want to call them, emails were not looking jacked up on the Outlook app for IOS.
The problem wasn’t just that they didn’t stack, but also that the medial query was being applied to SOME things, but not all, so I was not seeing my columns stack, but I wasn’t seeing the desktop version either. This was because the app did recognize the query, but it just didn’t apply “display:block” to my TDs.
As of this writing, the fix seems to be to replace your <td> with <th> within your code. I have not found that using <th> causes any issues in other clients, but I wouldn’t be surprised if the next version of Outlook strips them out, or does something ridiculous, as they are known to do in their “updates”.
Fixing bugs with Outlook specific CSS
This is a very informative, yet frustrating article on the fun time that is coding Emails for Outlook.
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
Here is an excerpt from the article:
Conditional stylesheet
The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment.
<!--[if mso]> <style type="text/css"> ul { margin: 0 0 0 24px !important; } </style> <![endif]-->Note the
!importantdeclaration which is needed to override inline styles.The stylesheet will be parsed by the Word-based versions of Outlook. To other rendering engines, the whole block of code will look like an HTML comment they should ignore.
Although I’ve never needed to, you can get more specific with conditional comments that target specific versions of Outlook. Should you need to, here are the
msoversion numbers that correspond to each Word-based Outlook version.