Web Dev Stuff

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]-->

Thank you for reading!