I have been running into an issue with HTML emails in Gmail stripping the style tag. The following is my example style tag in the head of the document that DOES work in Gmail in the iOS app. The text is red on desktop and green on mobile in Gmail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@media screen and (max-width: 600px) {
.some-class {
color: green !important;
}
}
</style>
</head>
<body>
<div class="some-class" style="color: red;">Test</div>
</body>
</html>
However it breaks if I use a child descendant selector > anywhere in the style block, even if I put it in a separate style block, Gmail seems to remove all style blocks. Here is an example where I am using the child descendant selector and Gmail removes all style blocks. The text is red on both desktop and mobile.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
@media screen and (max-width: 600px) {
.some-class {
color: green !important;
}
}
</style>
<style type="text/css">
@media screen and (max-width: 600px) {
.breaking-class > a {
color: blue !important;
}
}
</style>
</head>
<body>
<div class="some-class" style="color: red;">Test</div>
</body>
</html>
Does anyone have any suggestions of what I can do here. A few possible successful outcomes to me would be:
- An approach that works to allow using a child descendant selector in Gmail (best case).
- An approach that doesn't support the descendant selector in Gmail but where it won't actually break and remove the other css like the
.some-classclass. (Using separate style blocks didn't work for me)
Right now the only thing that works is removing the descendant selector but then it has a lot less specificity for what I need.