JS2
Best Practice for Hiding and Showing Interactive Content/Fallbacks
I was wondering if anyone had a realible set of styles they use for hiding/showing their interactive content/fallbacks.
I've generally avoided doing many things that require me to swap out content between browsers (outside of MSO fallbacks) so I'm looking for a good set of styles to hide my interactive content where it wont work and display an image prompting the viewer to open it in a web page.So far I haven't found anything recentso I wanted to see what the general consensus on what the most reliable way to do it right now is.
My general set up I think is going to be this (unless there's a better way to do it):
<tr>
<td class="interactive">
**interactive content**
</td>
</tr>
<tr>
<td class="fallback">
<a href="Web-Page-Version-of-Email.html">
<img src="fallback Image>
</a>
</td>
</tr>
Thanks!
This is a basic version of what we use.
So start with a checkbox with an id of
interactivethis should go directly before your wrapper table or div.Then anywhere inside the wrapper add those 2 divs
class="interactive"andclass="fallback"it doesn't matter if you have content before, after or in between these or even if they are nested. Also use divs here as there are more reliable than tables in this instance, and less code.For the CSS
So this is looking if there is a id of
interactivewith acheckedstatus, that is a direct sibling to*(which could be a div table or anything) and somewhere inside that there is a class ofinteractivethen it'll show the element and if it'sfallbackit'll hide it.This CSS relies on
input:checkedand+being supported, if support for any of them are missing then it won't work, and the fallback will show.Depending on what you're building you may only want to target the more advanced interactive email clients in which case you can add a media query.
If you want it to only work on webkit you can also wrap the CSS with a webkit media query
@media screen and (-webkit-device-pixel-ratio)If you want Moz and webkit you can use
@media screen and (-webkit-device-pixel-ratio),screen and (-moz-device-pixel-ratio)Hope that helps
Literally doing this for the first time as the email alert came in, will be very interested to see an answer. Don't have one for you at this point.