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

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

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

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

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 المتوفّرة على الويب.

   

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

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

قدَّم 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.