0

Появилась идея выводить E-Mail админу перед отправкой пользователю. Но возник вопрос - как сделать так, чтобы стили сайта не влияли на вёрстку письма?

Сначала подумал использовать <iframe>, но не знаю, правильный ли это юзкейс для него. Плюс, как я понял <iframe> требует указания в теге src URI, с которого браузер будеи брать содержимое, а у меня содержимое строится динамически и вставляется непосредственно в вёрстку.

Сам сайт использует Bootstrap 2 CSS, бэкенд на PHP.

Ниже пример, как бы я хотел это видеть. Сразу предупреждаю, этот пример показательный и я его написал только для этого вопроса.

.mail-preview {
  margin: 20px;
  padding: 20px;
  border: 1px solid grey;
}
<link href="https://cdn.usebootstrap.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />

<!-- Тут сайт, работает со стилями Bootstrap -->

<div class="mail-preview">
  <!-- Тут вёрстка E-Mail, Bootstrap её не трогает -->
  Письмо которое выглядит ровно так как будет у пользователя
</div>

<!-- Снова сайт -->
<form class="form-horizontal">
  <div class="control-group">
    <label for="email" class="control-label">Отправить по адресу</label>
    <div class="controls">
      <input type="email" name="address" />
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <button id="confirm-send" class="btn btn-primary" type="submit">
        Отправить это письмо
      </button>
    </div>
  </div>
</form>

1 ответ 1

0

Покопавшись в гугле и обдумав задачу, я понял, что лучший способ - сбросить все CSS свойства для класса email-preview на "заводские" (user-agent styles).

Сделать это можно с помощью CSS-свойства all: revert, но оно не относится к стандарту CSS3, и, по факту, не поддерживается почти нигде (см. тут).

Ещё один способ - использовать css: initial, оно как раз есть в CSS3, но это свойство не сбросит не только пользовательский CSS, но и "заводские", например, уберёт display: block у div.

Чтобы сделать именно независимый превью HTML-кода, придётся сэмулировать поведение all: revert, применив сначала all: initial, а потом прописав стили для всех элементов.

.email-preview, .email-preview * {
  all: initial;
}

h1, h2, h3, h4, h5, h6, p, div {
  display: block;
}

/* И ТАК ДАЛЕЕ */

P. S. CSS-свойство all не работает в IE, Edge и Opera Mini, но по факту оно лишь сахар для указания значений по умолчанию во всех свойствах. Сюда этот полифилл я вставлять не буду, найти его можно в ответе на англоязычном StackOverflow, оттуда же и информация для этого ответа.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.