Gmail 剥离类 / id / 数据属性 - 替代方式不起作用答案

【问题标题】：Gmail stripping class / id / data-attribute - alternative way not workingGmail 剥离类 / id / 数据属性 - 替代方式不起作用
【发布时间】：2015-07-07 15:39:25
【问题描述】：

我目前正在创建一个响应式电子邮件模板，我已经进入测试阶段，发现 Google 会删除您添加到表格中的所有类。

我也尝试过使用 ID，但它们会删除该 ID 以及我尝试过的任何数据属性。

我读到了这个，发现了一个绕过这个的小技巧。我设法让它工作，但它似乎没有再次被打破。这个技巧如下

<table id="container" lang="x-container" title="container" class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;margin: 0 auto;">

CSS 将是

[title~=container] {
    width: 100% !important;
}

但 Google 似乎从我的样式中剥离了这一点。一旦我在选择器前面添加 * ，它就会留在我的 CSS 中，但我的元素似乎没有拾取它。

所以我的问题是。如果您不能使用 ID 或 Class，使用媒体查询定位 gmail 中的元素的最佳方法是什么？

【问题讨论】：

我遇到了类似的问题。你有想过这个吗？
“我的回答有帮助吗”的问题...

标签： html css email gmail

【解决方案1】：

您可以使用以下内容：

* [summary~='fakeclassname'] {
    styles: here;
}

“摘要”是 Gmail 不去除的属性之一。在我想到 Gmail 对电子邮件实际上做了什么之后，我发现这篇文章对其进行了详细分析：

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

该页面上有一些有用的链接可以更深入地了解特定于 Gmail 的定位。

编辑： 看来 Exact Target 去掉了 ET 发送预览中的“摘要”属性。如果您希望“title”属性在 Gmail 和 ET Preview 中看起来都正确，“title”属性可以正常工作。

【讨论】：

我可以在这里得到“答复”吗？
问题是所有非内联样式都被删除了。一个例外：display 被删除，即使是内联的。 litmus.com/help/email-clients/gmail-no-head
提供的链接中的假设大部分是正确的，但是正确编写的样式将被重新定位。我向您保证，上述方法有效，并且我经常使用它。提供的链接详细说明。甚至今天也进行了测试！
我同意cptstarling。您的解决方案没有解决问题。尽管没有去除汇总值，但完全缺少该选择器的 CSS 声明。（在检查器中查看）所以我看不到让时事通讯响应的方法，只有当它在所有断点中具有完全相同的元素时。如果我使用某个类（或摘要）来隐藏/显示某些视图中的某些元素，那么它在 Gmail“查看整封邮件”视图和某些移动视图中都不起作用。
我可能会将这个问题标记为过时的，因为 Gmail 已经发生了重大变化，这不再是一个问题。 developers.google.com/gmail/design/css

【解决方案2】：

这种方法目前似乎对我有用：

您的电子邮件模板的<head> 中的样式（这些已在 Gmail 中删除，但适用于其他客户端）：

<style type="text/css">

    /* Styles below are applied on all clients except Gmail */


    /* Desktop */

    div[id=tablet],
    div[id=mobile]{
        display: none;
    }


    /* Tablet */

    @media only screen and (max-device-width: 1024px){
        div[id=desktop],
        div[id=mobile]{
            display: none !important;
        }

        div[id=tablet]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }


    /* Phone */

    @media only screen and (max-device-width: 736px){
        div[id=desktop],
        div[id=tablet]{
            display: none !important;
        }

        div[id=mobile]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }

</style>

HTML：

<body>

    <div id="desktop">
        [template for desktop]
    </div>

    <div id="tablet" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for tablet]
    </div>

    <div id="phone" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for phone]
    </div>

</body>

【讨论】：