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

Sofia Emelianova

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

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

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

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

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

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

لمحاكاة صفحة مركَّز عليها، اتّبِع الخطوات التالية:

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

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

   

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

للتعرّف على المزيد من الطرق لتجميد عنصر، يُرجى الاطّلاع على مقالة تجميد الشاشة وفحص العناصر التي تختفي.

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

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

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

• خطّ محلي لأدوات التصميم
• خط ويب لرمزك

ويسهِّل إيقاف الخطوط المحلية عليك ما يلي:

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

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

1. افحص الجملة أعلاه، وافتح Elements >. حوسبة، ومرِّر للأسفل، وضمن الخطوط المعروضة، اكتشِف أنّ Chrome عثر على Courier New في ملفات محلية.

   

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

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

   

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

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

طرح الإصدار 96 من Chrome مرحلة تجربة وتقييم للمظهر الداكن التلقائي على 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.