我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.
示例: <style>...</style> vs内联CSS.
简而言之:什么从网络世界转移到电子邮件世界,什么没有.
不必担心链接样式或悬停样式.
我想自动转换这样的文件
<html>
<body>
<style>
body{background:#FFC}
p{background:red}
body, p{font-weight:bold}
</style>
<p>...</p>
</body>
</html>
这样的文件
<html>
<body style="background:red;font-weight:bold">
<p style="background:#FFC;font-weight:bold">...</p>
</body>
</html>
如果有一个HTML解析器可以做到这一点,我会更感兴趣.
我想这样做的原因是我可以显示使用全局样式表的电子邮件,而不会让他们的样式表弄乱我的其余网页.我还想将结果样式发送到基于Web的富文本编辑器以进行回复和原始消息.
据我所知,CSS选择器/类不能用于设置您发送的电子邮件的样式,因为许多电子邮件客户端不会获取外部css文件.
我想知道人们通常如何为自动电子邮件创建模板.你是否只是将每个CSS样式内联到DOM？这似乎是非常低效且容易出错的方法.
我想知道的一件事是,是否有一个工具将由CSS选择器设置样式的HTML文档"展平"为具有内联CSS样式的HTML文档.如果这样的工具存在,那么我可以使用我有的常规模板框架(我现在使用django)来生成电子邮件,处理样式,并发送结果.
我想将包含CSS样式表的HTML页面发送到电子邮件帐户.问题是CSS样式表根本不可见.我是否必须内联每个CSS样式？这似乎是非常低效的方法.还有其他想法吗？
以下是发送电子邮件的PHP代码:
<?php
$to = "myaccount@gmail.com";
// subject
$subject = "Test mail";
// message
$message = file_get_contents("index.html");
// from
$from = "myaccount@gmail.com";
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Additional headers
$headers .= "From:" . $from;
// Mail it
mail($to,$subject,$message,$headers);
echo "Mail Sent.";
?>
非常感谢你的帮助.提前致谢.
我使用CKEDITOR 4并且我想过滤HTML内容以直接在HTML元素中插入样式,如MailChimp及其CSS inliner(http://beaker.mailchimp.com/inline-css).但我必须在Javascript中做,有人有想法吗？
我可以使用jQuery和PrototypeJs.
我不能使用外部API.
我的测试jsFiddle与CKEditor(粘贴):http://jsfiddle.net/EpokK/utW8K/7/
在:
<style>
.test {
outline: 1px solid red;
}
</style>
<div class="test">Hello</div>
出:
<div style="outline: 1px solid red;">Hello</div>
我找到了这个解决方案:http://tikku.com/scripts/websites/tikku/css_inline_transformer_simplified.js 但这个技巧打开一个标签,默认情况下它在Firefox中被阻止...
API解决方案:http://premailer.dialect.ca/
可能重复:哪些工具可以自动内联CSS样式来创建电子邮件HTML代码？
作者提供的说明:哦,是的,绝对是重复的.抱歉.
通常,HTML电子邮件不支持正确的CSS技术.
然而,开发这些技术很好,因为它可以更快地玩更改等等(我不需要向所有人出售CSS的好处!)
是否有一个工具可以采用可爱的HTML并将其变成令人讨厌的电子邮件兼容HTML,其中所有样式都是从CSS文件中推断出来并放置在内联？
尽管由于电子邮件客户端存在众多差异而无法实现100%兼容性,但有助于该过程的工具非常有用,即使它只是简单地使用CSS并将其内联.
我正在尝试为我的网站制作一些不错的电子邮件模板，但我对精心设计的代码和功能的渴望之间存在冲突。
我的问题是我所有的电子邮件模板都像标准模板一样格式化：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"...>
</head>
<body>
Some stuff
</body>
</html>
它作为网页显示得很好，但是在尝试将其作为格式化的电子邮件发送时，它本质上只是发送了该Some stuff部分，这意味着没有任何格式可以真正传达它。
我当前的电子邮件代码如下所示：
message = Message(
subject="Subject",
html= render_template(
'emails/confirmation_email.html',
confirmation_code=confirmation.confirmation_code
),
sender = ("sender", "sender@gmail.com")
)
我正在使用 Jinja2 模板和 Flask-Mail 扩展。
基本上，我真的很想在我的电子邮件中包含这些样式表，但我真的反对在样式标签中包含所有内容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Thank you for subscribing to our newsletter!</title>
<style>
img.img {
z-index: -1;
position: absolute;
float:left;
}
.content {
position: relative;
z-index: 5;
}
</style>
</head>
<body>
<div style="width: 750px; font-family: Arial, Helvetica, sans-serif; font-size: 11px;">
<img class="img" src="email.png" />
<div class="content">
<h1>Text<small>app</small></h1>
</div>
</div>
</body>
</html>
例如,当我将此简报发送到gmail时,将忽略z-index.我想要的是img上的文字.但它将首先渲染图像然后再渲染文本.
基本上,z-index被忽略.这可以解决,或者我不能使用z-index？
css ×9
html ×7
email ×4
.net ×1
ckeditor ×1
html-email ×1
html-parsing ×1
java ×1
javascript ×1
jinja2 ×1
newsletter ×1
php ×1
premailer ×1
stylesheet ×1
z-index ×1