Home > Developer > Web Develop
CSS cannot be used in HTML, JS. You send a <div> piece just fine, without having to write the entire HTML page, because even if it is written, the mail client will delete the contents of the body (including the <body> tag), leaving only the inside of the <body> tag.
Original: http://www.jb51.net/web/23842.html
Reference: https://segmentfault.com/q/1010000000115371
http://groundwire.org/labs/email-publishing/using-css-and-html-in-email-newsletters/
Https://litmus.com/blog/html-email-coding-101-infographic/email-coding-101
Because HTML mail is not independent of the host on this Site page, is Jirenlixia. So writing an HTML message is a lot different from writing an HTML page. Because, each of the mainstream e-mail to the Internet users will be more or less the HTML messages they receive in the background to filter. There is no doubt that the JS code is strictly filtered out, including all the event listening properties, such as OnClick, onmouseover, which is based on message security considerations. In addition, CSS code is partially filtered. I want to talk about how to write not be filtered by the major mainstream mailbox, can display the normal HTML messages.
First, let's take a look at how the mailbox is displaying HTML messages. I did not do the mail system, and the main mailbox filter algorithm is not so easy to let outsiders know. Therefore, we can only through the front-end display, to speculate on what is accepted by the mailbox, and which will be filtered out. Through the analysis of Gmail, Hotmail, 163, Sohu, Sina several mailboxes, I divided the mailbox into two categories:
The first category includes Gmail, Hotmail, Sohu, and email content that is laid out in a div in the entire mailbox page.
The second category, including 163, Sina, this type of mailbox, mail content is laid out in a separate iframe.
Familiar with the HTML friends know that the IFRAME content as a separate document, and the parent page elements and CSS is irrelevant, almost as a separate page to treat. And if the message content is in a div, then the message content is a part of the entire Mailbox page. Obviously, the use of an IFRAME as an expression of the mailbox, the content of the message will be much more tolerant, because it gives you a sufficient independence of the performance space. And the div is not so polite. Imagine, if you write in your mail such a sentence of CSS, is not the entire Mailbox Display page on the font has become 20px and therefore disorderly set:
<style type= "Text/css" >
Body {font-size:20px}
</style>
We need to write a unified email template compatible with each mailbox, then we must avoid this kind of external CSS notation, and similar to the float, position and other non-normal content stream style will be filtered, if you write, it is likely to affect the performance of external mailboxes.
Here are some of the principles that I write:
1, one of the global rules, do not write <style> tags, do not write class, all CSS with the style attribute, what element needs what style to write inline CSS with style.
2, the global rules of the second, less use of pictures, the mailbox will not filter your IMG tags, but the system will often default does not load the pictures of unfamiliar letters, if a lot of pictures of the mail, in the case of the film is not loaded, ugly or even see the content, impatient users directly deleted. Always add alt to the picture.
3, do not write in the style float, position these style, because it will be filtered. So how do you implement left-right layouts or more complex layouts? Use table.
4, style content inside background can set color, but IMG will be filtered, that is, you can not use CSS to set the background image. But there is a very interesting element attribute, also called background, which can define a picture path, this is a good alternative, although this limited functionality, such as the inability to locate the background image, there is always better than No. For example, to add a background to a cell, you must write this:
<TD background= "Http://image1.koubei.com/images/common/logo_koubei.gif" ></td>
5, the DIV mode mailbox does not support the Flash,iframe mode to be verified.
Finally, Sohu's mailbox is very strange, will add a space after each text segment, resulting in the original normal typesetting line not fit and line, so that some layout confusion. So, if you want to be compatible with Sohu mailbox, you have to be very careful when you meet some compact layout, minimize the number of text segments, sufficient the width.
Send HTML content to email (go)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
