[X] Помощник

[fedornabilkin Topic Starter]

Здравствуйте. Многие знают, что верстка email значительно отличается. Необходимо верстать таблицами, стили прописывать только инлайн и т.д.
Я решил посмотреть письма от серьезных рассыльщиков и обнаружил следующий код.
Пожалуйста, кто знаком с этим, прокомментируйте как оно работает.
Больше всего интересуют конструкции в квадратных скобках.

Развернуть/Свернуть

<style type="text/css">
<!--
.ReadMsgBody {width: 100%;background-color: #efefef;}
.ExternalClass {width: 100%;background-color: #efefef;}
html {width: 100%;padding: 0px;margin: 0px;}
body {width: 100%-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin: 0px;padding: 0px;background-color: #efefef;transform: scale(1, 1);zoom: 1;}
.wrap {width: 100% !important;padding: 0px;margin: 0px;}
img {display: block;-ms-interpolation-mode: bicubic;margin: 0 !important;padding: 0 !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
table font {background-color: inherit;}
table {border-collapse: collapse;border-spacing: 0px;padding: 0px;empty-cells: hide;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}
table * {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}
tr {border-collapse: collapse;border-spacing: 0px;}
td {display: table-cell !important;border-collapse: collapse;border-spacing: 0px;}
td.column {display: table-cell !important;min-width: auto;max-width: auto;float: none !important;}
td.tdBlock {display: inline-block !important;}
body[data-getresponse] td[class="column"] {display: table-cell !important;float: none !important;min-width: auto;max-width: auto;}
table.wrapper {width: 600px !important;max-width: 600px;font-size: 16px;border-collapse: separate;}
div.WRAPPER {max-width: 600px !important; width: 600px;}
@media all and (max-width: 480px) {
div.wrap > div {width: 100%}body {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
table {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
table[class="column-full-width"] { width: 100% !important; }table td {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
div[class="WRAPPER"] {max-width: 100% !important;width: 100% !important;}
table td[class="column"] {display: block;max-width: 100% !important;width: auto !important;}
table[data-editable="rss"] table { padding: 5px 10px !important; }
table[class="wrapper"] {width: 100% !important;max-width: 100% !important;}
table[data-mobile-width="1"] {max-width: 100% !important;width: 100% !important;}
table[data-mobile-width="0"] {max-width: 100% !important;}
table[data-mobile-width="0"] td {padding-left: 10px !important;padding-right: 10px !important;}
table[data-editable="image"] img {width: 100%;max-width: 100% !important;height: auto !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
table[data-editable="image"][align="center"], table[data-editable="button"][align="center"] {margin-left: auto !important;margin-right: auto !important;}
table[data-editable="image"][align="right"], table[data-editable="button"][align="right"] {margin-left: auto !important;margin-right: 0px !important;}
table[data-mobile-width="1"] {width: 100% !important;}
table[data-mobile-width="1"] img {width: 100% !important;max-width: 100% !important;height: auto !important;}
body[data-getresponse] table td {display: block !important;width: 100% !important;height: auto !important;}
body[data-getresponse] td[class="column"] {display: block !important;max-width: 100% !important;}
body[data-getresponse] table td[data-disabled] {display: none !important;}
table[data-editable="text"] table[data-editable="button"] {float: none;}
table[data-mobile-width="1"] td {padding-left: 0 !important; padding-right: 0 !important;}
table[data-editable="text"] td {padding-left: 10px !important;padding-right: 10px !important;}
table[data-editable="button"][align="left"] td {margin-left: 10px !important;}
table[data-editable="button"][align="right"] td {margin-right: 10px !important;}
table[data-editable="text"] table[data-editable="image"] {max-width: 100% !important;margin: 0px;}
table[data-editable="text"] table[data-mobile-width] td {padding: 0 !important;padding-bottom: 10px !important;}
table[data-editable="socialmedia"] table {text-align: center !important;}
tr[data-columns="no"] { text-align: center; }
tr[data-columns="no"] > td {display: inline-block !important;width: auto !important;margin: auto;padding: 5px;}
body[data-getresponse] table[class="nowrap"] td {display: table-cell !important;width: auto !important;}
tfoot .wrapper table {float: none !important;margin: auto !important;width: 100% !important;}
tfoot .wrapper table td {text-align: center !important;}
tfoot .wrapper table td img {margin: auto !important;}
.pl_image {width: 100% !important;}
body[data-getresponse] tr[data-columns="no"] > td {display: inline-block !important;width: auto !important;margin: auto !important;padding: 5px;}}
.pl_image, .outline .editable .imagemask div {vertical-align: middle;text-align: center;font-family: Arial,Helvetica,sans-serif;color: #ffffff;font-size: 20px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;background: #dedede url(/images/common/templates/messages/elements/placeholders/image.png) no-repeat 50% 50%;width: 100%;height: 100%;overflow: hidden;}
--></style>
<!--[if gte mso 9]><style type="text/css">table#edi50n00 {width: 140px !important;} table#edi50n00 td {padding: 0cm 0cm 0cm 0cm !important;mso-table-tspace: 10px !important;mso-table-rspace: 0px !important;mso-table-bspace: 10px !important;mso-table-lspace: 10px !important;} </style><![endif]--></head>
<body data-getresponse="true" style="margin: 0; padding: 0;">
<div class="wrap"><style type="text/css"><!-- table[class="wrapper"] {width: 600px;max-width: 600px !important;font-size: 16px;}
td[class="column"] { min-width: 0 !important; } 
body[data-getresponse] td[class="column"] { float: none !important; }body[xx-iframe] td[class="column"] { display: table-cell !important; float: none !important; }--></style>
<table data-mobile="old" dir="ltr" data-width="600" width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 16px; background-color: rgb(239, 239, 239);">
	<tbody><tr>
		<td style="padding: 20px 0px; margin: 0px;" valign="top" align="center">

			<table class="wrapper" style="border: 10px solid transparent; border-radius: 7px; width: 600px;" width="600" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
				<tbody><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr data-columns="yes"><td style="padding: 0px; margin: 0px;" valign="top" width="308" align="left" class="column" axis="col"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="" valign="top" align="left"><table data-editable="image" data-mobile-width="1" align="center" cellpadding="0" cellspacing="0" width="99%"><tbody><tr><td style="margin: 0px; padding: 10px; display: inline-block;" valign="top" align="left" class="tdBlock"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CCG&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=4&amp;" target="_blank"><img src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8468.png?img1450704151822" data-src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8468.png|480|51|222|44|0|0|1.6842105263157894" data-origsrc="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8469.png" height="30" width="285" data-createnew="true" style="border: 0px none transparent; display: block;"></a></td></tr></tbody></table></td></tr></tbody></table></td><td style="padding: 0px; margin: 0px;" valign="top" width="272" align="left" class="column" axis="col"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><table data-editable="socialmedia" align="center" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top" align="left" style="padding: 10px; margin: 0px;"><table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody><tr data-columns="no"><td style="display: inline-block !important; width: auto !important; margin: auto; padding: 5px;"><a href="http://1cbitrix.getresponse360.pl/r/Et/hwFB/w/?source=email&amp;service=facebook&amp;" title="Facebook"><img src="https://app.getresponse.com/images/common/templates/messages/elements/icons/like_ru.png" alt="Like" style="display: block;" border="0"></a></td><td style="display: inline-block !important; width: auto !important; margin: auto; padding: 5px;"><a href="http://1cbitrix.getresponse360.pl/r/Et/hwFB/w/?source=email&amp;service=twitter&amp;" title="Twitter"><img src="https://app.getresponse.com/images/common/templates/messages/elements/icons/twitter_ru.png" alt="Twitter" style="display: block;" border="0"></a></td><td style="display: inline-block !important; width: auto !important; margin: auto; padding: 5px;"><a href="http://1cbitrix.getresponse360.pl/forward.html?x=a62e&amp;m=23&amp;s=l9T5&amp;u=9&amp;y=W&amp;" title="Forward"><img src="https://app.getresponse.com/images/common/templates/messages/elements/icons/forward.png" alt="Forward" style="display: block;" border="0"></a></td></tr></tbody></table></td></tr></tbody><tbody></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr>
				<tr>
					<td style="margin:0;padding:0;" valign="top" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr>
					<td style="margin:0;padding:0;" valign="top" align="left">

						<table data-editable="image" data-mobile-width="0" align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 579px;">
							<tbody><tr>
								<td style="margin: 0px; padding: 0px; display: inline-block;" valign="top" align="left" class="tdBlock"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" target="_blank"><img src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8470.jpg?img1450704151822" width="579" data-src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8470.jpg|579|142|589|134|0|0|1" data-origsrc="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8471.jpg" height="142" data-createnew="true" style="border: 0px none transparent; display: block;"></a></td>
							</tr>
						</tbody></table>                                   
					</td>
				</tr><tr><td><table data-editable="preheader" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" data-webinar="0"><tbody><tr><td align="center" valign="top" style="padding: 5px; font-family: Helvetica, Arial, sans-serif; color: rgb(38, 38, 38); border: 0px none transparent; font-style: italic; background-color: rgb(239, 239, 239);"><span style="font-style: italic;"><font size="13" style="font-size: 13px;">Вы получили это письмо, так как ваш сайт или интернет-магазин работает</font></span><div style=""><span style="font-style: italic;"><font size="13" style="font-size: 13px;">на&nbsp;«1С-Битрикс: Управление сайтом»</font></span></div></td></tr></tbody></table></td></tr><tr><td style="margin: 0px; padding: 0px;" valign="top" align="left"><table data-editable="text" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
							<tbody><tr>
								<td align="left" valign="top" style="padding: 10px 10px 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; color: rgb(38, 38, 38); border: 0px none transparent; background-image: none;"><div style="text-align: left;"><font size="14" style="font-size: 14px;">Добрый день! <br><br>Совсем скоро Новый год  и мы приготовили для вас подарки! С 1 декабря по 11 января действуют скидки 10-40% на продукты «1С-Битрикс» и другие специальные предложения! Сделайте подарок себе и своему бизнесу!</font></div></td>
							</tr>
						</tbody></table></td></tr><tr></tr></tbody></table></td>
				</tr><tr></tr>                               
			<tr><td style="padding: 10px 10px 0px;"><table data-editable="line" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top" align="center" style="padding: 10px 0px; margin: 0px;"><div style="height: 1px; line-height: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(222, 222, 222);"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" style="display:block;" height="1" width="1"></div></td></tr></tbody></table></td></tr><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" data-editable="text"><tbody><tr><td valign="top" align="left" style="padding: 10px 10px 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; color: rgb(38, 38, 38); line-height: 1.15;"><table border="0" cellpadding="0" cellspacing="0" align="right" data-editable="image" style="margin: 0px; padding: 0px;" data-mobile-width="0" id="edi50n00" width="150"><tbody><tr><td valign="top" align="left" style="margin: 0px; padding: 10px 0px 10px 10px; display: inline-block;" class="tdBlock"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" target="_blank"><img src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8472.png?img1450704151822" width="150" data-src="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8472.png|150|158|143|168|0|0|1" data-origsrc="http://multimedia.e.1c-bitrix.ru/1cbitrix/1/1/photos/8473.png" height="158" data-createnew="true" style="border: 0px none transparent; display: block;"></a></td></tr></tbody></table><span style="font-size: 14px; line-height: 1.15; background-color: inherit;"><ul><li><span style="line-height: 1.15; background-color: inherit;"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" target="_blank" title="" style="color: rgb(49, 154, 195);">10-20% скидки</a> при переходе на более высокую редакцию продукта — увеличьте прибыль от вашего сайта благодаря новым возможностям продукта</span></li></ul><ul><li><span style="line-height: 1.15; background-color: inherit;"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" target="_blank" title="" style="color: rgb(49, 154, 195);">20% скидки</a> на «1C-Битрикс: Мобильное приложение» — получите дополнительный источник продаж, оставайтесь конкурентоспособным</span></li></ul><ul><li><span style="line-height: 1.15; background-color: inherit;"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" target="_blank" title="" style="color: rgb(49, 154, 195);">40% скидки</a> на веб-приложения в «1С-Битрикс: Маркетплейс» — прокачайте ваш сайт или интернет-магазин</span></li></ul></span></td></tr></tbody></table></td></tr><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" data-editable="text"><tbody><tr><td align="left" valign="top" style="padding: 10px; font-family: Arial, Helvetica, sans-serif; color: rgb(38, 38, 38);"><font size="14" style="font-size: 14px;"><span style="font-weight: bold;">Рэто еще не все:</span><br><ul><li><span style="background-color: inherit;">Скидка 20% на уникальную технологию «Композитный сайт»;</span></li></ul><ul><li><span style="background-color: inherit;">Скидки от 12% до 24% при покупке сервиса для совместной работы <a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CT9&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=0&amp;" target="_blank" title="" style="color: rgb(49, 154, 195);">«Битрикс24»</a>.</span></li></ul></font></td></tr></tbody></table></td></tr><tr><td style="padding: 0px;"><div data-box="button" style="width: 100%; margin-top: 0px; margin-bottom: 0px; text-align: center;"><table border="0" cellpadding="0" cellspacing="0" align="center" data-editable="button" style="margin: 0px auto;"><tbody><tr><td valign="top" align="center" class="tdBlock" style="display: inline-block; padding: 13px 25px; margin: 0px; border-radius: 7px; background-color: rgb(107, 187, 38);"><a href="http://1cbitrix.getresponse360.pl/click.html?x=a62e&amp;lc=CTM&amp;mc=C&amp;s=l9T5&amp;u=9&amp;y=7&amp;" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: rgb(255, 255, 255); font-size: 18px; text-decoration: none; font-weight: bold;" target="_blank">Подробнее об акции ›</a></td></tr></tbody></table></div></td></tr><tr><td style="padding: 10px;"><table data-editable="line" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top" align="center" style="padding: 10px 0px; margin: 0px;"><div style="height: 1px; line-height: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(222, 222, 222);"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" style="display:block;" height="1" width="1"></div></td></tr></tbody></table></td></tr><tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" data-editable="text"><tbody><tr><td align="left" valign="top" style="padding: 10px; font-family: Arial, Helvetica, sans-serif; color: rgb(38, 38, 38); background-color: rgb(239, 239, 239);"><font size="14" style="font-size: 14px;">Акция действует <span style="font-weight: bold;">с 1 декабря 2015 по 11 января 2016 года</span> включительно на территории России и стран СНГ. Скидка применяется независимо от того, как вы приобретаете продукт: напрямую с сайтов «1С-Битрикс» или через партнера. <br><br><span style="font-style: italic;">* Cкидки в «Маркетплейсе» действуют только в России и Украине; через дистрибьюторов веб-приложения не продаются.</span></font></td></tr></tbody></table></td></tr><tr><td style="padding: 10px;"><table data-editable="line" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top" align="center" style="padding: 10px 0px; margin: 0px;"><div style="height: 1px; line-height: 1px; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(222, 222, 222);"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" style="display:block;" height="1" width="1"></div></td></tr></tbody></table></td></tr><tr><td><table data-editable="text" width="100%" align="center" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top" align="left" style="padding: 0px 10px 10px; font-family: Arial, Helvetica, sans-serif; color: rgb(38, 38, 38);"><font style="font-style: italic; color: rgb(128, 128, 128); font-size: 12px;" size="12">Компания «1С-Битрикс»<br>Телефон: +7(495)229-14-41<br>E-mail: <a href="mailto:info@1c-bitrix.ru" target="_blank" title="" style="color: rgb(49, 154, 195);">info@1c-bitrix.ru</a></font><div style=""><font size="12" style="font-size: 12px;"><br></font></div><div style=""><font style="font-style: italic; font-size: 12px;" size="12"><a href="http://getresponseservices.ru/1cb/uns.php?e=r.smirnov@leaderteam.ru&amp;sub=B6pi&amp;link=http://1cbitrix.getresponse360.pl/unsubscribe.html?x=a62e&amp;m=23&amp;s=l9T5&amp;u=9&amp;y=W&amp;" target="_blank" title="" style="color: rgb(49, 154, 195);">Отказаться от рассылки компании&nbsp;«1С-Битрикс»</a></font></div></td></tr></tbody></table></td></tr></tbody></table>
		</td>
	</tr>
</tbody></table> 

[Russ33]

Этот код полностью состоит из css стилей, но что-то нет html кода, а без него вряд ли что получится, то есть этот код не полный код email-рассылки. ^_^

 

[fedornabilkin Topic Starter]

но что-то нет html кода

В самом низу код html
Табличная верстка. 

[TimurR]

По идее в CSS в квадратных скобках указываются атрибуты. Т.е. например, если на странице есть куча тегов <a> и к каждому из них нет смысла подписывать CSS, но каждый имеет уникальный атрибут, например <a hfre="google.ru"></a>, то можно задавать стили в CSS обращаясь к элементу a с нужным атрибутом. Код CSS в данном случает такой 

a[href] {
  font-size: 1em;
}

Про всевозможные изощрения можно почитать тут: http://htmlbook.ru/samcss/selektory-atributov

[fedornabilkin Topic Starter]

Думал это только в jQuery используется, когда надо обратиться к элементу.

[ixman]

fedornabilkin, на сколько мне известно, не всё то, что используется в jQuery, работоспособно в CSS. Но большая часть точно

[fedornabilkin Topic Starter]

Если учесть, что сейчас очень актуален CSS3+HTML5, то возможностей стало намного больше.
Во многих случаях можно отказаться от скриптов.

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.