Формы в электронных письмах - хорошая практика?

Question

Я отправляю электронные письма своим клиентам с информацией о ваучере. Я бы хотел графически представить ваучер.

Я придумал стиль таблицы стилей (поскольку таблицы хорошо получены в почтовых клиентах) - проверьте фрагмент кода для моего решения.

Я не хочу искать изображения, так как они по умолчанию отключены в большинстве почтовых клиентов.

Мой вопрос: хорошо ли он получен почтовыми клиентами и программами, или я должен воздержаться от такой практики?

#badge-ribbon { 
 
    position: relative; 
 
    background: red; 
 
    height: 100px; width: 100px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
    border-radius: 50px; 
 
} 
 
#badge-ribbon:before, #badge-ribbon:after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-bottom: 70px solid red; 
 
    border-left: 40px solid transparent; 
 
    border-right: 40px solid transparent; 
 
    top: 70px; 
 
    left: -10px; 
 
    -webkit-transform: rotate(-140deg); 
 
    -moz-transform: rotate(-140deg); 
 
    -ms-transform: rotate(-140deg); 
 
    -o-transform: rotate(-140deg); } 
 
#badge-ribbon:after { 
 
    left: auto; 
 
    right: -10px; 
 
    -webkit-transform: rotate(140deg); 
 
    -moz-transform: rotate(140deg); 
 
    -ms-transform: rotate(140deg); 
 
    -o-transform: rotate(140deg); 
 
}

\t <table id="badge-ribbon">

Answer 1

CSS в электронной почте находится примерно на уровне CSS 1.8, редко более интересной или полезной, чем CSS в 1998 году. Лучше всего отправить простое электронное письмо с наложением кода HTML, в котором используются элементы style и table. Изображения и большие цветные блоки - лучший метод, так как поддержка CSS 3 довольно несуществующая, а поддержка CSS CSS в целом крайне неоднородна и неравномерна, в зависимости даже от того, как представлен CSS, некоторые вещи работают как элементы style, но прикрепляют таблицы стилей CSS обычно отделяются от кода HTML.

CSS3 обычно не поддерживается почтовыми клиентами.

Простой чистый адрес электронной почты с ярким жирным цветным блоком и/или изображениями и четкой чистой ссылкой на веб-страницу, отображающую одно и то же сообщение в красивых HTML5 и CSS3.

Answer 2

Я бы не использовать эту технику и идти с изображениями, как есть хороший шанс, многое из этого CSS не будет работать в клиентах Outlook, и Gmail будет вырезать из встроенного CSS полностью. Запасной вариант для изображений, не загружая использует Alt тег, чтобы поставить заголовок/копия

Campaign Monitor CSS support guide