الموارد

آلات الحالة بـ CSS :checked: كيف يعمل البريد التفاعلي بدون برمجة فعلًا

تحذف كل تطبيقات البريد وسوم <script> عند وصول الرسالة، لذا فلا شيء مما يبدو تطبيقًا حقيقيًا داخل رسالة بريد يعمل بـ JavaScript. إنه حقل إدخال مخفي من نوع radio أو checkbox، ومحدِّد :checked، ومُركِّب أشقاء يؤدي المهمة — تقنية تحظى بدعم حقيقي، وإن كان متفاوتًا، في مشهد البريد الوارد اليوم.

نُشر في 23 أغسطس 2026 · بقلم فريق MailInApp

تحذف كل تطبيقات البريد الرئيسية وسوم <script> قبل عرض الرسالة — بلا استثناءات، وبلا خيار للمُرسِل لتجاوز ذلك. لذا عندما تحمل رسالة عرضًا دوّارًا يعمل، أو قائمة قابلة للطي تتوسع، أو اختبارًا يقيّم الإجابة، فلا شيء من ذلك مكتوب بـ JavaScript. إنه مربع اختيار مخفي، ومحدِّد CSS، وتقنية يسمّيها مجتمع تطوير البريد الإلكتروني "آلة الحالة".

المشكلة: تطبيقات البريد تحذف <script>

تفترض التفاعلية على الويب في الغالب توفر JavaScript. أما البريد فلا يستطيع افتراض ذلك إطلاقًا — فـ Gmail وApple Mail وOutlook وكل تطبيق بريد رئيسي آخر يزيل وسوم <script> عند الوصول كإجراء أمني أساسي، بغض النظر عمّا يضمّنه المُرسِل أو طريقة توقيع الرسالة. وكل ما يتصرف كتطبيق داخل رسالة بريد يجب أن يكون قابلًا للتعبير عنه بالكامل بـ HTML وCSS، لأن هذا حقًا كل ما يبقى قائمًا عند عرض الرسالة.

التقنية: حقول إدخال مخفية ومُركِّبات الأشقاء

تقوم الآلية على الصنف الزائف :checked في CSS، مطبَّقًا على عناصر نماذج HTML حقيقية:

  1. يتتبّع حقل <input type="radio"> أو <input type="checkbox"> مخفي جزءًا واحدًا من الحالة — أي شريحة من العرض الدوّار نشطة، وهل لوحة القائمة القابلة للطي مفتوحة، وأي إجابة في الاختبار اختيرت.
  2. يحيط وسم <label for="..."> ظاهر بما ينبغي للمستلم أن يستطيع النقر عليه — سهم "التالي"، أو عنوان قسم في القائمة القابلة للطي، أو خيار في استطلاع — ويبدّل حالة التحديد لحقل الإدخال عند النقر، دون أي سكربت؛ فهذا سلوك أصلي في المتصفح لـ <label> و<input>.
  3. يُنسّق مُركِّب أشقاء في CSS (:checked ~ .panel، :checked + .content) عناصر أخرى بناءً على حالة التحديد لذلك الحقل — فيُظهر شريحة، أو يوسّع لوحة، أو يكشف رسالة "لقد اخترت B".

اجمع ما يكفي من هذه العناصر — حقل إدخال لكل حالة، وقاعدة مُركِّب لكل تغيير ناتج في التنسيق — فتكون النتيجة واجهة ذات حالة حقيقية، مبنية بالكامل من ترميز لا تمسّه أبدًا عملية حذف <script> في تطبيق البريد، لأنه لا يوجد سكربت يُحذف.

الدعم الفعلي: تفصيل لكل تطبيق بريد

وفقًا لـ مجموعة تطبيقات البريد التي اختبرها caniemail.com:

مستوى الدعمتطبيقات البريد
دعم كاملGmail (كل المنصات، منذ مارس 2020)، وApple Mail (macOS 12.4+ / iOS 13.3+)، وYahoo Mail، وProtonMail
دعم جزئيOutlook.com وOutlook الجديد وOutlook للجوال ("مدعوم فقط على محدِّدات النوع")؛ وSamsung Email (Android 7.0+)
لا دعمOutlook الكلاسيكي على Windows (2007–2019)؛ وبريد الويب من Orange وSFR (يحذفان عناصر الإدخال كليًا)

هذا رقم يختلف جوهريًا عن الوصول الفعلي الذي يتجاوز 91% والذي يذكره تقرير حالة عرض الرسائل في تطبيقات البريد لعام 2026 لتقنيات CSS الحركية عمومًا — فرقم caniemail يحتسب تطبيقات البريد بالتساوي بغض النظر عن عدد المستلمين الذين يستخدمون كلًا منها فعلًا، بينما يُرجَّح رقم الوصول بالحصة الحقيقية من مرات الفتح المتتبَّعة. يفشل Outlook الكلاسيكي على Windows في هذه التقنية تمامًا، لكنه أيضًا أقلية متقلصة ضمن فئة حصة سوقية يتفوق عليها Apple Mail وحده بفارق كبير — ولهذا فإن الترجيح بالاستخدام الفعلي، لا بعدد التطبيقات، هو الرقم الذي ينبغي أن يوجّه قرار التصميم.

ماذا يحدث حيث لا تُحترم :checked

في تطبيق بريد لا يدعم :checked إطلاقًا، تُعرض حقول الإدخال المخفية والترميز الإضافي ببساطة دون أي أثر — لا خطأ، ولا تخطيط معطّل، فقط لا تفاعل. ويعود العنصر إلى ما يُظهره ترتيب ترميزه الافتراضي: الشريحة الأولى من العرض الدوّار، أو قائمة مطوية، أو قائمة ثابتة بسيطة بخيارات الاختبار. وتصميم هذا البديل عن قصد، بدلًا من ترك تطبيق غير داعم يُظهر شيئًا نصف معطّل، هو المهمة الفعلية لمحرك البدائل — راجع كيف تعمل البدائل للاطلاع على النموذج الكامل ذي المستويات الثلاثة الذي تندرج فيه هذه التقنية.

المصادر

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

ما آلة الحالة بـ CSS :checked في البريد الإلكتروني؟

نمط يتتبّع فيه حقل <input> غير مرئي من نوع radio أو checkbox الحالة التي يكون فيها العنصر (أي شريحة من العرض الدوّار، وأي لوحة من القائمة القابلة للطي، وأي إجابة في الاختبار)، ويجعل وسم <label> عنصر التحكم الظاهر بأكمله قابلًا للنقر دون JavaScript، ويُظهر مُركِّب أشقاء في CSS (:checked ~ .panel) المحتوى أو يخفيه بناءً على حالة التحديد لذلك الحقل — HTML وCSS خالصان، بلا سكربت.

لماذا لا تستطيع رسائل البريد التفاعلية استخدام JavaScript؟

لأن كل تطبيقات البريد الرئيسية تحذف وسوم <script> لأسباب أمنية قبل عرض الرسالة، بغض النظر عمّا يضمّنه المُرسِل — لذا يجب أن يكون أي تفاعل قابلًا للتعبير عنه بـ HTML وCSS وحدهما إن كان سيصمد بعد التسليم.

ما تطبيقات البريد التي تدعم تقنية :checked؟

وفقًا لمجموعة تطبيقات البريد التي اختبرها caniemail.com: دعم كامل في Gmail (كل المنصات، منذ مارس 2020)، وApple Mail (macOS 12.4+ / iOS 13.3+)، وYahoo Mail، وProtonMail؛ ودعم جزئي في Outlook.com وOutlook الجديد وOutlook للجوال ("مدعوم فقط على محدِّدات النوع") وSamsung Email (Android 7.0+)؛ ولا دعم في Outlook الكلاسيكي على Windows (2007–2019) أو بريد الويب من Orange وSFR، اللذين يحذفان عناصر الإدخال كليًا.

ماذا يحدث في تطبيقات البريد التي لا تدعم :checked؟

تُعرض حقول الإدخال المخفية والترميز الإضافي دون أي أثر، ويعود العنصر إلى حالته الثابتة — الشريحة الأولى من العرض الدوّار، أو القائمة المطوية، أو قائمة بسيطة بخيارات الاختبار — بدلًا من أن تتعطل أو تُظهر ترميزًا معطّلًا. وسلوك البديل الثابت هذا هو مهمة محرك البدائل، لا أثر جانبي يُتحايل عليه.

صمّم للبريد الوارد الذي يهمّ فعلًا

ابدأ بالباقة المجانية — كل عنصر تفاعلي ومحرك البدائل الكامل مضمَّنان في كل فئة.