تطبيق تأثيرات أخرى: تفعيل المظهر الداكن التلقائي ومحاكاة ميزة التركيز وغير ذلك

Sofia Emelianova

يمكنك الاطّلاع على تأثيرات مفيدة لتطبيقها على صفحتك من خلال هذا المرجع الذي يعرض خيارات علامة التبويب العرض.

تمييز إطارات عرض الإعلانات

للتحقّق ممّا إذا كانت الإطارات تحمل علامات على أنّها إعلانات:

1. افتح علامة التبويب العرض في هذا demo، ثم ضَع علامة في المربّع تمييز إطارات الإعلانات.
2. لاحظ أن إطار الإعلان مميّزًا باللون الأحمر.

محاكاة صفحة مركَّز عليها

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

لمحاكاة صفحة مركَّز عليها:

1. افتح صفحة تتضمّن العنصر المطلوب تصحيح أخطاءه، مثلاً موقع YouTube الإلكتروني مع شريط البحث.

2. في الصفحة، افتح علامة التبويب العرض، ثم ضَع علامة في المربّع بجانب محاكاة صفحة مركَّز عليها وامسحها.

   

يمكنك أيضًا العثور على الخيار نفسه ضمن الزر :hov في شريط الإجراءات ضمن العناصر > الأنماط.

إيقاف الخطوط المحلية

تحقَّق مما إذا كانت بدائل الخطوط المحلية تعمل على النحو المتوقّع من خلال إيقاف مصادر local() في قواعد @font-face.

غالبًا ما يستخدم المطورون والمصممون نسختين مختلفتين من نفس الخط أثناء التطوير:

• خط محلي لأدوات التصميم الخاصة بك،
• خط ويب للتعليمات البرمجية

يؤدي إيقاف الخطوط المحلية إلى تسهيل ما يلي:

• تصحيح الأخطاء وقياس أداء تحميل خطوط الويب وتحسينها
• التأكّد من صحة قواعد @font-face في خدمة مقارنة الأسعار (CSS)
• اكتشاف أي اختلافات بين خطوط الويب وإصداراتها المحلية

محاكاة مصادر local() غير المتوفّرة في قواعد @font-face:

1. افحص الجملة أعلاه، وافتح العناصر > المُحسَّنة، ثم انتقِل للأسفل تمامًا، وضمن الخطوط المعروضة، ستجد أنّ Chrome عثر على Courier New في الملفات المحلية.

   

2. افتح علامة التبويب العرض، وضَع علامة في المربّع بجانب إيقاف الخطوط المحلية، ثم refresh أعِد تحميل الصفحة.

3. راقِب الجملة في Roboto على الويب.

   

تفعيل الوضع الداكن التلقائي

يمكنك الاطّلاع على الشكل الذي يمكن أن يبدو عليه موقعك الإلكتروني في الوضع الداكن حتى إذا لم تنفّذه.

قدّم Chrome 96 إصدارًا تجريبيًا حسب الأصل لميزة المظهر الداكن التلقائي على Android. باستخدام هذه الميزة، يطبّق المتصفّح مظهرًا داكنًا يتم إنشاؤه تلقائيًا على المواقع ذات المظهر الفاتح إذا فعّل المستخدم المظاهر الداكنة في نظام التشغيل.

لتفعيل الوضع الداكن التلقائي:

1. في هذه الصفحة، افتح علامة التبويب العرض وضَع علامة في المربّع بجانب تفعيل الوضع الداكن التلقائي.
2. راقِب هذه الصفحة في الوضع الداكن.

محاكاة قصور الرؤية

من المفترض أن يتمكّن الجميع من الوصول إلى الويب والاستمتاع به. تلتزم Google بتحقيق ذلك.

باستخدام "أدوات مطوري البرامج في Chrome"، يمكنك معرفة كيفية ظهور موقعك الإلكتروني للمستخدمين الذين يعانون من قصور في الرؤية، حتى تتمكّن من تحسين أدائه لهم. لمزيد من المعلومات، يمكنك الاطّلاع على مقالة محاكاة قصور رؤية الألوان.

لمحاكاة قصور الرؤية:

1. افتح علامة التبويب العرض.

2. ضمن محاكاة قصور الرؤية، اختَر أحد الخيارات التالية من القائمة المنسدلة:

   • ما مِن محاكاة:
   • الرؤية غير الواضحة:
   • التباين المنخفض:
   • عمى اللون الأزرق (بدون لون أحمر). ضعف إدراك اللون الأحمر؛ الخلط بين الأخضر والأحمر والأصفر.
   • عمى اللون الأخضر (بدون لون أخضر) تصور منخفض باللون الأخضر؛ الخلط بين الأخضر والأحمر والأصفر.
   • عمى اللون الأزرق (بدون لون أزرق) ضعف في إدراك اللون الأزرق، والتشويش بين الأخضر والأزرق
   • عمى الألوان (بدون ألوان): عدم القدرة على رؤية الألوان جزئيًا أو كليًا

إيقاف تنسيقَي الصور AVIF وWebP

تسهِّل عمليات المحاكاة هذه على المطوّرين اختبار سيناريوهات تحميل الصور المختلفة بدون الحاجة إلى تبديل المتصفِّحات.

لنفترض أنّ لديك رمز HTML التالي لعرض صورة بتنسيقَي AVIF وWebP للمتصفحات الأحدث، مع صورة PNG احتياطية للمتصفحات الأقدم.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

لإيقاف جميع صور AVIF على صفحة (أو صور WebP بالطريقة نفسها):

1. افتح علامة التبويب العرض، وضَع علامة في المربّع إيقاف تنسيق الصورة AVIF.
2. refresh إعادة تحميل الصفحة والتمرير فوق img src أصبح عنصر src للصورة الحالية (currentSrc) هو الصورة الاحتياطية بتنسيق WebP.

وبالمثل، يمكنك إيقاف الصور بتنسيق WebP.