مرجع الشارات

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

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

لعرض شارات معيّنة أو إخفائها:

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

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

عرض المصدر

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

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

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

شبكة

يكون عنصر 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 بجانب العنصر ولاحِظ التراكب.

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

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

إعلان

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

يمكنك العثور على إعلان في المعاينة التالية:

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

لا يمكن النقر على شارة ad، ولكن إذا مرّرت مؤشر الماوس فوقها، سيظهر لك تلميح يقدّم سياقًا حول سبب تحديد العنصر كإعلان، مثل:

• تسلسل النصوص البرمجية: النصوص البرمجية التي شاركت في إنشاء العنصر
• قواعد قائمة الفلاتر: القاعدة المحدّدة من قائمة الفلاتر (مثل EasyList) التي تطابقت مع العنصر أو المورد الذي تم تحميله

يمكنك أيضًا استخدام علامة التبويب العرض لـ تمييز الإطارات الإعلانية باللون الأحمر.

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

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

scroll-snap

يمكن أن تحتوي حاويات التمرير على سمات CSS تضبط نقاط التثبيت. تحتوي هذه العناصر على شارات scroll-snap بجانبها تُفعِّل التراكبات المقابلة وتوقفها.

يمكنك تفعيل التراكب وإيقافه في المعاينة التالية:

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

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

الحاوية

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

يمكنك تفعيل التراكب وإيقافه في المعاينة التالية:

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

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

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

الخانة

العنصر <slot> في HTML هو عنصر نائب يمكنك ملؤه بالمحتوى الخاص بك. بالإضافة إلى العنصر <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>. انقر على هذه الشارة لفتح لوحة الوسائط وتصحيح أخطاء الوسائط.

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

نافذة منبثقة

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

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

يمكنك العثور على شارة popover في المعاينة التالية:

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

3. في شجرة نموذج العناصر في المستند (DOM)، انقر على شارة 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> أو أوقِفها.

   

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

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

custom-element

تحتوي عناصر HTML المخصّصة التي يتم تحديدها من خلال أسماء العلامات التي تتضمّن واصلة أو سمات is="..." للعناصر المضمّنة المخصّصة على شارات custom-element بجانبها في شجرة نموذج العناصر في المستند (DOM).

انقر على الشارة للانتقال إلى الرمز ذي الصلة في لوحة المصادر.