Как я могу отправлять электронные письма в формате HTML с включенным CSS с помощью PHPMailer?
У меня проблема с отправкой писем в формате HTML с помощью PHPMailer. Я делаю шаблон Умный и извлекаю из него весь HTML-код. Но когда я отправляю почту, я получаю письмо без включенного CSS (это только цвет фона, шрифт или что-то в этом роде). В PHPMailer я установил, что почта - это HTML.
Есть ли способ отправить HTML-почту с включенным CSS?
Ответы 8
HTML и CSS чреваты болью и разочарованием. Ничего общего с PHP, очевидно, что большинство реализаций кашельoutlookкашель были и остаются архаичными.
Это единственная область, где я бы посоветовал это (и у кого-то может быть лучшее понимание / план *), но вы должны взглянуть на сокращение CSS и написание html в стиле середины 90-х с помощью <table>, <font> и <hr > теги (о боже)
** Поделись, пожалуйста :)*
ну, CSS действительно минималистичен, и да, у меня есть <table>, но я действительно хочу только изменить цвет фона или некоторые базовые вещи.
да, вы были правы "Gmail не поддерживает CSS, если он не является встроенным"
Как ссылаются на вашу таблицу стилей?
Для электронной почты вам нужно будет либо указать абсолютный путь к вашей таблице стилей, либо включить стили в заголовок шаблона.
как я уже сказал, он включен в заголовок шаблона
Я предполагаю, что у вас есть CSS во внешнем файле, в таком случае самым простым решением было бы просто переместить его в заголовок html внутри письма.
Однако поддержка css в почтовых клиентах очень неудобна, поэтому с их стороны это может быть просто дрянной отрисовкой.
У меня есть CSS в заголовке html внутри почты. Но спасибо за совет
По крайней мере, поддержка CSS в электронной почте очень ограничена. Самая большая проблема в том, что разные клиенты поддерживают разные наборы свойств CSS.
Вы предоставляете нам очень мало контекста для работы.
- Как отображается ваша электронная почта? CSS вообще не разбирается? Ваш CSS отображается на экране в виде текста?
- Как выглядит ваш CSS?
- Как выглядит ваш шаблон электронного письма?
Для получения дополнительной информации о поддержке CSS в электронной почте, пожалуйста, обратитесь к этому отличный обзор.
1. CSS вообще не отображается, отображается только HTML 2. мой css выглядит: pastebin.com/m5787d770 3. и полный шаблон выглядит: pastebin.com/m346a5475 Спасибо за ссылку, я ценю это.
какой почтовый клиент вы используете?
Я пробовал это с gmail и webmail (обмен Windows), и да, я видел, что он не будет работать с gmail таким образом.
Некоторые почтовые клиенты удаляют раздел <head>, поэтому поместите теги <style> </style> в <body>.
Я видел, что Gmail вообще не поддерживает <style> :)
Я обнаружил, что лучшая (самая широкая) поддержка CSS - встроенная (style = ""). Печально, но факт.
Я так и сделаю, думаю, сейчас это единственный вариант :)
Вот действительно хорошая статья SitePoint об электронных письмах в формате HTML, "Как кодировать электронные информационные бюллетени в формате HTML".
Есть способ ...
$body = <<< YOUR_HTML_WITH_CSS_STYLE_TAGS
<html>
<head>
<style>
body * {width:1px;}
#adiv {padding:2px;}
.aclass {margin:3px;}
</style>
</head>
<body>
<div>
some html
</div>
<div id = "adiv">
<p class = "aclass">
</p>
</div>
</body>
</html>
YOUR_HTML_WITH_CSS_STYLE_TAGS;
$doc = new DOMDocument();
@$doc->loadHTML($body);
$xpd = new DOMXPath($doc);
0&&$node = new DOMElement();
$result = $xpd->query('//img');
foreach($result as $node){
$attr = $node->getAttribute('src');
$re = '/(http://.*?)?(/.*+)/i';
if (preg_match_all($re, $attr, $matches)){
if (!empty($matches[1][0])&&0)
continue;
$attr = 'http://'.$_SERVER['HTTP_HOST'].$matches[2][0];
}
$node->setAttribute('src',$attr);
}
false&&$node=new DOMElement()&&$child=new DOMElement();
$result = $xpd->query('//style/..');
foreach($result as $node){
foreach($node->childNodes as $child){
if (strtolower($child->nodeName)=='style'){
$node->removeChild($child);
$css = $child->textContent;
$re = '/(.*?)\{([^}]+)\}/';
if (preg_match_all($re, $css, $matches)){
foreach($matches[1] as $idx=>$css_selector){
$css_text = $matches[2][$idx];
$css_text = preg_replace('/\s+/',' ',$css_text);
$css = new CSSQuery($doc);
foreach($css->query($css_selector) as $selected_node){
$style = $selected_node->getAttribute('style');
$selected_node->setAttribute('style', $style?$css_text:$style.';'.$css_text);
}
}
}
}
}
}
$body = $doc->saveHTML();
Этот код сгенерирует вывод HTML в $ body следующим образом:
<html>
<head>
</head>
<body>
<div style = "width:1px;">
some html
</div>
<div id = "adiv" style = "width:1px;padding:2px;">
<p class = "aclass" style = "width:1px;margin:3px;">
</p>
</div>
</body>
</html>
Класс CSSQuery можно найти по адресу phpclasses.org.
Эта реализация основана на том факте, что большинство веб-сообщений позволяет добавлять стиль только с помощью встроенного стиля атрибута тега, а не с помощью тегов стиля или тегов ссылок.
Он в значительной степени ограничен и имеет ограниченный синтаксис из-за регулярного выражения, это довольно просто, но все же лучше, чем писать собственные атрибуты встроенного стиля в каждом теге HTML.
Амбициозно, но, похоже, не работает с большим HTML: [:error] PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 4096 bytes) in .../CSSQuery.php on line 709. Это линия if (is_array($arr)).
обратите внимание, что это очень старая ветка, я даже не рекомендую себе это делать. в настоящее время Gmail поддерживает даже медиа-запросы. так что это полностью устарело. также 128Мб памяти не много.
Да, я прибег к другому подходу, а именно к созданию электронного письма в формате HTML с использованием специального файла PHP и комбинации ob_start()/ob_get_clean(). Чтобы обойти проблему использования встроенных стилей, я создал переменные PHP для хранения общих стилей и внедрил их везде, где это необходимо. Re: поддержка почтового клиента: Хорошо, что Gmail лучше поддерживает CSS в электронных письмах, но этого недостаточно, когда мы не знаем, какой почтовый клиент будет использовать получатель. В отличие от браузеров, которые имеют более предсказуемый цикл обновления, у вас могут быть клиенты, которые все еще используют Outlook 1995.
Я не люблю продвигать страницы, но есть очень хороший инструмент, который я использовал для этого, он называется лакмусовой бумажкой. это действительно помогает вам тестировать дизайн электронных писем для разных платформ, веб-почту и т. д. К сожалению, это платно.
Ознакомьтесь с ответом на этот вопрос StackOverflow, чтобы получить хороший список ссылок на лучшие практики для электронных писем в формате HTML: Рекомендации и рекомендации при написании электронных писем в формате HTML