जीमेल के लिए स्टाइलिंग HTML ईमेल

99

मैं एक HTML ईमेल उत्पन्न कर रहा हूं जो एक आंतरिक स्टाइलशीट का उपयोग करता है, अर्थात

<!doctype html>
<html>
<head>
  <style type="text/css">
    h2.foo {color: red}    
  </style>
</head>
<body>
 <h2 class="foo">Email content here</foo>
</body>
</html>

जब जीमेल में देखा जाता है तो लगता है कि आंतरिक स्टाइलशीट की सभी शैलियों को अनदेखा किया गया है। ऐसा लगता है कि जीमेल इनलाइन नियमों के अलावा अन्य सभी शैलियों को अनदेखा करता है, जैसे

 <h2 style="color: red">Email content here</foo>

क्या यह जीमेल के साथ देखे जाने पर HTML ईमेल को स्टाइल करने का एकमात्र विकल्प है?

— डोनल
स्रोत

14

हां यह केवल एक ही है क्योंकि कई वेब आधारित ई-मेल क्लाइंट आंतरिक स्टाइलशीट को नहीं पहचानते हैं। वास्तव में इनलाइन स्टाइलिंग html न्यूज़लेटर्स को डिज़ाइन करने का अनुशंसित तरीका है।

— माइक

जहाँ तक मुझे पता है, ईमेल पाठकों को html 3.2 और सीएसएस 1.1 का समर्थन करने की उम्मीद की जा सकती है।

आपने अपना ईमेल कैसे बनाया? मेरा मतलब है कि con आप आशय बनाने का कोड जोड़ते हैं?

— रफमूले

7

यह आम तौर पर एक प्रारंभिक <html>टैग का उपयोग करने के लिए अच्छा अभ्यास है ;)

— ज़ाज़

1

जीमेल बेकार है। iOS ऐप और वेब आधारित ऐप भी!

— एड्रियन फ्लोरस्क्यू

19

यहाँ उत्तर पुराने हैं, आज 30 सितंबर 2016 तक। जीमेल वर्तमान में टैग के लिए समर्थन के साथ-साथ मीडिया प्रश्नों का भी समर्थन कर रहा है। यदि जीमेल आपकी एकमात्र चिंता है, तो आप आधुनिक डेवलपर जैसी कक्षाओं का उपयोग करने के लिए सुरक्षित हैं!stylehead

संदर्भ के लिए, आप आधिकारिक जीमेल सीएसएस डॉक्स की जांच कर सकते हैं ।

साइड नोट के रूप में, जीमेल एकमात्र प्रमुख ग्राहक था जो समर्थन नहीं करता था style( संदर्भ , जब तक वे वैसे भी अपडेट नहीं करते)। इसका मतलब है कि आप लगभग सुरक्षित रूप से स्टाइल इनलाइन डालना बंद कर सकते हैं । अधिक अस्पष्ट ग्राहकों में से कुछ को अभी भी उनकी आवश्यकता हो सकती है।

— मैथ्यू जॉनसन
स्रोत

1

ऐसा लगता है कि यह अभी भी काम नहीं करता है। हमने इसे लिटमस में आज़माया, लेकिन यह काम नहीं करता है। क्या कोई खास वजह है?

— एरियन

@ArianHosseinzadeh क्या काम नहीं करता है? मामले पर उनके प्रलेखन का संदर्भ जोड़ा।

— मैथ्यू जॉनसन

हमने लिटमस में इसकी कोशिश की, और यह गैर-इनलाइन स्टाइलिंग को नजरअंदाज करता है। क्या आपने इसे घोषित करने के बाद जीमेल के लिए <शैली> की कोशिश की है? काम किया ?

— एरियन

1

@ArianHosseinzadeh मैंने उनके डॉक्स में उनके उदाहरण से कॉपी-एन-पेस्ट किया और पुटमेल के माध्यम से इसे चलाया । शैलियाँ जीमेल में दिखाई दे रही हैं। मैंने Chrome ब्राउज़र में Android gmail ऐप और gmail को सत्यापित किया है। मेरा अनुमान है कि लिटमस पूर्वावलोकन में परिवर्तन को प्रतिबिंबित करने के लिए अद्यतन नहीं किया गया है।

— मैथ्यू जॉनसन 18

1

मैं सोच रहा था कि मेरी शैली क्यों काम नहीं कर रही थी, और मुझे एहसास हुआ कि मैंने उन्हें bodyटैग के बजाय टैग के भीतर रखा था head।

— पाल्स्विम

67

हर चीज के लिए इनलाइन स्टाइल का इस्तेमाल करें। यह साइट आपकी कक्षाओं को इनलाइन शैलियों में बदल देगी: http://premailer.dialect.ca/

— substate
स्रोत

2

यह साइट कमाल की है। चेतावनियाँ दिखाता है और आपको अपने HTML को पुन: प्रस्तुत करने के साथ-साथ एक सादा पाठ आउटपुट भी देता है।

— jamesbar2

1

यह Premailer रूबी, स्रोत में है: github.com/premailer/premailer । पायथन में एक और है: premailer.io स्रोत: github.com/peterbe/premailer , दोनों खुले स्रोत हैं।

— मैक्सिमे आर।

1

यह उत्तर अब सटीक नहीं है। जीमेल शैलियों और वर्गों का समर्थन करता है और इस विषय पर आधिकारिक दस्तावेज़ हैं - नीचे मैथ्यू जॉनसन का उत्तर देखें।

— मीकेमेकाना

12

जीमेल ने हेड एरिया में स्टाइल टैग के लिए बेसिक सपोर्ट शुरू किया। अभी तक कुछ भी आधिकारिक नहीं मिला है लेकिन आप आसानी से इसे स्वयं आजमा सकते हैं।
यह वर्ग और आईडी चयनकर्ताओं को नजरअंदाज करता है, लेकिन मूल तत्व चयनकर्ता काम करते हैं।

<!doctype html>
<html>
  <head>
    <style type="text/css">
      p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}  
    </style>
  </head>
  <body>
    <p>Email content here</p>
  </body>
</html>

यह मेल बॉडी वाले डिव तक सीमित अपने हेड एरिया में स्टाइल टैग बनाएगा

<style>div.m14623dcb877eef15 p{font-family:Tahoma,sans-serif;font-size:12px;margin:0}</style>

— fuchs777
स्रोत

यह अभी भी मीडिया के सवालों का समर्थन नहीं करता है, जो थोड़ा शर्म की बात है। कक्षाएं और आईडी भी उपयोगी हैं :)

— Eoin

2

अब वे मीडिया क्वेरी भी करते हैं और सीएसएस स्टाइलिंग के लिए पूरा समर्थन करते हैं। stackoverflow.com/questions/39759764/…

— क्राम्ग्नगुंब सिप

7

मैं उन सभी से सहमत हूं जो कक्षाओं और इनलाइन शैलियों का समर्थन करते हैं। अब तक आप यह जान गए होंगे, लेकिन अगर आपकी स्टाइल शीट में एक भी गलती है, तो जीमेल इसकी अवहेलना करेगा।

आप सोच सकते हैं कि आपका CSS सही है, क्योंकि आपने ऐसा अक्सर किया है, तो मेरे CSS में गलतियाँ क्यों होंगी? इसे सीएसएस Validator (उदाहरण के लिए http://www.css-validator.org/ ) के माध्यम से चलाएं और देखें कि क्या होता है। मैंने ऐसा किया है कि कुछ जीमेल डिस्प्ले मुद्दों का सामना करने के बाद, और मेरे आश्चर्य के लिए, कई Microsoft आउटलुक विशिष्ट शैली की घोषणाओं को गलतियों के रूप में दिखाया गया।

जो मुझे समझ में आया, इसलिए मैंने उन्हें स्टाइल शीट से हटा दिया और उन्हें एक only for Microsoftकोड ब्लॉक में डाल दिया , जैसे:

<!--[if mso]>
<style type="text/css">
body, table, td, .mobile-text {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml>
<![endif]-->

यह सिर्फ एक सरल उदाहरण है, लेकिन, कौन जानता है, यह कुछ समय के लिए काम आ सकता है।

— शॉन स्पेंसर
स्रोत

धन्यवाद, अमान्य CSS के बारे में भाग ने मुझे बहुत समय बचाया। यदि आप अभी भी आसपास हैं तो कृपया मुझे बताएं।

— शैडो विजार्ड इयर फॉर यू

1

अरे @ शादो छिपकली। मैं थोड़ी देर के लिए चला गया था, लेकिन वापस आ गया हूं। खुशी है कि इसने आपको कुछ समय बचाया।

— शॉन स्पेंसर

चीयर्स, बस यह सुनिश्चित करना चाहता था कि इनाम व्यर्थ नहीं जाएगा। :-)

— शैडो विजार्ड ईयर फ़ॉर यू

2

जैसा कि दूसरों ने कहा है, कुछ ईमेल प्रोग्राम सीएसएस शैलियों को नहीं पढ़ेंगे। यदि आपके पास पहले से ही एक वेब ईमेल लिखा है, तो आप अपनी सभी शैलियों के लिए इनलाइन के ज़र्ब से निम्नलिखित टूल का उपयोग कर सकते हैं:

http://zurb.com/ink/inliner.php

यह बहुत आसान काम में आता है, जैसे कि मेलचैंप, अभियान मॉनिटर आदि से ऊपर बताए गए टेम्प्लेट का उपयोग करते हुए, जैसा कि उन्होंने पाया है, कुछ ईमेल कार्यक्रमों में काम नहीं करेगा। यह टूल मेल प्रोग्राम्स के लिए आपके स्टाइल सेक्शन को छोड़ देता है जो इसे पढ़ेगा और सभी शैलियों को इनलाइन में उस प्रारूप में अधिक सार्वभौमिक पठनीयता प्राप्त करने के लिए डालता है जो आप चाहते थे।

— चाड डुप्लस
स्रोत

इनलाइनर लिंक के लिए धन्यवाद।

— शॉन स्पेन्सर

2

ध्यान दें कि ईमेल भेजने के लिए सेवाएं और उपकरण आपके सीएसएस को आपके लिए इनलाइन करने में सक्षम हो सकते हैं, जिससे सीएसएस <style>जीमेल में काम कर सकते हैं।

उदाहरण के लिए, यदि आप MailChimp के साथ ईमेल भेज रहे हैं, तो <style>टैग से आपका CSS डिफ़ॉल्ट रूप से स्वचालित रूप से इनलेट हो जाएगा। मैनड्रिल के साथ, आप सेटिंग्स टैब के "सेडिंग डिफॉल्ट्स" अनुभाग में "इनलाइन सीएसएस स्टाइल्स इन HTML ईमेल" में "इनलाइन सीएसएस स्टाइल्स को चेक करके प्रदर्शन के कारणों के लिए डिफ़ॉल्ट रूप से अक्षम हो सकते हैं" इस कार्यक्षमता को सक्षम कर सकते हैं :

छवि दिखाती है कि मैंड्रिल में यह कैसे करना है

— मार्क अमेरी
स्रोत

0

Mailjet में टेम्पलेट डिज़ाइन करते समय भी मुझे यही समस्या थी। समस्या का समाधान <style>टैग के अंदर सीएसएस कोड को छोटा किया गया था ।

— वोजतच रेमी
स्रोत