Features processing HTML-letters
Hello, habrayuzer!
Recently it was possible to dig with the distribution of letters in HTML-format. There are many articles written on the topic of valid layout of mailings, however, this is not the point here. It is known that each mailer has its own peculiarities of displaying HTML-letters. I am interested in these features and differences in the display of letters on different mailers.
Three of my mailboxes in the mail.ru, yandex.ru and gmail.com services came under investigation. A script was written that sent the same email to them in html format. With it, I drove a few options and compared the results. Here's what happened:
The body of the letter displayed by the postal service begins with the body tag. It is understandable - all the letter is contained in it. However, the body tag itself may contain a style attribute. In each mailer, the body of the letter is represented by a div, but not everyone transfers the contents of the style to this div.
')
The style attribute is often analyzed by the mail machine and can be changed before being sent to the user. As it happens on the studied mailers:
In all articles on HTML layout, it is repeatedly mentioned that you can forget about negative values (for example, in the margin). The test result is quite expected:
The margin attribute in Mail.ru is only skipped because there are no preprocessing styles.
CSS 3 is currently in development, and some mailers consider certain attributes to be invalid. So, let's test some CSS3 rules on our three clients:
Full support for CSS3 and any other browser-dependent attributes due to very loyal filtering of the style tag.
The height attribute is not supported by all mailers.
UPD: In the comments, it turned out that javascript: *** and expression: *** tricks are blocked by the mail.ru security system.
Recently it was possible to dig with the distribution of letters in HTML-format. There are many articles written on the topic of valid layout of mailings, however, this is not the point here. It is known that each mailer has its own peculiarities of displaying HTML-letters. I am interested in these features and differences in the display of letters on different mailers.
Three of my mailboxes in the mail.ru, yandex.ru and gmail.com services came under investigation. A script was written that sent the same email to them in html format. With it, I drove a few options and compared the results. Here's what happened:
Body tag
The body of the letter displayed by the postal service begins with the body tag. It is understandable - all the letter is contained in it. However, the body tag itself may contain a style attribute. In each mailer, the body of the letter is represented by a div, but not everyone transfers the contents of the style to this div.
- Mail.ru - The body tag is replaced with <div id = 'style_ id _BODY'>, where id is the user ID transmitted in the GET line of the request. The style attribute is lost. In addition, any other attributes set for the body tag are lost.
- Yandex.ru - The body tag changes to <div class = 'b-message-body__content'>. Styles are not transferable, like any other attributes of the body tag.
- Gmail.com - The body tag is changed to a regular div, styles are transferred. In addition, the attributes set for the body fall into this div (meaning background attributes are meant).
')
Features of attribute transfer style
The style attribute is often analyzed by the mail machine and can be changed before being sent to the user. As it happens on the studied mailers:
- Mail.ru - The processing of the style attribute is based on the principle “everything is allowed, which is clearly not prohibited.” So far we have managed to find out that position: absolute will be banned
- Yandex.ru - Style attributes are pre-processed. Unfamiliar styles (and, respectively, errors) are not skipped. Clipping of styles occurs in such a way that all styles up to the first unknown fall into the letter displayed to the client. Thus, the construction width: 100px; some-new-style: new; background-color: #CCC; will be replaced by width: 100px;
- Gmail.com - The style attributes are also pre-processed, but in this case the requirements are stricter than Yandex.ru. If at least one invalid style is found in the attribute value, the entire attribute is ignored.
Negative values
In all articles on HTML layout, it is repeatedly mentioned that you can forget about negative values (for example, in the margin). The test result is quite expected:
- Mail.ru - margin-left: -100px; - works.
- Yandex.ru - margin-left: -100px; - does not work.
- Gmail.com - margin-left: -100px; -does not work.
The margin attribute in Mail.ru is only skipped because there are no preprocessing styles.
CSS3 support
CSS 3 is currently in development, and some mailers consider certain attributes to be invalid. So, let's test some CSS3 rules on our three clients:
Mail.ru
Full support for CSS3 and any other browser-dependent attributes due to very loyal filtering of the style tag.
Yandex.ru
- linear-gradient - yes
- box-shadow - no
- border-radius - yes
- text-shadow - no
- word-wrap - no
- resize - no
- several backgrounds - yes
- border-image yes
Gmail.com
- linear-gradient - no
- box-shadow - no
- border-radius - yes
- text-shadow - yes
- word-wrap - yes
- resize - no
- several backgrounds - yes
- border-image- no
CSS height
The height attribute is not supported by all mailers.
- Mail.ru - supported.
- Yandex.ru - supported.
- Gmail.com - not supported, replaced by min-height.
UPD: In the comments, it turned out that javascript: *** and expression: *** tricks are blocked by the mail.ru security system.
Source: https://habr.com/ru/post/146414/
All Articles