Gmail এর জন্য স্টাইলিং এইচটিএমএল ইমেল


99

আমি একটি এইচটিএমএল ইমেল তৈরি করছি যা অভ্যন্তরীণ স্টাইলশিট ব্যবহার করে, যেমন

<!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>

জিমেইলের সাথে দেখা হলে এটি কি এইচএমএল ইমেলগুলি স্টাইল করার একমাত্র বিকল্প?


14
হ্যাঁ এটি কেবল একমাত্র যেহেতু অনেক ওয়েব ভিত্তিক ইমেল ক্লায়েন্টগুলি অভ্যন্তরীণ স্টাইলশিটগুলি স্বীকৃতি দেয় না। প্রকৃতপক্ষে ইনলাইন স্টাইলিং হল এইচটিএমএল নিউজলেটারগুলি ডিজাইনের প্রস্তাবিত উপায় way
মাইক

যতদূর আমি জানি, ইমেল পাঠকরা এইচটিএমএল 3.2 এবং সিএসএস 1.1 সমর্থন করবে বলে আশা করা যায়।

আপনি কীভাবে আপনার ইমেল তৈরি করেছেন? মানে আপনি কনট তৈরি করার কোড যুক্ত করেছেন?
রাফম্লে

7
খোলার <html>ট্যাগটি ব্যবহার করা সাধারণত ভাল অনুশীলন ;)
জাজ

4
জিমেইলে চুষছে। আইওএস অ্যাপ এবং ওয়েব ভিত্তিক অ্যাপ!
অ্যাড্রিয়ান ফ্লোরস্কু

উত্তর:


19

এখানে উত্তরগুলি গত 30 সেপ্টেম্বর, ২০১ 2016 তারিখে পুরানো হয়ে গেছে Gmail জিমেইল বর্তমানে ট্যাগটিতে পাশাপাশি মিডিয়া অনুসন্ধানগুলির জন্য সমর্থন প্রবর্তন করছে । Gmail যদি আপনার একমাত্র উদ্বেগ, আপনি আধুনিক বিকাশকারী এর মতো ক্লাস ব্যবহার করা নিরাপদ!stylehead

রেফারেন্সের জন্য, আপনি অফিসিয়াল জিমেইল সিএসএস ডক্স পরীক্ষা করতে পারেন ।

পার্শ্ব নোট হিসাবে, জিমেইল একমাত্র প্রধান ক্লায়েন্ট যা সমর্থন করে না style( রেফারেন্স , তারা যেভাবে আপডেট না করা পর্যন্ত)। এর অর্থ আপনি প্রায় নিরাপদে শৈলীর ইনলাইন স্থাপন বন্ধ করতে পারেন । আরও কিছু অস্পষ্ট ক্লায়েন্টের এখনও তাদের প্রয়োজন হতে পারে।


4
দেখে মনে হচ্ছে এটি এখনও কাজ করে না। আমরা এটি লিটমাসে চেষ্টা করেছিলাম, কিন্তু এটি কার্যকর হয় না। কোন বিশেষ কারণ আছে?
অ্যারিয়ান

@ আরিয়ানহসিনজাদেহ কী কাজ করে না? বিষয়টি সম্পর্কে তাদের ডকুমেন্টেশনের একটি রেফারেন্স যুক্ত করেছেন।
ম্যাথু জনসন

আমরা এটি লিটমাসে চেষ্টা করেছি এবং এটি অন-ইনলাইন স্টাইলিংগুলিকে উপেক্ষা করে। তারা জিমেইলটি ঘোষণার পরে আপনি <স্টাইল> চেষ্টা করেছেন? এটা কি কাজ করেছিল ?
অ্যারিয়ান

4
@ আরিয়ান হোসেইনজাদেহ আমি তাদের দস্তাবেজে তাদের উদাহরণ থেকে একটি অনুলিপি-এন-পেস্ট করেছি এবং এটি পুটসমেইলের মাধ্যমে চালিয়েছি । স্টাইলগুলি জিমেইলে প্রদর্শিত হচ্ছে। আমি একটি ক্রোম ব্রাউজারে অ্যান্ড্রয়েড জিমেইল অ্যাপ এবং জিমেইল যাচাই করেছি। আমার ধারণা লিটমাস পূর্বরূপগুলি পরিবর্তনটি প্রতিবিম্বিত করতে আপডেট করা হয়নি।
ম্যাথু জনসন

4
আমি ভাবছিলাম কেন আমার স্টাইলগুলি কাজ করছে না এবং বুঝতে পেরেছিলাম যে আমি সেগুলি bodyট্যাগের পরিবর্তে ট্যাগের মধ্যে রেখেছি head
পালসুইম

67

প্রতিটি কিছুর জন্য ইনলাইন স্টাইল ব্যবহার করুন। এই সাইটটি আপনার ক্লাসগুলিকে ইনলাইন শৈলীতে রূপান্তর করবে: http://premailer.dialect.ca/


4
এই সাইটটি দুর্দান্ত। সতর্কতা দেখায় এবং আপনাকে এইচটিএমএল রেকর্ডিংয়ের পাশাপাশি একটি সাধারণ পাঠ্য আউটপুট দেয়।
jamesbar2

4
এই প্রিমেলারটি রুবিতে রয়েছে, উত্স: github.com/premailer/premailer । পাইথনে আরও একটি রয়েছে: premailer.io উত্স: github.com/peterbe/premailer , উভয়ই ওপেন সোর্স।
ম্যাক্সিমাম আর

4
এই উত্তর আর সঠিক নয়। gmail স্টাইল এবং ক্লাস সমর্থন করে এবং বিষয়টিতে অফিসিয়াল ডক্স রয়েছে - নীচে ম্যাথু জনসনের উত্তর দেখুন।
মাইকমেকানা

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>

এটি এখনও মিডিয়া অনুসন্ধানগুলি সমর্থন করে না যদিও এটি লজ্জাজনক কিছু। ক্লাস এবং
এয়ন

4
তারা এখন মিডিয়া প্রশ্নগুলিও করে এবং CSS স্টাইলিংয়ের জন্য পূর্ণ সমর্থন। stackoverflow.com/questions/39759764/...
crowmagnumb

7

আমি ক্লাস এবং ইনলাইন শৈলী সমর্থন করে এমন প্রত্যেকের সাথে একমত। আপনি এখনই এটি শিখে থাকতে পারেন, তবে আপনার স্টাইল শীটে যদি কোনও ভুল হয় তবে Gmail এটিকে উপেক্ষা করবে।

আপনি ভাবতে পারেন যে আপনার সিএসএস নিখুঁত, কারণ আপনি এটি প্রায়শই করেছেন, কেন আমার সিএসএসে আমার ভুল হবে? এটি সিএসএস ভ্যালিডেটর (উদাহরণস্বরূপ http://www.css-uthorator.org/ ) এর মাধ্যমে চালান এবং দেখুন কী ঘটে। কিছু জিমেইল ডিসপ্লে সমস্যাগুলির মুখোমুখি হওয়ার পরে আমি তা করেছি এবং আমার আশ্চর্যরূপে বেশ কয়েকটি মাইক্রোসফ্ট আউটলুক নির্দিষ্ট স্টাইলের ঘোষণা ভুল হিসাবে প্রদর্শিত হয়েছিল।

যা আমার কাছে উপলব্ধি করেছে, তাই আমি এগুলি স্টাইল শীট থেকে সরিয়ে এগুলিকে একটি 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]-->

এটি কেবল একটি সহজ উদাহরণ, তবে যারা জানেন, এটি কিছুটা সময় কার্যকর হতে পারে।


ধন্যবাদ, অবৈধ সিএসএসের অংশটি আমাকে প্রচুর সময় সাশ্রয় করেছে। আপনি যদি এখনও আশেপাশে থাকেন তবে আমাকে দয়া করে জানান।
শেডো উইজার্ড আপনার পক্ষে কান

4
আরে @ শ্যাডো উইজার্ড আমি কিছুক্ষণের জন্য গিয়েছিলাম তবে ফিরে এসেছি। খুশী হ'ল আপনাকে কিছুটা সময় সাশ্রয় করেছে।
শন স্পেন্সার

চিয়ার্স, কেবল নিশ্চিত করতে চেয়েছিলেন যে অনুগ্রহটি নষ্ট হবে না। :-)
শ্যাডো উইজার্ড আপনার পক্ষে কান

2

অন্যরা যেমন বলেছে, কিছু ইমেল প্রোগ্রাম CSS স্টাইলগুলি পড়বে না। আপনার যদি ইতিমধ্যে লিখিত একটি ওয়েব ইমেল থাকে তবে আপনি আপনার সমস্ত শৈলীর ইনলাইন করতে zurb থেকে নিম্নলিখিত সরঞ্জামটি ব্যবহার করতে পারেন:

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

মেলচিম্প, প্রচারাভিযান মনিটর ইত্যাদি থেকে উপরে উল্লিখিত টেমপ্লেটগুলি ব্যবহার করার সময় এটি অত্যন্ত কাজে আসে যখন আপনি যেমনটি পেয়েছেন তেমন কিছু ইমেল প্রোগ্রামে কাজ করবে না। এই সরঞ্জামটি মেল প্রোগ্রামগুলির জন্য আপনার স্টাইল বিভাগটি ছেড়ে দেয় যা এটি পড়বে এবং আপনি যে ফর্ম্যাটটি চেয়েছিলেন তাতে আরও সার্বজনীন পঠনযোগ্যতা পেতে সমস্ত শৈলীতে ইনলাইন রাখে।


ইনলাইনার লিঙ্কটির জন্য আপনাকে ধন্যবাদ।
শন স্পেন্সার

2

নোট করুন যে ইমেলগুলি প্রেরণের জন্য পরিষেবা এবং সরঞ্জামগুলি আপনার জন্য সিএসএসকে মঞ্জুরি দেওয়ার জন্য আপনার সিএসএসকে ইনলাইন করতে সক্ষম হতে পারে <style> ট্যাগগুলিতে কাজ করার ।

উদাহরণস্বরূপ, আপনি যদি মেলচিম্পের সাথে ইমেল প্রেরণ করেন তবে <style>ট্যাগগুলি থেকে আপনার সিএসএস ডিফল্টরূপে স্বয়ংক্রিয়ভাবে ইনিল্ড হয়ে যাবে। ম্যান্ড্রিলের সাহায্যে আপনি এই কার্যকারিতা সক্ষম করতে পারেন (যদিও এটি ডিফল্টরূপে অক্ষম করা হয়েছে) সেটিংস ট্যাবটির "পাঠানো ডিফল্ট" বিভাগের "এইচটিএমএল ইমেলগুলিতে ইনলাইন সিএসএস স্টাইলস" বক্সটি পরীক্ষা করে কার্য সম্পাদনের কারণে ):

ম্যান্ড্রিলে এটি কীভাবে করা যায় তা চিত্র দেখায়


0

মেলজেটে একটি টেম্পলেট ডিজাইন করার সময় আমারও একই সমস্যা ছিল। সমস্যার সমাধানটি <style>ট্যাগগুলির অভ্যন্তরে সিএসএস কোড মাইনিড করা হয়েছিল ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.