مرجع الشارات

صوفيا إميليانوفا
صوفيا إميليانوفا
GitHub

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

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

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

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

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

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

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

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

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

تراكب الشبكة.

يُظهر التراكب الأعمدة والصفوف وأعدادها والفجوات.

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

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

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

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

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

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

يُظهر التراكب الأعمدة والصفوف وأعدادها والفجوات في شبكة فرعية.

Flex

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

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

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

طبقة مرنة

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

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

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

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

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

شارة الإعلان:

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

إبزيم التمرير

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

يمكنك استكشاف شارة الفتحةslot في المعاينة التالية:

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

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

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

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

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

يمكنك استكشاف شارة ربط بالجزء العلوي الأيسر من شاشة جهة الاتصال.top-layer (N) في المعاينة التالية:

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

الوسائط

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

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

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