{"id":"l-css-4-5","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"اعرف أيّ تغييرات CSS تستدعي التخطيط أو الرسم أو التركيب وحده، وحرّك الخصائص الرخيصة، واستخدم content-visibility وaspect-ratio لتبقى الصفحات الطويلة سريعة ومستقرّة.","html":"

بدا جدول Waypoint مكتملًا، ثم فتحه الفريق على هاتف Android عمره ثلاث سنوات عبر شبكة Wi-Fi المزدحمة في قاعة المؤتمر. تقطّع إشعار الحفظ، وبدا التمرير الأول لزجًا، ودفعت صور المتحدّثين النص إلى الأسفل وهي تُحمَّل. لم يكن شيء معطوبًا؛ كانت الصفحة ببساطة تؤدّي عملًا أكثر مما تحتاج.

\n

أداء CSS يعود إلى سؤال واحد: كم من مراحل خط الرسم يجبر هذا التغيير المتصفّح على تشغيلها؟

\n

خط الرسم في المتصفّح

\n

بعد أن تغيّر الـ CSS شيئًا ما، يشغّل المتصفّح حتى أربع مراحل لتحديث الشاشة:

\n
    \n
  1. الأنماط (Style): تحديد القواعد المنطبقة وحساب قيم كل عنصر.
    2. \n
  2. التخطيط (Layout): حساب حجم كل صندوق وموضعه.
    3. \n
  3. الرسم (Paint): ملء البكسلات: النصوص والألوان والحدود والظلال والصور.
    4. \n
  4. التركيب (Composite): تجميع الطبقات المرسومة على الـ GPU، مع تطبيق الـ transforms والشفافية.
    5. \n
\n

السرّ أن كل تغيير لا يحتاج إلا إلى البدء من مرحلة معيّنة. غيّر width فيجب أن يعمل التخطيط، ثم الرسم، ثم التركيب. وغيّر background-color فيمكن تخطّي التخطيط. وغيّر transform أو opacity على عنصر له طبقة خاصة به، فيستطيع المتصفّح تخطّي التخطيط والرسم معًا، وتحريك بكسلات موجودة أصلًا على الـ GPU.

\n
\n أربع مراحل لخط الرسم من اليسار إلى اليمين: الأنماط، التخطيط، الرسم، التركيب. صف لـ width وtop وmargin يمرّ بالأربع كلها. وصف لـ color وbackground وbox-shadow يتخطّى التخطيط. وصف لـ transform وopacity يتخطّى التخطيط والرسم.\n \n الأنماط\n \n التخطيط\n \n الرسم\n \n التركيب\n width, top\n \n المراحل الأربع، في كل إطار\n box-shadow\n \n \n مُتخطّاة\n translate\n \n \n مُتخطّاة\n
أيّ المراحل يستدعيها تغيير الخاصية
\n

في نقرة واحدة لا يهمّ الفرق. أما في حركة تعمل 60 مرة في الثانية، أو تغيير نمط يلمس 500 عنصر، فهو ما يقرّر هل ستبدو الصفحة سلسة أم لا.

\n

حرّك الخصائص الرخيصة

\n

كان إشعار الحفظ يتحرّك هكذا:

\n
CSS
@keyframes toast-in {\n  from { left: -320px; }\n  to   { left: 16px; }\n}
\n

left خاصية أبعاد: كل إطار يعيد تشغيل التخطيط للإشعار (ويفحص هل تحرّك أيّ شيء آخر)، ثم يعيد الرسم. والإصلاح يُبقي موضع الإشعار ثابتًا ويحرّك صورته بدلًا من ذلك:

\n
CSS
.toast {\n  position: fixed;\n  left: 16px;\n  bottom: 16px;\n  animation: toast-in 250ms ease-out;\n}\n\n@keyframes toast-in {\n  from { translate: -336px 0; opacity: 0; }\n  to   { translate: 0 0;      opacity: 1; }\n}
\n

النتيجة البصرية نفسها، بجزء صغير من العمل. ولهذا استخدمت كل حركة في هذه الدورة translate وscale وopacity وأخواتها. والمنطق نفسه ينطبق على الـ transitions: مرورٌ يغيّر box-shadow يعيد الرسم في كل إطار، وهذا مقبول لبطاقة واحدة وملحوظ لشبكة من خمسين بطاقة تتحرّك معًا. وإظهار ظلّ مرسوم مسبقًا على pseudo-element بتحريك opacity هو البديل الأرخص حين يهمّ الأمر.

\n\n

تخطَّ العمل الذي لا تراه

\n

يرسم الجدول جلسات يومين، لكن المستخدم يرى ملء شاشة واحدة في كل مرة. content-visibility: auto تتيح للمتصفّح تخطّي التخطيط والرسم للأقسام الواقعة خارج الشاشة:

\n
CSS
.day {\n  content-visibility: auto;\n  contain-intrinsic-size: auto 1200px;\n}
\n

المحتوى المتخطّى ليس له حجم، لذا تعطي contain-intrinsic-size المتصفّح تقديرًا يستخدمه كعنصر نائب؛ ومع auto يتذكّر الحجم الحقيقي بعد أن يُرسم القسم مرة. ودونها تنهار الأقسام إلى الصفر ويقفز شريط التمرير أثناء التمرير. يبقى المحتوى في الـ DOM وفي شجرة إمكانية الوصول، ويظل البحث داخل الصفحة يعمل. وcontent-visibility: auto ضمن Baseline منذ سبتمبر 2025، حين أضاف Safari 26 القيمة auto؛ والمتصفّح الذي لا يدعمها يرسم كل الأقسام ببساطة، كما كان يفعل من قبل.

\n

لا تحرّك الأشياء بعد ظهورها

\n

مقياس Cumulative Layout Shift، أحد مقاييس Core Web Vitals، يقيس قفز المحتوى أثناء تحميل الصفحة. وفي CSS يكون المذنب المعتاد وسائط بلا مساحة محجوزة. صورة متحدّث لها width: 100% بلا ارتفاع يكون ارتفاعها 0px حتى تصل الصورة، ثم تدفع كل شيء إلى الأسفل. احجز المساحة:

\n
CSS
.speaker img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1;\n  object-fit: cover;\n}
\n

سمتا width وheight على <img> تؤدّيان العمل نفسه، لأن المتصفّحات تستنتج منهما نسبة الأبعاد. وللخطوط من الويب، font-display: swap مع خط احتياطي بمقاييس مشابهة تمنع النص من إعادة الانسياب حين يُحمَّل الخط.

\n\n

أين أنت الآن

\n

على مدى عشرين درسًا نقلت جدول Waypoint من ملف أنماط يصارعك إلى ملف تستطيع توقّعه: الـ layers و:where() تحسم التعارضات، والـ custom properties تكشف واجهات الـ components، وgrid والـ subgrid والـ container queries تتولّى التخطيط، وoklch() وlight-dark() تتولّيان الألوان، والخصائص المنطقية تجعله يعمل بالعربية، والحركة لطيفة ورخيصة. والعادة التي تستحق أن تحتفظ بها هي عادة الدرس الأول: قبل أن تغيّر الـ CSS، توقّع ما سيفعله المتصفّح، ثم تحقّق.

\n","toc":[{"id":"sec-1","text":"خط الرسم في المتصفّح","level":2},{"id":"sec-2","text":"حرّك الخصائص الرخيصة","level":2},{"id":"sec-3","text":"تخطَّ العمل الذي لا تراه","level":2},{"id":"sec-4","text":"لا تحرّك الأشياء بعد ظهورها","level":2},{"id":"sec-5","text":"أين أنت الآن","level":2}],"takeaways":["كل تغيير بصري يمرّ ببعض مراحل الأنماط والتخطيط والرسم والتركيب؛ خصائص الأبعاد تستدعي التخطيط، والخصائص البصرية تستدعي الرسم، وtransform وopacity تستطيعان تخطّي الاثنين.","حرّك translate وscale وrotate وopacity؛ أما تحريك left أو width أو margin فيعيد تشغيل التخطيط في كل إطار.","content-visibility: auto مع contain-intrinsic-size تتيح للمتصفّح تخطّي رسم الأقسام الواقعة خارج الشاشة في الصفحة الطويلة.","حجز المساحة بـ aspect-ratio (أو بسمتي width وheight) يمنع إزاحات التخطيط حين تُحمَّل الصور والمحتوى المضمّن.","قِس قبل أن تحسّن، باستخدام لوحة Performance في DevTools وخيار وميض الرسم (paint flashing)، وأزل will-change حين تنتهي الحركة."],"further":[{"title":"Rendering performance (web.dev)","url":"https://web.dev/articles/rendering-performance"},{"title":"content-visibility (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content-visibility"},{"title":"Optimize Cumulative Layout Shift (web.dev)","url":"https://web.dev/articles/optimize-cls"}],"quiz":[{"q":"

إشعار منبثق ينزلق إلى الداخل بتحريك left من -320px إلى 16px. على هاتف متوسّط المواصفات يتقطّع. ما أفضل إصلاح؟

","options":[{"text":"أضف will-change: left إلى الإشعار.","why":"will-change لا تستطيع جعل left رخيصة؛ تغييرها يظل يعيد تشغيل التخطيط في كل إطار."},{"text":"حرّك translate من -336px 0 إلى 0 0 بدلًا من ذلك، مع إبقاء left ثابتة.","why":"صحيح. translate لا تغيّر إلا طريقة تركيب الإشعار المرسوم أصلًا، فيستطيع المتصفّح تخطّي التخطيط والرسم أثناء الحركة."},{"text":"قصّر الحركة إلى 50ms لتقلّ الإطارات.","why":"التقطّع يأتي من عمل التخطيط في كل إطار؛ والانزلاق في 50ms أسرع من أن يتابعه الناس."},{"text":"استخدم مكتبة حركة بـ JavaScript بدل CSS.","why":"مكتبة JS تحرّك left تصطدم بكلفة التخطيط نفسها، وتعمل على الـ main thread المشغول أيضًا."}],"answer":1},{"q":"

أيّ تغيير في الخصائص يسبّب عادةً إعادة رسم دون تخطيط؟

","options":[{"text":"padding","why":"الـ padding يغيّر حجم صندوق العنصر، فيعمل التخطيط (ثم الرسم)."},{"text":"font-size","why":"حجم الخط يغيّر مقاييس النص وفواصل الأسطر، وهذا تغيير في التخطيط."},{"text":"background-color","why":"صحيح. الأبعاد لا تتغيّر فيُتخطّى التخطيط، لكن يجب إعادة رسم البكسلات."}],"answer":2},{"q":"

في الجدول 60 بطاقة جلسة على مدى يومين، والرسم الأول بطيء. أضفت content-visibility: auto إلى قسم كل يوم. ماذا يجب أن تضيف أيضًا؟

","options":[{"text":"contain-intrinsic-size: auto 1200px، لتحتفظ الأقسام المتخطّاة بارتفاع تقديري ولا يقفز شريط التمرير.","why":"صحيح. المحتوى المتخطّى ليس له حجم خاص به؛ وحجم العنصر النائب الذاتي (الذي يُتذكَّر بعد الرسم الأول بفضل auto) يُبقي التمرير مستقرًا."},{"text":"will-change: contents على كل بطاقة.","why":"هذا يطلب من المتصفّح أن يجهّز كل بطاقة للتغيير، ما يكلّف ذاكرة ويلغي التوفير."},{"text":"لا شيء؛ content-visibility تتولّى الأحجام تلقائيًا.","why":"دون تقدير للحجم تنهار الأقسام المتخطّاة إلى ارتفاع صفر، فتقفز الصفحة وشريط التمرير أثناء التمرير."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Day 1

\n
\n
\n

Ana Ortiz

\n
\n
\n
\n

Day 2

\n

Twenty-eight sessions…

\n
\n
Saved to your schedule
","css":".speaker { width: 160px; }\n.photo {\n width: 100%;\n background: #ede9fe;\n border-radius: 12px;\n}\n.toast {\n position: fixed;\n left: 16px;\n bottom: 16px;\n padding: 8px 14px;\n border-radius: 8px;\n background: #1f2937;\n color: white;\n animation: toast-in 250ms ease-out;\n}\n\n@keyframes toast-in {\n from { left: -320px; }\n to { left: 16px; }\n}\n"},"solution":{"html":"
\n

Day 1

\n
\n
\n

Ana Ortiz

\n
\n
\n
\n

Day 2

\n

Twenty-eight sessions…

\n
\n
Saved to your schedule
","css":".speaker { width: 160px; }\n.photo {\n width: 100%;\n background: #ede9fe;\n border-radius: 12px;\n}\n.toast {\n position: fixed;\n left: 16px;\n bottom: 16px;\n padding: 8px 14px;\n border-radius: 8px;\n background: #1f2937;\n color: white;\n animation: toast-in 250ms ease-out;\n}\n.photo { aspect-ratio: 1; }\n\n.day {\n content-visibility: auto;\n contain-intrinsic-size: auto 1200px;\n}\n\n@keyframes toast-in {\n from { translate: -336px 0; opacity: 0; }\n to { translate: 0 0; opacity: 1; }\n}\n"},"checks":[{"id":"toast-keyframes-cheap","test":"const all = []; const walk = (rules) => { for (const r of rules) { all.push(r); if (r.cssRules) walk(r.cssRules); } }; for (const s of document.styleSheets) walk(s.cssRules); const kf = all.find((r) => r instanceof CSSKeyframesRule && r.name === 'toast-in'); if (!kf) return false; const props = [...kf.cssRules].flatMap((f) => [...f.style]); const cheap = ['translate', 'transform', 'opacity', 'scale']; return props.length > 0 && props.every((p) => cheap.includes(p)) && props.some((p) => p === 'translate' || p === 'transform');"},{"id":"toast-still-animates","test":"return style('.toast', 'animation-name') === 'toast-in' && parseFloat(style('.toast', 'animation-duration')) > 0;"},{"id":"toast-final-position","test":"await tick(400); const r = $('.toast').getBoundingClientRect(); return Math.abs(r.left - 16) < 1;"},{"id":"skip-offscreen","test":"return $$('.day').every((d) => style(d, 'content-visibility') === 'auto');"},{"id":"intrinsic-size","test":"return $$('.day').every((d) => { const v = style(d, 'contain-intrinsic-size'); return v.includes('auto') && /\\d/.test(v); });"},{"id":"photo-reserves-space","test":"const r = $('.photo').getBoundingClientRect(); return r.width > 0 && Math.abs(r.height - r.width) < 1;"}],"title":"اجعل رسم الجدول رخيصًا","prompt":"

ثلاثة إصلاحات للأداء، كلها في CSS:

\n
    \n
  1. أعد كتابة الـ keyframes toast-in لينزلق الإشعار من اليسار باستخدام خصائص ملائمة للـ compositor فقط (translate أو transform، إضافةً إلى opacity إن شئت). أبقِ الاسم toast-in، وتأكّد من أن الإشعار ينتهي عند left: 16px.
    2. \n
  2. دع المتصفّح يتخطّى رسم أقسام .day الواقعة خارج الشاشة، مع تقدير للحجم الذاتي يستخدم auto وطولًا.
    3. \n
  3. اجعل إطار .photo مربّعًا قبل تحميل أيّ صورة، ليحجز مساحته.
    4. \n
\n","hints":["يمكن أن تبقى left: 16px في الإشعار كما هي؛ حرّك بدلًا من ذلك مقدار إزاحته عن ذلك الموضع.","content-visibility: auto تقترن بـ contain-intrinsic-size: auto <length>.","@keyframes toast-in { from { translate: -336px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } } و.photo { aspect-ratio: 1; }."],"explanation":"

تحريك left يغيّر الأبعاد، فكان كل إطار يعيد تشغيل التخطيط والرسم. أما translate وopacity فلا تغيّران إلا طريقة تركيب طبقة الإشعار المرسومة أصلًا، فيستطيع المتصفّح تشغيل الحركة دون تخطيط أو رسم، وكثيرًا ما يكون ذلك خارج الـ main thread. وcontent-visibility: auto تتيح للمتصفّح تخطّي أقسام الأيام الواقعة خارج الشاشة كليًا، وcontain-intrinsic-size: auto 1200px تنوب عن ارتفاعها حتى تُرسم مرة، فيبقى شريط التمرير مستقرًا. وaspect-ratio: 1 تعطي إطار الصورة ارتفاعًا مستمدًّا من عرضه، فلا يتزحزح شيء حين تصل الصورة.

\n","checkLabels":{"toast-keyframes-cheap":"toast-in لا تحرّك إلا translate/transform وopacity","toast-still-animates":"الإشعار ما زال يشغّل حركة toast-in","toast-final-position":"الإشعار ينتهي في موضعه الطبيعي","skip-offscreen":"أقسام الأيام تستخدم content-visibility: auto","intrinsic-size":"لأقسام الأيام تقدير للحجم الذاتي مع auto","photo-reserves-space":"إطار الصورة مربّع قبل تحميل الصورة"}},"words":682,"readMinutes":4}