المستوى: متوسط — يفترض إنك تعرف Flexbox/Grid، Lighthouse، وتقدر تفتح DevTools وتقرا Performance tab.
لو صفحة المنتجات عندك فيها 80 كارد ومدوّنة طولها 12 شاشة، المتصفح بيدفع ضريبة layout وpainting على كل شيء حتى اللي مش ظاهر. content-visibility: auto بسطر CSS بيخلّي المتصفح يتجاهل العناصر اللي بره الـ viewport في أول رسم، وبيوفّر 73% من زمن الـ rendering على صفحات طويلة فعلاً.
المتصفح بيدفع ضريبة الرسم على حاجات إنت أصلاً مش شايفها
المشكلة باختصار
لمّا الصفحة تحتوي على عشرات أو مئات العناصر (كاردات، تعليقات، صفوف جدول)، المتصفح بيعمل layout وpaint وstyle resolution لكل عنصر حتى لو نازل بعد 8 شاشات من الـ viewport. النتيجة: First Contentful Paint عالي، Largest Contentful Paint بطيء، وScroll fps متقطع.
الافتراض هنا إن صفحتك ثابتة الطول تقريبًا (مدوّنة، صفحة منتجات، archive page، dashboard). لو الصفحة قصيرة (هيدر + هيرو + 3 سكشنز) المشكلة دي مش موجودة عندك أصلاً.
مفهوم Content-Visibility بالتفاصيل
فيه مثال بسيط للمبتدئ يوضّح الفكرة: تخيّل إنك بتقرا كتاب 400 صفحة. لو دماغك بتحاول تستوعب كل الصفحات في نفس اللحظة، هتتعلق. اللي بيحصل فعلاً إنك بتفتح صفحة وقت ما توصلها. content-visibility بيخلّي المتصفح يطبّق نفس المبدأ: يأجّل شغل الصفحات اللي لسه ما وصلتلهاش.
بالظبط بالتعريف العلمي من W3C CSS Containment Module Level 2: content-visibility: auto بيطبّق contain: layout style paint على العنصر، وبيخلّي المتصفح يتخطّى الـ rendering work (layout + paint) للعناصر اللي بره الـ viewport. لمّا العنصر يقرّب يدخل الـ viewport (بنسبة معيّنة من المسافة)، المتصفح بيعمل له render طبيعي.
الفرق بينه وبين display: none أساسي: display: none بيطلّع العنصر من الـ accessibility tree وبيكسر الـ in-page search. أما content-visibility: auto بيخلّي العنصر موجود في DOM وaccessible وقابل للبحث، بس المتصفح بيؤجّل رسمه.
التطبيق العملي
الكود بسيط لكن فيه نقطة لازم تنتبه لها: المتصفح مش هيعرف ارتفاع العنصر قبل ما يرسمه، فلو ما وفرتش contain-intrinsic-size، الـ scrollbar هيقفز لمّا تنزل والعناصر تترسم.
/* قبل: المتصفح برسم كل الـ 80 كارد في أول رسم */
.product-card {
display: flex;
padding: 16px;
border: 1px solid #e5e7eb;
}
/* بعد: المتصفح بيتخطّى رسم اللي بره الـ viewport */
.product-card {
display: flex;
padding: 16px;
border: 1px solid #e5e7eb;
content-visibility: auto;
contain-intrinsic-size: auto 280px;
}
تطبيقها على سكشنز كاملة:
