الدرس 8 من 8

تخطّي ما لا يُرى

هدف الدرس

رسم ما يظهر على الشاشة فقط

01

الشرح

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

ويبقى المحتوى موجودًا في الصفحة، فيجده البحث بـ Ctrl+F ويقرؤه قارئ الشاشة وتصل إليه الروابط، وهذا بخلاف display: none أو حذف العناصر.

انتبه: القسم الذي يتخطّاه المتصفح يُعامَل كأنه فارغ، فيصير ارتفاعه صفرًا ويقفز شريط التمرير كلما رُسم قسم جديد. ولهذا تحجز له contain-intrinsic-size ارتفاعًا تقديريًّا، والكلمة auto قبل الطول تجعل المتصفح يتذكّر الارتفاع الحقيقي بعد أول رسم.

02

المطلوب

اجعل المتصفح يتخطّى رسم كل .section ما دام خارج الشاشة، واحجز للقسم ارتفاعًا تقديريًّا قريبًا من ارتفاعه الحقيقي، واستعمل auto ليتذكّر المتصفح الارتفاع الحقيقي.

الفحوص

4 فحوص
  1. المتصفح يتخطّى رسم كل قسم خارج الشاشة
  2. لكل قسم ارتفاع محجوز
  3. الارتفاع المحجوز يستعمل auto ليتذكّر الارتفاع الحقيقي
  4. لا يصير ارتفاع أي قسم صفرًا
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تعرف في هذا المسار أين يضيع الوقت فعلًا في صفحتك، وكيف توفّره بإضافة العناصر مرّة واحدة وتقليل الاستدعاءات وعدم تكرار الحساب.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/4

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 4 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تعرف في هذا المسار أين يضيع الوقت فعلًا في صفحتك، وكيف توفّره بإضافة العناصر مرّة واحدة وتقليل الاستدعاءات وعدم تكرار الحساب.

مستواه متقدّم، وفيه 8 دروس مجموع مدّتها ساعة ونصف.