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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

الإعلان مميّز باللون الأحمر

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

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

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

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

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

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

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

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

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

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

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

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

  • تصحيح الأخطاء وقياس أداء تحميل خطوط الويب وتحسينها
  • التأكّد من صحة قواعد @font-face في خدمة مقارنة الأسعار (CSS)
  • اكتشاف أي اختلافات بين خطوط الويب وإصداراتها المحلية
يعرض Chrome هذه الجملة بخط Courier New إذا عثر على هذا الخط على جهازك.

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

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

    الخطوط المعروضة: محلية

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

  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. إعادة تحميل الصفحة والتمرير فوق img src أصبح عنصر src للصورة الحالية (currentSrc) هو الصورة الاحتياطية بتنسيق WebP.

محاكاة أنواع الصور

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