जीमेल में एचटीएमएल ईमेल - सीएसएस स्टाइल एट्रिब्यूट

Question

मैं एक HTML ईमेल पर काम कर रहा हूं और मैं अपने CSS inliner tool के साथ संयोजन में MailChimp's Responsive Email Templates का उपयोग कर रहा हूं। अधिकांश भाग के लिए, ईमेल ईमेल के असंख्य ईमेल में बहुत अच्छा लग रहा है, लेकिन जीमेल की चीजों में बहुत गलत तरीके से गलत तरीके से प्रस्तुत किया गया है।

यदि मैं उत्तर तीर के बगल में ड्रॉप डाउन मेनू से जीमेल के "मूल दिखाएँ" विकल्प का उपयोग करता हूं, तो मूल HTML ईमेल क्लाइंट में वास्तव में प्रदर्शित होने से अलग होता है। मैं डेवलपर टूल के साथ तत्व का निरीक्षण करके इसकी पुष्टि कर सकता हूं। यह डेस्कटॉप और मोबाइल पर होता है; ईमेल क्लाइंट तत्वों से इनलाइन शैली विशेषताओं को हटा रहा है।

ऐसा लगता है कि शैली विशेषता को हटाने के मानदंडों में से एक यह है कि तत्व में एक वर्ग भी शामिल है। क्या कोई इसकी पुष्टि कर सकता है? साथ ही, यह किसी भी तालिका टैग से सभी शैली विशेषताओं को हटाने के लिए प्रतीत होता है। क्या कोई भी इसकी पुष्टि कर सकता है?

इसके लिए क्या कामकाज हैं?

जीमेल और याहू में स्रोत के साथ ईमेल के स्क्रीनशॉट नीचे शामिल हैं। स्रोत के साथ जीमेल में ईमेल के

---

स्क्रीनशॉट Chrome डेवलपर टूल के माध्यम से प्रदर्शित स्रोत के साथ याहू में Chrome डेवलपर टूल के माध्यम से प्रदर्शित ईमेल के

---

स्क्रीनशॉट

Answer 1

कोई भी जो नियमित रूप से मेरे काम पर विपणन अभियानों के लिए ईमेल कोड करता है, मुझे आपका दर्द महसूस होता है। कई अन्य ईमेल क्लाइंट्स के साथ जीमेल, कोड के लिए थोड़ा सा मजेदार हो सकता है। एक के लिए, यह किसी भी सीएसएस को बाहर निकाला जाता है जो शरीर के बाहर है। इसलिए मीडिया प्रश्नों और दस्तावेज़ स्तर शैलियों जैसी चीज़ों को डालना काम नहीं करता है। सलाह का सबसे अच्छा टुकड़ा मैं आपको दे सकता हूं आपके इनलाइन सीएसएस को कोड कोड और किसी भी फैंसी से बचने की कोशिश करें। वास्तव में, यदि आप अपनी स्टाइल करने के लिए एक HTML विशेषता का उपयोग कर सकते हैं, तो किसी भी सीएसएस के स्थान पर इसका उपयोग करें। एक उदाहरण पृष्ठभूमि रंग के बजाय bgcolor होगा।

यहां मिली आपकी विशिष्ट समस्या से संबंधित article है। शुभकामनाएँ।

Answer 2

जीमेल के लिए कई काम आसपास हैं। जब आपके स्टाइल की बात आती है तो जीमेल काफी जोकर होता है, क्योंकि यह आपके ई-मेल से पूरी तरह से पसंद नहीं करता है।

जीमेल छवियों के बीच सफेद स्थान, या फैला है इसके बारे में आकार कंटेनर टीडी जोड़ता है:: आप शैली = निर्दिष्ट करके इस सही कर सकते हैं

यहाँ कुछ थोड़ा सुझाव दिए गए हैं: आपकी छवियों पर "प्रदर्शन ब्लॉक" (सुनिश्चित करें कि आपका टीडी की आपकी छवि के समान चौड़ाई और/या ऊंचाई है)।

जीमेल ब्लैक लिंक ब्लैक लिंक के रूप में प्रस्तुत करता है: हाँ, यह बदसूरत है। # 000000 के बजाय # 000001 का उपयोग करें।

जीमेल फोन नंबर क्लिक करने योग्य बनाता है: यह आपके ग्राहक के आधार पर एक अच्छी बात हो सकती है या नहीं, लेकिन इसके आसपास काम करने का एक तरीका फोन नंबर के चारों ओर शैलियों के साथ एक खाली एंकर टैग शामिल करना है।

पूर्व: <a style="color:#000001; text-decoration:none;>555 555-5555</a>।यह आपको अपने कोड से शर्मिंदा महसूस करेगा, लेकिन यह एक प्रभावी छोटी हैक है।

Answer 3

सीएसएस चयनकर्ताओं का उपयोग करना एक और कामकाज है जिसे मैं उपयोग करने में सक्षम था। मेरे उदाहरण में मैं एक HTML तालिका प्रारूपित करने की कोशिश कर रहा हूं। मैंने पाया कि जीमेल ने मेरे सीएसएस को बेकार करने वाली सभी आईडी और क्लास विशेषताओं को अलग कर दिया है।

कुछ जांच के बाद मैंने देखा कि जीमेल ने मेरी शीर्षक विशेषता को नहीं हटाया है। तो मैंने एक शीर्षक चयनकर्ता का उपयोग कर एक सीएसएस नियम बनाया। यह ठीक काम करने के लिए प्रतीत होता है:

[title~=myTitle] {background: black; color: white;} 

मुझे नहीं लगता कि यह सबसे अच्छा अभ्यास है, लेकिन मैंने सोचा कि मैं इसका उल्लेख करूंगा।

Answer 4

बस सोचा कि मैं इसे मिश्रण में जोड़ दूंगा। मुझे इस समस्या के साथ-साथ और कच्चे स्रोत को देखते हुए मुझे एहसास हुआ कि 8-बिट एन्कोडिंग 1000 वर्ण सीमा के कारण विषम स्थानों में विभाजित लाइनों को विभाजित कर रही थी, इसलिए मैं इस तरह की सामग्री समाप्त कर रहा था:

<td style="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px">734 340 9795</td></tr><tr> <td sty 
le="border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; padding: 7px 14px"> 

समाधान बेस 64 को सामग्री एन्कोड करना है और खंड को विभाजित करना या जो भी टूल्स आपको पूरा करना है, उसका समाधान करना है।

PHP में मैंने $html = chunk_split(base64_encode($html)) किया और फिर Content-Transfer-Encoding: base64 सेट किया। अब जीमेल मुझे प्यार करता है।

Answer 5

मैं अभी जाँच की: जीमेल बाहर स्ट्रिप्स अपने इनलाइन शैली विशेषता अगर आप ;, , और : वर्ण

इस ठीक काम करता है के बीच रिक्त स्थान न रखें:

<span style="color: #8d8c87; display: block; font-family: Arial, sans-serif; font-size: 12px; line-height: 120%; text-align:center;">text</span> 

लेकिन एक ही नियम यदि आप रिक्त स्थान का उपयोग नहीं करते हैं तो बाहर निकाल दिया जाएगा; अगर आप इस बारे में:

<span>text</span> 

संपादित:

<span class="small-text" style="color:#8d8c87;display:block;font-family:'Titillium Web',Arial,sans-serif;font-size:12px;line-height:120%;text-align:center">text</span> 

आप जीमेल क्लाइंट पर इस उत्पादन मिल जाएगा

इस व्यवहार के अलावा, मैंने देखा है कि जीमेल को निकाल देते जाता है इनलाइन शैली यदि आप font-family को नेस्टेड <table> या <td> के अंदर घोषित करते हैं, तो मुझे अभी भी यकीन नहीं है कि इसके प्रीप्रोसेसर का सामान्य नियम क्या है, मैंने Google पर जांच की लेकिन मैं नहीं कर सकता जीमेल के लिए एचटीएमएल मेल संरचना के बारे में कोई आधिकारिक दस्तावेज।