Ved*_*kar 7 javascript css email gmail pseudo-class
我从我的php脚本发送一些邮件.
它有如下结构:
<style type="text/css">
.elements{
/*its CSS*/
}
.elements:hover{
/* Hoverd CSS changes background and color*/
}
</style>
<center>
Actual Mail Body <a class="elements" href="URL">Element</a>
<center>
这适用于所有邮件客户端,除了gmail.因此,快速SO搜索引导我:HTML格式的电子邮件在Gmail中根本不显示,但在其他邮件客户端中
我开始知道gmail不支持<style>而是支持inline-style.
所以我尝试了这个:
<center>
Actual Mail Body <a class="elements" href="URL" style="it's style here">Element</a>
<center>
但是现在我的问题是:hover伪类无法转换为inline-style,所以我试图模仿它JavaScript:
<center>
Actual Mail Body <a class="elements" href="URL"
OnMouseOver="this.style.background='#ddeeff';this.style['color']='#555555';"
onmouseout="back-to-original-css">Element</a>
<center>
但这对我没有帮助.
那么有没有办法让:hover伪类在gmail邮件客户端工作？
此外,我认为这是不可能的(看看g+'s你的gmail帐户中的邮件.他们可以发送这样的邮件.)
欢迎提出任何想法,想法和建议.
那么这个问题存在很多争议,但这就是我发现的.准备一面文字.看来你可以用一种变通方法,使<style>工作,说这里.
以下是实际报价:
Gmail会从所有元素中删除class和id属性,但保留其他一些属性:style,title,lang,width,height,alt,href.
由于href和alt在技术上不是div的合法属性,所以我决定不使用它们,即使你可以.主要候选人将是标题 - 但是标题带有一个副作用 - 当用户将光标悬停在元素上时,标题将是可见的.
我选择了lang属性,因为它是一个通用属性(对所有元素都有效),在悬停时不可见.当然,我们并没有将此属性用于其预期目的 - 但HTML规范中存在一个技术异常,允许我们以这种方式使用它.通过使用"x-"预先挂起属性值,这表示lang属性并不意味着对客户端有意义,据我所知,目前没有电子邮件客户端处理lang属性.
分解
以下是我尝试过并在Gmail中使用的所有样式的完整细分:
Run Code Online (Sandbox Code Playgroud)The following works in Gmail: * E[foo] * E[foo="bar"] * E[foo~="bar"] * E[foo^="bar"] * E[foo*="bar"] * E[foo$="bar"] * E:hover * E:link * E:visited * E:active E F E > F E + F E ~ F
Gmail在样式标记(在电子邮件中)处理CSS的方式摘要.
.divbox {..} //Allowed but pointless - Gmail strips class attributes from elements
#divbox {..} //Allowed but pointless - Gmail strips id attributes from elements
[class~="divbox"] {...} //Removed by Gmail
* [class~="divbox"] {...} //Allowed but pointless - No class attributes
div {...} //Allowed but too generic to be useful
div:hover {...} //Removed by gmail. No pseudo class support? Not so fast!
* div:hover {...} //Allowed! Interesting…
* [lang~="x-divbox"] {...} //Allowed! Now we’re talking
* [lang~="x-divbox"]:hover {...} //Allowed! Magic! :)
免责声明:这篇文章不是我写的,我不相信.
我测试了它适用于gmail和outlook(hotmail).
我用过的代码:
<html>
<head>
<style>
* [title="divbox"]:hover{
background-color: green !important;
color: white;
}
.blinking:hover{
background-color: green !important;
color: white;
}
</style>
</head>
<body>
<div class="blinking" title="divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</div>
</body>
</html>
PS:blinking该类用于hotmail,因为它不显示gmail解决方法.