مرجع الشارات

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

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

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

1. افتح أدوات مطوري البرامج.
2. انقر بزر الماوس الأيمن على عنصر في شجرة DOM واختَر إعدادات الشارة....
3. ضَع علامة في مربّعات الاختيار بجانب الشارات التي اخترتها أو أزِلها.

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

شبكة

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

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

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

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

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

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

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

تبديل التراكب في المعاينة التالية:

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

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

التعبير

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

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

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

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

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

إعلان

يمكن لأدوات مطوري البرامج اكتشاف بعض إطارات الإعلانات ووضع علامات عليها. وتظهر بجانب هذه الإطارات ad شارة.

يمكنك الاطّلاع على إعلان في المعاينة التالية:

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

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

صفحة مواضع التمرير

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

محاذاة مواضع التمرير

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

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

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

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

الحاوية

يكون عنصر HTML حاوية إذا كان يتضمّن السمة container-type CSS. تظهر شارات container بجانب هذه العناصر، وهي تُستخدَم لتفعيل أو إيقاف العناصر التي تظهر على سطح الفيديو.

تبديل التراكب في المعاينة التالية:

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة container بجانب العنصر.
3. حاول تغيير حجم العنصر عن طريق سحب الزاوية اليسرى السفلية ومراقبة تغيير التنسيق والتراكب.

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

لمعرفة كيفية تصحيح أخطاء طلبات البحث في الحاوية، راجِع فحص طلبات بحث حاوية CSS وتصحيح الأخطاء فيها.

الحيز

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

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

1. فحص العنصر في المعاينة
2. في شجرة نموذج DOM، انقر على شارة ink_selectionslot بجانب العنصر لتحديد مكان الفتحة المقابلة.
3. يمكنك الرجوع إلى محتوى الشريحة بالنقر على شارة ink_selectionreveal.

الطبقة العليا

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

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

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

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

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

الوسائط

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

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