مرجع الشارات

Sofia Emelianova
Sofia Emelianova
GitHub

يمكنك التبديل بين مختلف التراكبات وتسريع التنقّل في شجرة نموذج العناصر في المستند باستخدام هذه المرجع الشامل للشارات في لوحة العناصر.

إظهار الشارات أو إخفاؤها

لإظهار شارات معيّنة أو إخفائها، اتّبِع الخطوات التالية:

  1. افتح "أدوات مطوّري البرامج".
  2. انقر بزر الماوس الأيمن على أحد العناصر في شجرة نموذج العناصر في المستند، ثم ضَع علامة في مربّع شارة واحدة أو أكثر في القائمة الفرعية إعدادات الشارة.

قائمة "إعدادات الشارة"

تعرض لوحة العناصر الشارات المحدّدة بجانب العناصر المناسبة في شجرة نموذج العناصر في المستند. توضّح الأقسام التالية كل شارة.

View-source

تظهر شارة view-source بجانب علامة <html> في جذر صفحة HTML. انقر عليه لعرض مصدر صفحتك في لوحة المصادر.

شارة &quot;عرض المصدر&quot;

توفّر هذه الشارة سير عمل بديلاً لخيار عرض مصدر الصفحة في قائمة سياق الصفحة (النقر بزر الماوس الأيمن) في Chrome:

  1. في Chrome، انقر بزر الماوس الأيمن على صفحة > فحص.
  2. في لوحة العناصر، انقر على شارة view-source بجانب العلامة <html>.
  3. افحص مصدر الصفحة في لوحة المصادر.

شبكة

يكون عنصر HTML حاوية شبكة إذا تم ضبط السمة display في CSS على grid أو inline-grid. تحتوي هذه العناصر على شارات grid بجانبها تعمل على تبديل التراكبات المقابلة.

فعِّل النافذة المتراكبة في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة grid بجانب العنصر ولاحظ التراكب.

تراكب الشبكة

تعرض الطبقة المتراكبة الأعمدة والصفوف وأرقامها والفجوات.

للتعرّف على كيفية تصحيح أخطاء تخطيط الشبكة، اطّلِع على مقالة فحص شبكة CSS.

Subgrid

الشبكة الفرعية هي شبكة متداخلة تستخدم المسارات نفسها التي تستخدمها الشبكة الرئيسية. يكون العنصر حاوية شبكة فرعية إذا تم ضبط إحدى سماتَي grid-template-columns أو grid-template-rows أو كلتيهما على القيمة subgrid. تحتوي هذه العناصر على شارات subgrid بجانبها تعمل على تبديل التراكبات المقابلة.

فعِّل النافذة المتراكبة في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة subgrid بجانب العنصر ولاحظ التراكب.

تراكب الشبكة الفرعية

تعرض الطبقة المتراكبة الأعمدة والصفوف وأرقامها والفجوات في شبكة فرعية.

التعبير

يكون عنصر HTML حاوية مرنة إذا تم ضبط السمة display في CSS على flex أو inline-flex. تحتوي هذه العناصر على شارات flex بجانبها تعمل على تبديل التراكبات المقابلة.

فعِّل النافذة المتراكبة في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة flex بجانب العنصر ولاحظ التراكب.

الإعلان الذي يظهر على سطح الفيديو

يعرض التراكب مواضع العناصر الثانوية.

للتعرّف على كيفية تصحيح أخطاء التصميمات المرنة، اطّلِع على فحص وتصحيح أخطاء CSS flexbox.

يمكن لأداة DevTools رصد بعض إطارات الإعلانات ووضع علامات عليها. تحتوي هذه الإطارات على شارات ad بجانبها.

اكتشِف إعلانًا في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، ابحث عن عنصر بجانبه الشارة ad.

شارة الإعلان

لا يمكن النقر على شارة ad، ولكن يمكنك استخدام علامة التبويب العرض من أجل تمييز إطارات الإعلانات باللون الأحمر.

الانتقال للأسفل

يكون عنصر HTML حاوية قابلة للتمرير إذا تم ضبط خاصية CSS overflow على scroll أو auto عندما يكون هناك محتوى كافٍ للتسبّب في تجاوز السعة. تحتوي هذه العناصر على شارات scroll بجانبها.

شارة التمرير على عقدة شجرة نموذج العناصر في المستند

Scroll-snap

يمكن أن تحتوي حاويات التمرير على خصائص CSS التي تضبط نقاط المحاذاة. تحتوي هذه العناصر على شارات scroll-snap بجانبها تعمل على تبديل التراكبات المقابلة.

فعِّل النافذة المتراكبة في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة scroll-snap بجانب العنصر.
  3. جرِّب الانتقال إلى يسار العنصر ومراقبة الشكل المركّب.

العنصر المركب لانطباق الانتقال للأعلى أو للأسفل

تعرض الطبقة مواضع العناصر ونقاط المحاذاة.

الحاوية

يكون عنصر HTML حاوية إذا كانت لديه السمة container-type في CSS. تحتوي هذه العناصر على شارات container بجانبها تعمل على تبديل التراكبات المقابلة.

فعِّل النافذة المتراكبة في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة container بجانب العنصر.
  3. حاوِل تغيير حجم العنصر من خلال سحب الركن الأيسر السفلي ولاحظ التغيير في التنسيق والتراكب.

تراكُب عناصر الحاوية

يعرض التراكب مواضع العناصر الثانوية.

لمعرفة كيفية تصحيح أخطاء طلبات البحث في الحاويات، يمكنك الاطّلاع على فحص طلبات البحث في حاويات CSS وتصحيح أخطائها.

الخانة

عنصر <slot> في HTML هو عنصر نائب يمكنك ملؤه بالمحتوى الخاص بك. بالإضافة إلى العنصر <template>، يتيح لك العنصر <slot> إنشاء أشجار DOM منفصلة وعرضها معًا. تحتوي عناصر محتوى الفتحة على شارات slot بجانبها تعمل كروابط تؤدي إلى الفتحات المقابلة.

يمكنك الاطّلاع على شارة slot في المعاينة التالية:

  1. افحص العنصر في المعاينة.
  2. في شجرة نموذج العناصر في المستند، انقر على شارة slot بجانب العنصر لتحديد موقع الفتحة المقابلة. الحصول على شارات وعرضها
  3. يمكنك الرجوع إلى محتوى الموضع الإعلاني من خلال النقر على شارة reveal.

طبقة علوية

تساعدك هذه الشارة في فهم مفهوم الطبقة العلوية وتصوّره. تعرض الطبقة العلوية المحتوى فوق جميع الطبقات الأخرى، بغض النظر عن قيمة z-index. عند فتح عنصر <dialog> باستخدام طريقة .showModal()، يضعه المتصفّح في الطبقة العلوية.

لمساعدتك في تصور عناصر الطبقة العليا، تضيف لوحة العناصر الحاوية #top-layer إلى شجرة نموذج العناصر في المستند بعد علامة الإغلاق </html>.

تحتوي عناصر الطبقة العلوية على شارات top-layer (N) بجانبها، حيث يمثّل N رقم فهرس العنصر. الشارات هي روابط تؤدي إلى العناصر المقابلة في الحاوية #top-layer.

يمكنك الاطّلاع على شارة top-layer (N) في المعاينة التالية:

  1. في المعاينة، انقر على فتح مربّع الحوار.
  2. فحص مربع الحوار
  3. في شجرة نموذج العناصر في المستند، انقر على شارة top-layer (1) بجانب العنصر <dialog>. تنقلك لوحة العناصر إلى العنصر المقابل في الحاوية #top-layer بعد علامة الإغلاق </html>. حاوية الطبقة العليا والشارة
  4. ارجع إلى العنصر <dialog> من خلال النقر على شارة reveal بجانب العنصر أو ::backdrop.

الوسائط

تكون شارة media غير مفعَّلة تلقائيًا. عند تفعيل هذا الخيار، يظهر بجانب العنصرَين <audio> و<video>. انقر على هذه الشارة لفتح لوحة الوسائط وتصحيح أخطاء الوسائط.

تم تفعيل شارة الوسائط في إعدادات الشارة وعرضها بجانب عنصر الفيديو.

لمزيد من المعلومات، يُرجى الاطّلاع على مقالة تصحيح أخطاء مشغّلات الوسائط باستخدام "لوحة الوسائط".

نافذة منبثقة

النافذة المنبثقة هي أي عنصر يتضمّن السمة popover، وهي مفيدة لمجموعة كبيرة من الأنماط التفاعلية، بما في ذلك تلميحات الأدوات والتنبيهات والإشعارات وغير ذلك. تحتوي هذه العناصر على شارات popover بجانبها.

يعرض هذا الشعار شعار top-layer بجانبه يؤدي إلى العناصر المقابلة في الحاوية #top-layer.

يمكنك الاطّلاع على شارة popover في المعاينة التالية:

  1. في المعاينة، انقر على TOGGLE POPOVER.
  2. افحص النافذة المنبثقة التي تظهر.

  3. في شجرة نموذج العناصر في المستند، انقر على شارة popover بجانب العنصر <div popover>. تعرض لوحة العناصر شارة top-layer.

    شارة النافذة المنبثقة بجانب العنصر الذي يتضمّن سمة نافذة منبثقة

  4. اتّبِع الخطوات الواردة في قسم الطبقة العليا.

لمزيد من المعلومات، يُرجى الاطّلاع أيضًا على https://web.dev/learn/css/popover-and-dialog.

Starting-style

تحدّد قاعدة @starting-style الأنماط الأولية للعنصر قبل عرضه على الصفحة. هذا الإجراء مطلوب للعناصر التي تظهر بحركة من display: none، لأنّها تحتاج إلى حالة يمكن أن تظهر منها بحركة. تحتوي هذه العناصر على شارات starting-style بجانبها.

يؤدي هذا الشعار إلى تبديل الأنماط في قاعدة @starting-style، ما يتيح لك مشاهدة الرسوم المتحركة أثناء عملها.

يمكنك الاطّلاع على شارة starting-style في المعاينة التالية:

  1. في المعاينة، انقر على فتح النافذة المنبثقة.
  2. افحص النافذة المنبثقة التي تظهر.

  3. في شجرة نموذج العناصر في المستند (DOM)، انقر على شارة starting-style بجانب العنصر <div popover>.

    شارة نمط البدء بجانب العنصر الذي يتضمّن القاعدة ‎ @starting-style

  4. شاهِد الحركة في أثناء تنفيذها والأنماط التي يتم تطبيقها في علامة التبويب العناصر > الأنماط.

لمزيد من المعلومات، اطّلِع أيضًا على تحريك النوافذ المنبثقة.