CSS Academy · درس

واجهة CSS Layout ونطاقها

أنشئ خوارزميات تخطيط مخصصة باستخدام CSS Layout API، وافهم نطاق Houdini وحدوده.

واجهة CSS Layout ونطاقها درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

نظرة عامة على CSS Houdini

CSS Houdini مجموعة من واجهات API منخفضة المستوى تكشف أجزاءً من محرّك عرض CSS لـ JavaScript. وتشمل: Typed OM وProperties & Values API وPaint API وLayout API وAnimation Worklet. وتمكّن هذه الواجهات مجتمعةً من إنشاء امتدادات مخصصة لـ CSS.

ما هو CSS Layout API؟

يتيح CSS Layout API للمطورين تعريف خوارزميات تخطيط مخصصة باستخدام JavaScript، ويمكن استخدامها كقيم للخاصية display في CSS. ويمكنكم إنشاء تخطيطات بقدرة تضاهي Grid أو Flexbox.

بنية Layout Worklet

يطبّق Layout Worklet الطريقتين intrinsicSizes() وlayout()، ويسجّل نفسه باستخدام registerLayout():

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

استخدام تخطيط مخصص

أشِر إلى التخطيط المسجّل في CSS:

<div class="masonry-container">
  <div class="item" style="height: 60px;">1</div>
  <div class="item" style="height: 100px;">2</div>
  <div class="item" style="height: 40px;">3</div>
  <div class="item" style="height: 80px;">4</div>
  <div class="item" style="height: 120px;">5</div>
  <div class="item" style="height: 50px;">6</div>
</div>

حالة Layout API

يحظى CSS Layout API بدعم محدود من المتصفحات، ولا يزال تجريبيًا إلى حد كبير، إذ يتطلب تفعيل علامات تجريبية في Chrome. وهو اليوم أقرب إلى واجهة API بحثية أو مستقبلية منه إلى أداة جاهزة للاستخدام في بيئة الإنتاج. وقد تُنفّذ المتصفحات تخطيط Masonry أصلاً بدلًا من ذلك.

قاعدة @scope

تُعد @scope ميزة CSS أحدث، وهي جزء من مواصفة CSS Scoping، وتحدّ من نطاق قواعد CSS ليقتصر على شجرة DOM فرعية محددة دون الحاجة إلى إضافة أصناف في كل مكان.

صيغة @scope

حدّد جذر النطاق، وحدّ النطاق اختياريًا:

<div class="card">
  <p class="title">Scoped Title</p>
  <p>Body text inside the card.</p>
</div>

@scope مع حد

يمنع حد النطاق القواعد من المطابقة داخل المكوّنات المتداخلة:

<div class="article">
  <p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
  <div class="advertisement">
    <p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
  </div>
</div>

الفئة الكاذبة :scope

تشير :scope داخل @scope إلى عنصر جذر النطاق:

<div class="card is-hovered">
  <p>Hover state applied statically for preview</p>
</div>

دعم @scope في المتصفحات

يُدعم @scope في Chrome 118+ وSafari 17.4+. وسيأتي دعمه في Firefox. استخدموه مع @supports للنشر بأمان.

الرؤية الأوسع لـ Houdini

يتمثل هدف CSS Houdini في جعل منصة الويب قابلة للتوسعة، بما يتيح للمطورين إضافة ميزات إلى CSS نفسها بدلًا من انتظار مورّدي المتصفحات لتنفيذها. وتُعد واجهات API المتاحة اليوم، مثل Typed OM و@property وPaint، الأجزاء الأكثر جاهزية للاستخدام في بيئة الإنتاج من هذه الرؤية.

تحقق سريع

ماذا تحقق @scope (.card) في CSS؟

خلاصة

CSS Houdini مجموعة من واجهات API تكشف محرّك العرض. يتيح Layout API إنشاء خوارزميات عرض مخصصة، لكنه لا يزال تجريبيًا في الغالب. وتحدّ @scope من نطاق قواعد CSS ليقتصر على أشجار DOM فرعية محددة، مما يمنع تسرّب الأنماط دون الحاجة إلى الالتزام الصارم بتسمية BEM. أما ميزات Houdini الأكثر جاهزية للاستخدام في بيئة الإنتاج فهي Typed OM و@property وPaint API.

الأسئلة الشائعة

هل درس «واجهة CSS Layout ونطاقها» مجاني؟

نعم — نص درس «واجهة CSS Layout ونطاقها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «واجهة CSS Layout ونطاقها»؟

أنشئ خوارزميات تخطيط مخصصة باستخدام CSS Layout API، وافهم نطاق Houdini وحدوده. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «واجهة CSS Layout ونطاقها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy