مرجع الشارات

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

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

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

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

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

معرّف الإصدار العالمي (GRid)

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

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

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

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

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

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

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

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

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

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

Flex

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

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

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

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

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

إعلان

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

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

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

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

محاذاة تمرير

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

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

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

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

الحاوية

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

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

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

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

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

الحيز

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

تعرَّف على شارة "slot" في المعاينة التالية:

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

طبقة علوية

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

لمساعدتك في عرض عناصر الطبقة العلوية، تضيف لوحة العناصر حاوية #top-layer إلى شجرة نموذج العناصر في المستند (DOM) بعد علامة الإغلاق </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>. انقر على هذه الشارة لفتح لوحة الوسائط وتصحيح أخطاء الوسائط.

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