Interactive Email – checkbox hack

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

CSS-Tricks: Myth Busting: CSS Animations vs. JavaScript

Conclusion

Are CSS animations “bad”? Certainly not. In fact, they’re great for simple transitions between states (like rollovers) when compatibility with older browsers isn’t required. 3D transforms usually perform very well (iOS7 being a notable exception), and CSS animations can be very attractive for developers who prefer putting all of their animation and presentation logic in the CSS layer. However, JavaScript-based animation delivers far more flexibility, better workflow for complex animations and rich interactivity, and it often performs just as fast (or even faster) than CSS-based animation despite what you may have heard.

Myth Busting: CSS Animations vs. JavaScript

Force browser to print background images

I was working on a page with coupons and the coupon had check boxes that the user could check and then print the page to take to the store. I had some trouble styling the checkboxes as the art director wanted the checkbox border to be red. That sounds simple, but I struggled for a little while, then decided to use JS and background images to make this work. It was a pretty easy solution, until I printed the page. By default, browsers do not print background images. There is not a straightforward solution for this, as it is meant to be in the control of the user. Well, I found what looks to be a good solution. Keep in mind that this probably doesn’t work in old browsers, but I will test soon.

As of now, it works in all current versions of the following browsers, at the time of this post (5-10-18):

IE, Edge, FireFox, Chrome, Safari, Opera

@media print {
.checkbox_checked:before {
content: url(images/check-mark.gif);
}
}

If you are interested in my solution to style the checkbox borders, I created a DIV and used a background image of a check mark. I used JavaScript (JQuery) to change the class when you click on the DIV. One class had the background image of the check mark, and the other did not. I just toggled between the two.

HTML
<span class="checkbox"></span> 

CSS
.checkbox {
	border: 2px solid #EC1D25; 
	width:15px; 
	height:15px;
	display:inline-block;	
	cursor:pointer;
}

.checkbox_not-checked {
	background-image:none;
}
.checkbox_checked {
	background-image:url(images/check-mark.gif);
}

JavaScript
	$(".checkbox").on("click", function() {
		if($(this).hasClass("checkbox_not-checked"))
			{ 
				$(this).removeClass("checkbox_not-checked");
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
		else if($(this).hasClass("checkbox_checked"))
			{
				$(this).removeClass("checkbox_checked");
				$(this).addClass("checkbox_not-checked");
				console.log('not checked');
			}
		else
			{
				$(this).addClass("checkbox_checked");
				console.log('checked');
			}
  });