HTML Academy · درس

الأنماط المضمّنة للبريد الإلكتروني

تطبيق CSS مضمّنًا لضمان عرض متسق عبر عملاء البريد الإلكتروني

الأنماط المضمّنة للبريد الإلكتروني درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

لماذا الأنماط المضمنة؟

تزيل العديد من برامج البريد الإلكتروني، وأشهرها Gmail على الويب قبل مايو 2016، إلى جانب عدة تطبيقات للهواتف ما زالت تفعل ذلك حتى اليوم، كتل <style> وأوراق الأنماط الخارجية أو تعيد كتابتها. وتُعد سمات style="..." المضمنة صيغة CSS الوحيدة المضمونة للبقاء في جميع برامج البريد.

اكتب في CSS خارجي وأرسل الأنماط مضمنة

إن كتابة الأنماط المضمنة يدويًا أمر يصعب صيانته. اكتب الرسالة باستخدام وسوم <style> العادية وأسماء الفئات، ثم شغّل أداة لتضمين الأنماط مثل Juice أو Premailer أو mjml أثناء البناء لنسخ كل قاعدة إلى سمة style للعنصر المطابق قبل الإرسال.

الأولوية النوعية تحسم

تتمتع الأنماط المضمنة بأعلى specificity باستثناء !important. ويجب أن يستخدم استعلام الوسائط الذي يريد تجاوز قيمة مضمنة !important في كل خاصية، لأن التصريح المضمن سيفوز بخلاف ذلك بغض النظر عن سياق @media.

@media (max-width: 600px) {
  .col {
    width: 100% !important;
    display: block !important;
  }
}

أدوات تضمين الأنماط لا تعدّل @media

تنسخ أدوات تضمين الأنماط القواعد التي تطابق العناصر الفردية فقط؛ وتبقى كتل @media داخل وسم <style> لأنها لا يمكن تسطيحها. وهذا مناسب، إذ يترك Gmail وبرامج إزالة الأنماط الأخرى الأنماط المضمنة سليمة، بينما تطبق البرامج التي تحترم وسوم <style> استعلامات الوسائط فوقها.

تجنب الصيغة المختصرة

تتعطل بعض برامج البريد عند استخدام الصيغة المختصرة؛ فقد يتم تجاهل font: 14px/1.4 Arial بالكامل. استخدم الصيغة الموسعة، مثل font-family وfont-size وline-height، حتى تعمل كل خاصية أو تفشل بصورة مستقلة.

عيّن اللون والخلفية دائمًا

تعكس العديد من برامج البريد الألوان تلقائيًا في الوضع الداكن. ويمنع ضبط color وbackground-color صراحةً في حاويات النص كوارث ظهور نص أسود على خلفية سوداء. احرص دائمًا على الجمع بينهما.

وحدات الطول

التزم باستخدام px لتحديد الأحجام. فدعم rem وvh وvw غير متسق. وتعمل النسب المئوية مع الجداول في التخطيطات كاملة العرض؛ أما العروض المطلقة بالبكسل في الجداول والخلايا الداخلية فتُعرض بالطريقة نفسها في جميع برامج البريد.

الخطوط: مجموعات الخطوط الآمنة للويب

تعمل خطوط الويب عبر @font-face في Apple Mail وiOS Mail وThunderbird، لكنها لا تعمل في Outlook وGmail. استخدم مجموعة خطوط آمنة للويب كقيمة مضمّنة (Arial, Helvetica, sans-serif)، واجعل @font-face تحسينًا تدريجيًا فقط للعملاء الذين يدعمونه.

صور الخلفية وOutlook

تعمل background-image المضمّنة على div في العملاء الحديثين، لكن Outlook يتجاهلها. استخدم bgcolor كبديل احتياطي، و<v:rect> مشروطًا عبر VML في Outlook، حتى يعرض كل عميل خلفية مكافئة بصريًا، حتى عندما يتعذر تحقيق التطابق الكامل.

اختبر في العملاء الفعليين

قد تبدو الأنماط المضمّنة صحيحة في معاينة المتصفح، لكنها قد تُعرض بشكل مختلف في Gmail أو Outlook أو iOS Mail. استخدم Litmus أو Email on Acid أو معاينات Mailtrap المجانية للتحقق من كل عميل رئيسي قبل إرسال الحملة.

إعادة ضبط الأنماط

أضف إعادة ضبط صغيرة داخل وسم <style> (margin: 0 على body، وline-height: 100% على الجداول، وborder: none على الصور) لتحييد الأنماط الافتراضية للعملاء. ضعها داخل استعلام وسائط إذا أردت تطبيقها فقط في المواضع التي يُحترم فيها <style>.

اختبار المعرفة

لماذا تتطلب استعلامات الوسائط في رسائل HTML الإلكترونية استخدام !important في كل خاصية؟

الملخص

يحتاج البريد الإلكتروني إلى أنماط مضمّنة حتى تصمد أمام حذفها من قِبل العملاء، لكن يُكتب author عادةً داخل <style> وتُضمّن الأنماط أثناء عملية البناء. استخدم !important داخل استعلامات الوسائط للتغلب على أولوية الأنماط المضمّنة، وفضّل الخصائص المفصلة على الصيغ المختصرة، واضبط color وbackground-color صراحةً، والتزم بوحدات px، واختبر في العملاء الفعليين قبل الإرسال.

الأسئلة الشائعة

هل درس «الأنماط المضمّنة للبريد الإلكتروني» مجاني؟

نعم — نص درس «الأنماط المضمّنة للبريد الإلكتروني» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «الأنماط المضمّنة للبريد الإلكتروني»؟

تطبيق CSS مضمّنًا لضمان عرض متسق عبر عملاء البريد الإلكتروني تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الأنماط المضمّنة للبريد الإلكتروني»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy