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, оттуда же и информация для этого ответа.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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