Gmail剥离类/ id / data-attribute - 替代方式不工作 [英] Gmail stripping class / id / data-attribute - alternative way not working

问题描述

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

我也尝试使用一个ID，但是它们剥离了我尝试的任何数据属性。

我读了一下这个小东西，碰到一个小技巧来绕过这个。我设法让这个工作，但不是似乎再次被打破。这个技巧如下

 < table id =containerlang =x-containertitle =containerclass =containerwidth =100％cellpadding =0cellspacing =0style =max-width：600px; margin：0 auto;> 
  

，CSS将是

  [title〜= container] {
 width：100％！important; 
} 
  

但Google似乎剥离了我的样式。一旦我添加*在选择器前面，它保持在我的CSS，但我的元素似乎没有拿起来。

所以我的问题是。

解决方案

可以使用媒体查询来定位具有媒体查询的元素的最佳方法以下：

  * [summary〜='fakeclassname'] {
 styles：here; 
} 
  

摘要是Gmail的一个属性不是剥离。在Gmail发生了什么事实之后，Gmail发现我发现这篇文章详细介绍了这一点：

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-选择器/

该页面上有用的链接可以深入到Gmail特定的定位。

编辑：，在发送预览中，Exact Target会显示summary属性。如果您希望在Gmail和ET Preview中查看正确，标题属性可以正常工作。

I'm currently creating a responsive email template, and i have got to the testing stage and found out that Google remove any classes you add to your tables.

I have tried using an ID as well, but they strip that as well as any data-attributes I tried.

I read up about this alittle and came across a little trick to bypass this. I managed to get this to work, but not it seems to be broken again. This trick is as follows

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

and the CSS would be

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

but Google seems to strip that form my styling. Once i add * in front of the selector it stays in my css but my element doesnt seem to pick it up.

So my question is. What is the best way to target an element in gmail with media queries if you cant use ID or Class?

解决方案

You can use the following:

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

"Summary" is one of the attributes that Gmail does not strip out. After it occurred to me what Gmail was actually doing to emails I found this article that breaks it down in detail:

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

There are helpful links on that page that get deeper into Gmail-specific targeting.

EDIT: it appears Exact Target strips out the "summary" attribute in ET Send Preview. The "title" attribute works fine if you want it to look correct in both Gmail and ET Preview.

这篇关于Gmail剥离类/ id / data-attribute - 替代方式不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！