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

Sofia Emelianova
Sofia Emelianova

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

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

للتحقّق مما إذا تم وضع علامات على الإطارات باعتبارها إعلانات:

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

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

محاكاة صفحة مركّزة

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

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

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

    محاكاة صفحة مركّزة

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

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

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

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

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

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

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

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

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

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

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

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

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

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