يدعم Gmail الآن العرض: لا شيء ؛: ماذا يعني ذلك لتصميمات بريدك الإلكتروني

نشرت: 2016-09-01

يعد Gmail مسؤولاً عن العديد من المشكلات التي تواجه مطوري البريد الإلكتروني. أدى افتقارها إلى دعم العديد من خصائص CSS - بما في ذلك عدم وجود دعم لعلامة <style> في <head> للبريد الإلكتروني - إلى تنهد جماعي لمطوري البريد الإلكتروني في جميع أنحاء العالم. يعد تشفير البريد الإلكتروني أمرًا صعبًا ، خاصة بالنسبة لـ Gmail.

ولكن في 31 أغسطس 2016 ، لاحظ خبراء البريد الإلكتروني حول العالم حدوث تغيير كبير في Gmail. بدأت في دعم display: none; خاصية CSS display: none; .

ما هو العرض: لا شيء ؛ ؟

display:none; هي خاصية CSS تخفي عناصر معينة من بريدك الإلكتروني. على سبيل المثال ، display:none; يمكن استخدامها لإخفاء نص العنوان المسبق الذي تريد استخدامه للتحكم في نص المعاينة الذي يظهر في البريد الوارد ، ولكنك لا تريد أن يتم عرضه في نص رسالة البريد الإلكتروني. أو يمكن استخدامه للتحكم في المحتوى الخاص بسطح المكتب الذي ترغب في إخفائه عندما يفتح المشترك الخاص بك على جهاز محمول.

جرب عباد الشمس

معاينة رسائل البريد الإلكتروني الخاصة بك في Gmail

شاهد كيف أثرت التغييرات في Gmail على تصميمك. قم بمعاينة بريدك الإلكتروني على الفور في Gmail - وأكثر من 50 عميل بريد إلكتروني آخر - باستخدام Litmus.

جرب Litmus مجانًا →

ومع ذلك ، لم يدعم Gmail استخدام display:none; في الماضي ، مما تسبب في الكثير من الإحباط في مجتمع البريد الإلكتروني.

في الماضي ، من أجل جعل نص العنوان المسبق يختفي من نص رسالة بريد إلكتروني في Gmail ، كان على مصممي البريد الإلكتروني استخدام أحد الحلول البديلة التالية:

  • <div style=”max-height: 0px; overflow: hidden;”></div>
  • <div style=”width: 0px; height: 0px; max-width: 0px; max-height: 0px; overflow: hidden;”></div>
  • <img style=”width: 0px; height: 0px;” />

يعد إعداد تلك الحلول واستبدال التصميم للعملاء الآخرين الذين قد لا يدعمون خصائص CSS هذه مضيعة للوقت بشكل لا يصدق ، ويمكن أن يضيف أحيانًا ساعات إلى وقت التطوير والاختبار.

الآن ، يبدو أن الأمور قد تغيرت - وقد يكون هذا أكبر خبر لمصممي البريد الإلكتروني هذا العام.

يدعم Gmail الآن العرض: لا شيء ؛

كما اكتشف بعض خبراء البريد الإلكتروني اليقظين هذا الأسبوع ، يدعم Gmail استخدام display:none; على جميع عناصر HTML المهمة التي اختبرناها ، بما في ذلك:

  • <div>
  • <img>
  • <a>
  • <table>
  • <input>

لا تصدق قبل أن تراه؟ نحن لم نفعل ذلك أيضًا. إذن ، هذا مثال على رمز يحتوي على لقطات شاشة لتتمكن من التحقق منها:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Gmail display: none;</title> <style> @media screen and (max-width: 2000px) { * [summary~="hide"] {display:none;} } </style> </head> <body> <div>I will not show</div> <div class="hide" summary="hide">I will not show in Gmail.com webmail accounts</div> <a href="https://litmus.com">I will not show</a> <img src="http://pages.litmus.com/l/31032/2015-06-30/3kn7qh/31032/63832/litmus_logo_white.png" width="130" height="48"> <table> <tr> <td>I will not show</td> </tr> </table> <input type="checkbox"> </body> </html>

تم طرح التغيير على جميع العملاء ، بما في ذلك Gmail و Google Apps و Inbox by Gmail.

عرض لا شيء؛ الدعم في Gmail

تحقق الأخضر

Gmail (@ عناوين gmail.com في Chrome / Firefox / Explorer)

تحقق الأخضر

تطبيقات Google (Chrome / Firefox / Explorer)

تحقق الأخضر

Inbox by Gmail (Chrome + Firefox)

تحقق الأخضر

Inbox by Gmail (iOS / Android)

تحقق الأخضر

تطبيق Gmail (iOS / Android)

ما لم يتغير هو أن Gmail لا يزال يفتقر إلى الدعم لفئات CSS أو معرفات ، مما يعني أنه لا يزال يتعين عليك تضمين أي CSS ونقل جميع معلومات التصميم - بما في ذلك display:none; الممتلكات — في نص البريد الإلكتروني بتنسيق HTML الخاص بك.

دلالات أخرى

كما هو الحال مع أي تغيير في دعم CSS في عميل البريد الإلكتروني ، فإن دعم display:none; في Gmail له تداعيات مثيرة للاهتمام:

هاك للتحكم في تغيير حجم الخط لتطبيق Gmail iOS

في إصدار iOS من تطبيق Gmail ، كان تغيير حجم الخط تلقائيًا يمثل مشكلة حقيقية. سيتم توسيع أحجام الخطوط ، مما يجعل رسائل البريد الإلكتروني تبدو معطلة في التطبيق. تم تقديم اختراق لمنع حدوث ذلك:

 <div> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - </div>

display:none; مدعوم الآن في Gmail (بما في ذلك تطبيق iOS) ، لم يعد هذا الاختراق يعمل ، مما أدى إلى كسر مئات رسائل البريد الإلكتروني مرة أخرى! يوجد إصلاح — ما عليك سوى إزالة display:none; أو تحريكها display:none; من CSS المضمنة إلى CSS المضمنة. كتب جاستن كو من Fresh Inbox عن هذا الإصلاح هنا.

إخفاء العناصر مع اختراق محدد السمات (بما في ذلك استعلامات الوسائط!)

على الرغم من أن Gmail لا يدعم CSS بشكل عام في <head> ، فإن بعض محددات CSS تعمل ، لا سيما lang والملخص لعناوين @ gmail.com فقط. على سبيل المثال:

 * [summary~="foo"]{ {display:none;} }

يمكن استخدام هذا لاستهداف عناصر في HTML والتي ستعمل في Gmail أيضًا:

 <div summary=”foo”>I will not display (even in Gmail)</div>

الآن بعد أن أصبح Gmail يدعم display:none; ، يمكنك استخدامه مع استعلام وسائط لإخفاء المحتوى في بريد ويب Gmail:

 @media screen and (max-width: 600px) { * [summary~="hide"] {display:none;} } <div summary=”hide”>I will not display when width is 600px or below</div>

أفكار لما يجب فعله طوال الوقت الذي لا تقوم فيه بإصلاح Gmail

الآن بعد أن قضيت وقتًا أقل بكثير في تطوير واستكشاف أخطاء رسائل البريد الإلكتروني الخاصة بك ، ماذا ستفعل بكل وقت الفراغ المتاح لك الآن؟ هذه بعض الاقتراحات:

  • أبقِ أصابعك متقاطعة على أن هذا التغيير دائم
    في بعض الأحيان ، يختبر موفرو البريد الوارد التغييرات التي تطرأ على محركات العرض الخاصة بهم ، ولكن يمكنهم التراجع عن التغييرات في أي وقت. دعونا نأمل ألا يأخذوا هذا أبدًا. لماذا لا تغرد لهم وتدعهم يعرفون إلى أي مدى نقدر التغيير؟
  • قم بتحميل مكتبة مقتطفات Litmus
    مع كل ما تبذلونه من display:none; الجديد display:none; اختراق بريد جوجل.
  • اقرأ كتاب
    لا بأس إذا كان الأمر يتعلق بالبريد الإلكتروني. ها هي توصيتنا.
  • اختبر واختبر واختبر المزيد
    استمر في اختبار كل بريد إلكتروني ترسله لأن عملاء البريد الإلكتروني سيستمرون في طرح تغييرات غير معلنة مثل هذه في المستقبل.

معاينة رسائل البريد الإلكتروني الخاصة بك في Gmail

كيف أثرت هذه التغييرات على تصميمات بريدك الإلكتروني؟ استخدم Litmus لمعاينة بريدك الإلكتروني على الفور في Gmail - وأكثر من 50 عميل بريد إلكتروني آخر - لضمان عرض تصميماتك على النحو المنشود.

هذا التحديث من Gmail هو مثال رئيسي لكيفية قيام عملاء البريد الإلكتروني بتغييرات الدعم دون إخطار مجتمع البريد الإلكتروني. تأكد دائمًا من أنك تقدم أفضل ما لديك من رسائل البريد الإلكتروني. اختبر كل بريد إلكتروني قبل كل إرسال.

جرب Litmus مجانًا →