Debug your email web client with Chrome dev tool - <style> tag

When I was writing this post about how to remove the unwanted gaps for Outlook.com, I think I should introduce some basic usage of the Chrome dev tool to help with figuring out some mystery of email web clients. And here I'm going to talk about the <style> tag.

Most of the email rendering issue in web client can be easily figured out if you are familiar with your Chrome dev tool.

Usually, the issues are related with the web client as they will execute a few filter with your HTML tags and strip out something they thing that is unnecessary.

First, let's figure out where's your email <body> when you open your dev tool. That's a start point for every email debugging.

Let's take a look at Gmail. Usually it's a little hard for you to directly inspect your root tag in Gmail. But you can inspect an element inside your email or wrapping your email. Here I'll inspect an inner element - preheader.

Once you located the code, then you go up to find your root element. I found most of the emails are having margin:0;padding:0;width:100%!important;background-color:#ffffff in the body tag. And you know your code best, I believe it won't be so tough for you to find that.

Outlook.com will be the same. But if you are careful enough you will find there are some <style> tags above the root element. For some clients, <style> will be filtered and transformed, then injected into the code directly. That gives us an overview of what styles the client stripped and what extra styles the client added.

So, first I noticed that @media query was taken out. And some of the global selector like below was also taken.

table, td {
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}
img {
	-ms-interpolation-mode: bicubic;
}
* {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
}
......

But it still kept some styles. And you will notice that every style was added with .rps_cf1f which is the container of the email. And then appended with our selector but having x_ prefix. This wouldn't affect the email rendering as the value in class attribute was also added with an x_ prefix.

Gmail is acting a little different. But you could still be able to figure out some as Gmail officially said that Gmail supports <style> tag but with some limitations. So the secret hides behind the Styles tab.

After you clicked the highlighted part, you will be led to the <style> at very top of the page code.

And boom, it has almost the same thing as what you've seen in Outlook.com but with the code compressed. And if you take a close look, it contains the media query which is good! :-)

Feel free to give it a try. The Chrome dev tool could tell you a lot of mystery that you've ever known.

Please help tweet this post if you think it's good. :-)

Woody Chai

Woody Chai

I love HTML, CSS and JAVASCRIPT. I'm an developer working on SFMC (AMPScript, SSJS, SOAP/REST API). Love to work on all kinds of issues and dig out new technologies.

Read More