Как изолировать от основного приложения письмо с html телом, содержащим css import - PullRequest
Новая
       17

Как изолировать от основного приложения письмо с html телом, содержащим css import

0 голосов
/ 22 апреля 2019

Я создал клиентское приложение веб-почты, разработанное с помощью AngularJS

Тело электронной почты, отображаемое в формате HTML.Моя проблема в том, что есть письма от клиентов, которые импортируют css и перезаписывают мое приложение css : 

@import url("https://some.web.site/main.css");
href="https://some.web.site/css/stylesheet.css" rel="stylesheet" type="text/css"

Я немного исследовал и обнаружил, что iframe изолирует контент от веб-страницы, однако это считается плохой практикой.
Другими альтернативами, представленными в здесь , являются object и embed , но они кажутся очень похожими
Все требуют предоставления некоторого src (URL-ссылки)
Мой вопрос: есть ли способ обернуть div, что его внутренним содержимым является некий html, имеющий собственный стиль, не влияющий на стилизацию основных (родительских) элементов (css)

1 Ответ

0 голосов
/ 24 апреля 2019

В электронной почте вы можете обрабатывать CSS-стили тремя различными способами, перечисленными ниже в поддержке, которую они имеют для почтовых клиентов:

Встроенный стиль: 

<p style="font-weight: bold;">&nbsp;</p>

Внутренняя таблица стилей: 

<style>
  p {font-weight: bold;}
</style>

Внешняя таблица стилей: 

<link rel="stylesheet" type="text/css" href="mystyle.css">

Лучший универсальный подход заключается в использовании внутренней таблицы стилей.Он работает с большинством почтовых клиентов, и если вы занимаетесь адаптивной разработкой, это самый распространенный поддерживаемый способ выполнения @madia запросов.Проблема с таблицей внешних стилей заключается в том, что Outlook и Gmail не будут работать с ней, что действительно ограничивает аудиторию.

Вам следует запустить скрипт для Angular, чтобы извлечь стили, используемые в вашей электронной почте, и сопоставить их втаблица стилей в заголовке вашего HTML-письма.

Удачи.

...