content-visibility: auto — خاصية CSS واحدة تنزّل زمن رسم الصفحة 90%
لو صفحة المقالات في موقعك فيها 600 كارت وبتاخد 1.2 ثانية تظهر، المتصفح مش بطيء. هو بيرسم الـ 600 كارت كلهم حتى اللي تحت الـ scroll بـ 5,000 بكسل. خاصية content-visibility: auto بتقول للمتصفح "ارسم بس اللي بيشوفه المستخدم"، فبيرجع الزمن لحوالي 90ms. سطرين CSS، بدون JavaScript، شغّالة على Chrome 85+ و Edge و Safari 18+.
المشكلة باختصار
المتصفح أول ما يفتح صفحة بيمر بـ 4 مراحل: parse → style → layout → paint. كل عنصر في الـ DOM بيمر على المراحل دي، حتى لو طالع برّه الـ viewport. ده اللي بيخلي صفحة فيها 1,000 منتج تاخد 800ms في الرسم على لابتوب متوسط، حتى لو المستخدم بيشوف 8 منتجات بس على الشاشة.
النتيجة: الـ FCP بيقفز فوق ثانية، الـ LCP بيتدهور، والـ Scroll FPS بيوقع على أول 3 ثوان من تفاعل المستخدم. الحل التقليدي اللي بيتقال هو "اعمل virtual scrolling بـ react-window". ده شغّال لكن تكلفته كبيرة: refactor للـ component tree، فقدان جزئي للـ semantic HTML، وكسر بحث Ctrl+F. في حل أبسط بكثير لو المشكلة على صفحات طويلة عادية.
التعريف بالظبط — content-visibility: auto
الخاصية اتضافت لمواصفة CSS Containment Module Level 2، ومدعومة في Chromium 85 (أغسطس 2020)، و Safari 18 (سبتمبر 2024). فكرتها: المتصفح بيتعرّف على العنصر كأنه موجود في الـ DOM — يعني Ctrl+F شغّال، Screen reader شغّال، والـ anchor link شغّال — لكن بيأجل عمليتي layout و paint لحد ما العنصر يقترب من الـ viewport.
مثال تقريبي للفهم
تخيل فندق فيه 200 غرفة. لو الموظف يفضل ينضّف كل الـ 200 غرفة الساعة 6 الصبح حتى لو في 12 ضيف بس الليلة، بيضيع 4 ساعات شغل بدون فايدة لـ 188 غرفة فاضية. الذكي يجهّز الغرفة لما الضيف يخلّص check-in. المتصفح بدون content-visibility زي الموظف الأول. مع content-visibility: auto زي الموظف الثاني.
التعريف العلمي الدقيق
الخاصية بتفعّل ثلاث حاجات على العنصر تلقائيًا: layout containment، paint containment، وsize containment. المتصفح بيخصّص للعنصر placeholder بحجم تقديري (من contain-intrinsic-size) من غير ما يحسب الـ layout الفعلي. لما الـ scroll يقرّب العنصر من الـ viewport (الـ proximity threshold حوالي 50% من viewport height حسب توثيق Chromium)، المتصفح بيعمل الـ layout والـ paint الحقيقيين في الـ frame اللي بعده.
المثال التنفيذي — سطرين CSS
افترض عندك صفحة مقالات فيها 600 كارت بهذا الشكل:
<div class="article-list">
<article class="card">
<img src="cover.jpg" alt="..." />
<h3>عنوان المقال</h3>
<p>ملخص قصير...</p>
</article>
<!-- 599 كارت مماثل -->
</div>
