MJML.io & Email Inline CSS - Нужно ли повторять стили на уровне элементов?
Я готовлю новый шаблон электронной почты для клиента. Я хочу, чтобы она была удобной для мобильных устройств и выглядела привлекательно для всех почтовых клиентов и браузеров. После просмотра в Интернете, MJML.io, кажется, довольно популярен и рекомендуется при исследовании этой темы.
Я собираюсь найти Bootstrap для писем. Я использую MJML впервые. Это довольно изящно, я просто интересуюсь HTML, который он генерирует.
Я хочу отметить, что я очень хорошо знаю HTML. Я знаю, что делает весь код. Я не знаю, 100% это влияет на различные почтовые клиенты / браузеры и как они обрабатывают рендеринг HTML письма. Таким образом, я могу очистить этот код полностью и убрать лишний встроенный стиль, чтобы сделать мой OCD счастливым. Однако я не хочу ничего ломать в отзывчивости. т.е. я не хочу удалять лишние стили и ломать Outlook, или ломать Yahoo и т. д.
Ниже приведен пример. Есть главный стол с другим столом внутри. Я понял это. Тогда вся таблица только для пустой строки? Тогда у нас есть стол со многими ТР. Я тоже это понимаю. Тем не менее, есть p тег с определенным стилем, затем span внутри него с другим стилем. Это кажется излишним. Кроме того, он определяет базовый шрифт много-много раз.
Можно ли упростить это, установив семейство шрифтов, размер шрифта, цвет шрифта, все в родительском table? ИЛИ есть ли причина, по которой он определяется много раз на низшем уровне элемента? Я смотрю на это, и я просто хочу установить базовый шрифт в теле, первый div или таблицу master, p для настроек текста, затем span S, когда мне нужен другой размер, вес, цвет, т. д.
Я просто не знаю, является ли это частью волшебного соуса совместимости почтового клиента, и я не хочу его ломать. CSS, head и т. Д. Все взяты из MJML.io, и я знаю, что некоторые клиенты лишают голову, что означает, что стилизация там будет игнорироваться. Таким образом, я не включил это, только часть, которая имеет значение ниже:
<body style="background: #bedae6;">
<div style="background-color:#bedae6;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;background:#ffffff;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#ffffff;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:20px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<span style="display: block; font-size: 28px; font-weight: bold;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<strong>
<span style="font-size: 20px;">
<span style="color: rgb(81, 45, 11);">Hello {{NAME}},</span>
</span>
</strong>
</span>
</span>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;">
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">
<span style="font-size: 18px;">This is the body of my email.</span>
</span>
</p>
</div>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;" align="left">
<table cellpadding="0" cellspacing="0" style="cellspacing:0px;color:#000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;" width="100%" border="0">
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">PHP</td>
<td style="padding: 0 0 0 15px;">C, Shell Unix</td>
</tr>
<tr>
<td style="padding: 0 15px 0 0;">1995</td>
<td style="padding: 0 15px;">JavaScript</td>
<td style="padding: 0 0 0 15px;">Scheme, Self</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:25px 30px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="center">
<table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:separate;" align="center" border="0">
<tbody>
<tr>
<td style="border:none;border-radius:0px;color:#FFFFFF;cursor:auto;padding:10px 25px;" align="center" valign="top" bgcolor="#8bb420">
<a href="https://mjml.io" style="text-decoration:none;line-height:100%;background:#8bb420;color:#FFFFFF;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:16px;font-weight:normal;text-transform:none;margin:0px;" target="_blank">
<strong>Click here to go now !</strong>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" border="0">
<tbody>
<tr>
<td>
<div style="margin:0px auto;max-width:600px;">
<table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
<tbody>
<tr>
<td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:10px;padding-top:10px;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:600px;">
<![endif]-->
<div aria-labelledby="mj-column-per-100" class="mj-column-per-100 outlook-group-fix" style="vertical-align:middle;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:middle;" width="100%" border="0">
<tbody>
<tr>
<td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:25px;padding-left:25px;" align="center">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:11px;line-height:22px;text-align:center;">
<p style="font-size: 11px"><span></span>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</div>
</body>-
Я хочу очистить его, начиная с body и inner div, устанавливая шрифт, фон, отступы и т. Д. Один раз...
<body style="background: #bedae6; color:#000000; font-family:'Open Sans', Ubuntu, Arial, sans-serif; font-size:11px; line-height:22px">
<div>
// ....
</div>
</body>
Другой пример, он устанавливает размер шрифта равным 0, затем в дочернем элементе устанавливает реальный размер шрифта, дважды объявляет отступы... какого черта:
<tr>
<td style="font-size:0px;padding:10px 25px;padding-top:10px;padding-bottom:10px;padding-right:25px;padding-left:25px;" align="left">
<div style="cursor:auto;color:#000000;font-family:'Open Sans', Ubuntu, Arial, sans-serif;font-size:13px;line-height:22px;text-align:left;">
<p></p>
<p style="line-height:1.38;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">Thank You,</span>
</p>
<p></p>
<span style="font-size:14.666666666666666px;font-family:'Open Sans', Ubuntu, Arial, sans-serif;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre-wrap;">{{COMPANY_NAME}}</span>
<p></p>
</div>
</td>
</tr>
1 ответ
Я сделаю все возможное, чтобы покрыть все ваши проблемы!
Так что в основном некоторые клиенты не допускают CSS внутри некоторых элементов, таких как старый Outlook и некоторые варианты Gmail. Like Padding поддерживается только в элементах P & table для Outlook. Кроме того, некоторые клиенты очень плохо обрабатывают наследование CSS, поэтому вы должны убедиться, что у самого глубокого узла есть CSS, а не группировать его в родительский. А с размером шрифта 0 это трюк, чтобы избежать пробела между блоками
Вот почему у вас есть некоторые CSS, которые выглядят избыточными, они здесь для того, чтобы шаблон выглядел одинаково на всех поддерживаемых клиентах.
MJML имеет некоторые атрибуты MJ по умолчанию (которые вы можете переопределить с помощью mj-атрибутов внутри mj-head), которые преобразуются в атрибуты CSS. Как и в случае заполнения, как вы сказали, вы можете использовать как padding, так и padding-top / bottom / right / left, их можно использовать отдельно, но использование одного не отменит другого.
Если вы хотите очистить это, вы можете "сбросить" атрибуты по умолчанию с помощью mj-атрибутов.
Другое беспокойство у вас вызывает сложность сгенерированного HTML для пустой строки. У вас есть несколько способов справиться с этим с помощью MJML (пустой раздел с использованием padding, пустой раздел с использованием column & mj-spacer, иногда даже "необработанный" html с помощью mj-raw), это зависит от дизайна, над которым вы работаете.
Поддержание высокого уровня совместимости между устройством и клиентами требует некоторой жертвы с точки зрения удобочитаемости для выходного HTML. Однако мы делаем все возможное для очистки выходного HTML, потому что некоторые клиенты, такие как Gmail, имеют некоторые ограничения на размер электронной почты